Wednesday, May 8, 2013

Widget Author Box dari Creating Website




author box
Widget Author Box adalah widget yang biasa dipasang oleh para blogger di bagian bawah postingan atau biasa dipasang di bawah judul posting.  Widget ini selain akan mempercantik tampilan blog, juga dapat diisi dengan berbagai pesan yang ingin disampaikan oleh penulis kepada pengunjung.

Saya telah menemukan beberapa widget author box, yang diisi oleh penulisnya dengan kata-kata motivasi yang menarik dan sangat kreatif, sebagian blogger juga telah mengisi widget ini dengan pemberitahuan, himbauan dan saran atau semacam disclaimer kepada pengunjung.  



  • Login ke blogger dengan ID Anda
  • Pada dashboar blogger pilih menu Template > Edit HTML beri tanda mark (centang) pada kotak Expand Widget Templates.
  • Sebaiknya sebelum melakukan perubahan pada dokumen HTML Template, biasakan untuk melakukan backup template terlebih dahulu.
  • Cari kode ]]></b:skin> kemudian simpan kode CSS beriktu ini tepat di atasnya
  • .masadmin{display:block; width:auto; background:#3d7b95; border:5px solid #011923;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; padding:0; margin:10px 0; font:normal 12px Arial,Sans-Serif; color:#efedfa}
    .masadmin .isi{padding:5px}
    .masadmin h3{ border-bottom:1px dashed #d4cffd; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:16px Oleo Script Swash Caps; padding:3px 0; margin:0 10px; display:block}
    .masadmin h3 a{color:#FEEA83}
    .masadmin img{width:70px; height:70px; margin:0 10px 0 0; float:left; padding:4px; background:#d4cffd;}
  • Selanjutnya cari kode <data:post.body/> dan simpan kode berikut ini tepat di bawahnya, atau jika ingin menampilkan widget author box di bawah judul posting, tempatkan kode berikut tepat diatasnya.
  • <div class='masadmin'>
    <h3>Written by : <a href='http://digratisan.blogspot.com/'>Nama Anda</a> - Descripsi Singkta Tentang Anda </h3>
    <div class='isi'>
    <img src='http://url gambar atau photo Anda, ambil saja dari profile google plus'/>
    Isi widget Author Box - Masukkan pesan atau uneg-uneg Anda di sini, atau apa saja yang ingin di tampilkan pada widget ini.
    <p><span style='float:left;text-align:left;'>
    Join Me On: <a href='http://www.facebook.com/ID facebook Anda' rel='nofollow'>Facebook</a> | <a href='http://www.twitter.com/ID Twitter Anda' rel='nofollow'>Twitter</a> | <a href='https://plus.google.com/ID G+ Anda/' rel='nofollow'>Google Plus</a></span>
    <span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://digratisan.blogspot.com/' target='_blank'>:: Thank you for visiting ! ::</a></span></p>
    <div style='clear:both;'/>
    </div>
    </div>
  • Ganti tulisan yang dicetak tebal dengan warna biru, sesuaikan dengan selera Anda.
  • Simpan perubahan dokumen template Anda dengan menekan tombol Save Templates
Sekarang buka salah satu artikel pada blog Anda dan periksa tampilan widget author box ini jika berhasil ucapkan Alhamdulillah.

0 comments:

Post a Comment