Cara Membuat Author Box Di Bawah Postingan Blogger




Cara Membuat  Author Box Di  Bawah Postingan Blogger
Cara Membuat  Author Box Di  Bawah Postingan Blogger 
 Mungkin sudah banyak yang mengenal authore box, namun saya kan menjelaskn sedikit mengenai author box, karena barnag kalai ada teman kita yang baru masuk di dunia blogger, jadi kemungkinan belum tau, author box dan bagaimana cara memasang Author Box yang keren dibawah postingan blog ? author box adalah merupakan sebuah widget yang mendekripsikan riwayat diri seorang admin blog atau biasanya disebut dengan kotak admin ,  untuk cara pemasangan author box sendiri saya rasa sangat  sangat mudah , bagi anda yang masih newbie paling tidak anda harus sedikit menguasai html .

  Nah apa fungsi dari memasang author box di blogger khususnya dibagian bawah postingan ? Untuk dari fungsinya tersebut yaitu kita dapat memperkenalkan tentang diri kita terhadap pengunjung yang mampir ke blogh/ website kita , sehingga nama anda akan menjadi familiar di dunia maya ini , hahay, mungkin begitulah fungsi authir box menurut saya sendiri. 

 Untuk demo dari aurthor box dibawah postingan , nanti demonya kurang lebih akan seperti  gambar di bawah ini ya.

Cara Membuat  Author Box Di  Bawah Postingan Blogger

  1. Langsung aja anda masuk pada bagian Edit HTML
  2. Selanjutnya Carilah kode ]]></b:skin> atau </style>
  3. Salin dan Tempelkan kode dibawah ini tepat diatas kode ]]></b:skin>atau </style> 
    /*BOX AUTHOR*/
    .boxauthor{position:relative;border:1px solid #000;background:#eee;box-shadow:0 0 5px #444 inset;margin:25px 0 15px;padding:10px}
    .boxtitle h3{color:#000;font:bold 14px Electrolize;background:#eee;width:103.3%;display:block;position:relative;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;margin:0 0 0 -22px;padding:7px 0 7px 25px}
    .boxtitle h3:before{content:&#39;&#39;;position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
    .boxtitle h3:after{content:&#39;&#39;;position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
    .boxauthor_photo{float:right;background:#eee;position:relative;z-index:999;box-shadow:0 0 5px #000;margin:-21px 0 5px;padding:30px 5px 5px}
    .boxauthor_photo:before{content:&#39;&#39;;position:absolute;top:0;right:135px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
    .boxauthor_photo:after{content:&#39;&#39;;position:absolute;top:0;right:-10px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 10px 10px 0}
    .boxauthor_photo img{width:120px;height:120px;border:2px solid #444}
    .boxcontent{font:12px/18px Electrolize,sans-serif;text-align:justify;color:#000;float:left;top:5px;left:0;display:block;position:relative;width:420px}
    .boxsocial{background:#eee;margin-left:-22px;width:100%;overflow:hidden;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;padding:5px 5px 5px 40px}
    .boxsocial :before{content:&#39;&#39;;position:absolute;bottom:0;left:-12px;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
    .boxsocial :after{content:&#39;&#39;;position:absolute;bottom:0;right:-12px;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
    .boxsocial a{text-align:center;background:#111;display:block;color:#fff!important;font:bold 12px Electrolize,sans-serif;text-decoration:none;border:1px solid #000;transition:all 1s ease;box-shadow:2px 2px 0 0 rgba(51,51,51,1)inset;padding:7px 0}
    .boxsocial a:hover{box-shadow:0 0 5px #000;border:1px solid #fff}
    .boxsocial div{float:left;margin-right:6px;width:88px}
    .boxsocial .boxsocialtitle{font:bold 12px Electrolize,sans-serif;text-align:center;text-transform:uppercase;display:block;width:107px;border:1px solid #000;box-shadow:0 0 5px #444 inset;padding:7px 22px}
  4. Nah untuk memanggil kode css diatas agar dapat berfungsi silahkan anda pasang kode dibawah ini , sebelum kode <data:post.body/> atau letak di mana anda suka
    <div class='boxauthor'>
    <div class='boxauthor_photo'>
    <img alt='mizipedia' src='https://2.bp.blogspot.com/-txM9C5cmUK0/WZlAwKc_1LI/AAAAAAAABbw/2KhxC4nsL34ZhUgCBLvR0YbwUpPGjtuQgCLcBGAs/s1600/mizi%2B-%2BCopy.png' title='mizipediacom'/>
    </div>
    <div class='boxtitle'>
    <h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='mizipedia'><data:post.author/></a></h3></div>
    <div class='boxcontent'>
    Terimakasih, telah membaca artikel mengenai <b><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b>. Semoga artikel tersebut bermanfaat untuk Anda. Mohon untuk memberikan 1+ pada <a href='https://plus.google.com/admin Blogger?rel=author' rel='author' target='_blank' title='Google+'>Google+</a>, 1 Like pada <a href='https://www.facebook.com/mizicuwey' rel='me' target='_blank' title='Facebook'>Facebook</a>, dan 1 Follow pada <a href='https://twitter.com/Joni25601974' rel='me' target='_blank' title='Twitter'>Twitter</a>. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan.
    </div>
    <div class='boxsocial'>
    <div class='boxsocialtitle'>
    Share Artikel
    </div>
    <div class='boxfb'>
    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a>
    </div>
    <div class='boxtwit'>
    <a expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
    </div>
    <div class='boxgplus'>
    <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a>
    </div>
    <div class='boxltsme'>
    <script>
    //<![CDATA[
    var uri = window.location.href;
    var ttle = document.title;
    document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' target='_blank' title='Share ke Lintasme'>Lintasme</a>");
    //]]>
    </script>
    </div>
    </div>
    </div>
  5. Apabilah sudah anda sesuaikan kode diatas dengan identitas diri anda sendiri , jangan lupa untuk anda klik save template dan bisa anda lihat hasilnya.
- Ganti kode mizipedia dengan Nama Anda.
- Ganti kode mizipedia dengan ID Anda (Facebook, Google, Twitter dll).
Demikian penjelasan pada siang ini mengenai Cara Membuat  Author Box Di  Bawah Postingan Blogger . apabila anda mahir dalam mengedit kotak author box yang di atas, silahkan anda terapkan ilmu anda. jika anda kurang jelas dan masih ada terdapat kesulitan bisa anda klik komentar di bawah ini. selamat mencoba, semoga berhasil kawan.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect