Cara Membuat Author Box/Kotak Admin Dibawah Posting Blogger

Author Box - Hai para sobat satanic sekalian.... udah lama ne ane nggak update blog ini. Maklumlah mendadak sekarang jadi sok sibuk hehe... Kali ini saya akan share tentang cara membuat author box dibawah postingan. Mungkin hal ini udah nggak asing lagi buat para blogger mania. Tapi tujuan saya kali ini lebih kepada pendatang baru di dunia blogger (newbie), seperti halnya saya sendiri.

Banyak cara untuk membuat blog kita agar tampil lebih komunikatif. Salah satunya dengan cara memasang/membuat author box yang berisi sekilas tentang penulis/admin/author blog tersebut. Ulasan yang akan di tulis di author box/kotak admin ini terserah kreasi dari sobat masing-masing. Yang jelas untuk link nama penulis/author, judul posting dan tanggal publish postingan sudah saya sertakan dalam script widget kotak admin/author box ini, sehingga sobat tidak perlu lagi mengisikan linknya secara manual.

Cara Membuat Box Author Blogger:

1. Login ke blogger sobat
2. Pilih Rancangan >> Edit HTML, jangan lupa centang Expand Template Widget
3. Lalu cari kode <div class='post-footer'> di template sobat
4. Terus copy script di bawah ini, dan pastekan/taruh diatas kode <div class='post-footer'>
   

   <!-- Author box-->
   <p><b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='admin-tulisan'>
   <h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4>
   <div class='kontainer'>
   <img src='http://dl.dropbox.com/u/50860098/Image/SATANIC.jpg'/>
   Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran anda adalah pelajaran yang sangat berharga bagi saya.
   <div style='clear:both;'/>
   </div>
   </div>
   </b:if>
   <!-- Author box -->

5. Selanjutnya silahkan ganti link url gambar berwarna merah dengan url gambar sobat.
6. Kemudian geser ke atas dan cari kode ]]></b:skin> pada template sobat
7. Lalu copy kode css di bawah ini dan pastekan/taruh di atas kode ]]></b:skin>
   

       .admin-tulisan{
       display:block;
       width:auto;
       background:#FFFAFA;
       border:2px solid #fff;
       box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
       padding:0;
       margin:30px 0 10px 0;
       font:normal 12px Arial, Sans-Serif;
       color:#222;
       }
       .admin-tulisan .kontainer{padding:5px;}
       .admin-tulisan h4{
       background:#3156be;
       border:none;
       border-bottom:1px solid #699019;
       color:#fff;
       text-transform:normal;
       text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
       font:bold 12px Arial,Sans-Serif;
       padding:5px 10px;
       margin:0 0 0 0;
       display:block;
       }
       .admin-tulisan h4 a{color:#FEEA83;}
       .admin-tulisan img{
       width:70px;
       height:70px;
       margin:0 10px 0 0;
       float:left;
       border:1px solid #131ECE;
       padding:2px;
       background:#ccd5ee;
       box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
       }

8. Bila sobat mengerti tentang css silahkan sobat atur jenis font, warna, dll, menurut selera sobat sendiri.
9. Pratinjau dulu hasil author box/kotak admin yang di buat. Jika dirasa editing udah cukup save/simpan template sobat. Demo bisa sobat lihat di bawah posting.

Nah sekarang box author udah nongol di blog sobat. Sekian dulu tutorial tentang cara membuat box author di bawah setiap postingan. Selamat berkreasi dan sampai jumpa lagi di Satanic X-Zone.

Ditulis Oleh : Unknown ~ Berbagi ilmu komputer, internet dan blogging pemula

Artikel Cara Membuat Author Box/Kotak Admin Dibawah Posting Blogger ini diposting oleh Unknown pada hari Rabu, 21 Desember 2011. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran anda adalah pelajaran yang sangat berharga bagi saya.

:: Kirim Artikel ini ke Lintas Berita ! ::