Cara membuat kotak author versi mempesona di blog

Kotak Author mempesona ini menggunakan  efek rotator gambar. Itu berarti ketika  Mouse anda gulirkan atau diarahkan pada Author Gambar maka akan sedikit memutar. Anda bisa melihat demonya pada gambar diatas. Untuk memasang kotak Author disetiap akhir postingan blog cukup mengikuti langkah-langkah berikut:

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template -> Edit HTML

• Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan pencarian
• Berikutnya pastekan kode CSS dibawah ini tepat diatas kode ]]></b:skin> 

#BS-authorbox {
background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPXBT1e4ODVBT9YDqGjBB72gub2e5Tp6nLljdZXpMU3ZAiJMY2ytGCzvYhcQllipJYu_ULbLTjdq1Pj2symRDHMhyphenhyphenBLKppGIKUvnxN1LHD6YuY19k7uRN6OYSgU2ojAcmNK21rpPgc_kFL/s400/About+the+author.jpg) no-repeat scroll left top;
width:auto;
overflow:hidden;
color:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin:5px auto;
padding:40px 10px 10px 20px;
}
#BS-authorbox:hover {
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}
#BS-authorbox h4 {
font-size:16px;
color:#fff;
clear:none;
margin:0;
padding:10px 10px 5px;
}
#BS-authorbox .author_small {
font-style:italic;
}
#BS-authorbox img {
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
float:left;
border:4px solid #F9780E;
margin:10px;
padding:0;
}
#BS-authorbox img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg); 
}
#BS-authorbox p {
color:#F9EAD4;
margin:0;
padding:0 10px 10px;
}
#BS-authorbox a {
color:#F9780E;
}

Setelah menerapkan Kode CSS sekarang kita masuk untuk pengkodean HTML. Cukup ikuti langkah di bawah ini:

• sekarang cari lagi tag/kode <data:post.body/> dengan menekan CTRL+F untuk memudahkan pencarian

Anda akan menemukan 3-4 kode ini di template, fokus pada kode yang kedua

• Kopi dan pastekan kode berikut dibawah ini sebelum/diatas kode <data:post.body/> 

<div id='BS-authorbox'>  
<img alt='About Author' height='80' src='http://i1087.photobucket.com/albums/j479/jalupangna/51863_355302354559661_2060566186_o.jpg' width='80'/>
<h4><a href='http://plus.google.com/u/0/103806695606848957210' rel='author' title='Posts by  Jalupangna'>Posted by Jalupangna</a></h4>
 <p>Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. Seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.</p> <p>Kunjungi blog saya <a href='http://www.jalu-pangna.blogspot.com'>wawasan spiritual dan blogging</a> | Follow Me On <a href='http://www.twitter.com/sijalupangna'>Twitter</a> Or <a href='https://www.facebook.com/pages/Eyang-anom/427305383989192'>Facebook</a></p></div>

KUSTOMISASI

• Ganti http://i1087.photobucket.com/albums/j479/jalupangna/51863_355302354559661_2060566186_o.jpg  dengan URL/Link gambar anda
• Ganti http://plus.google.com/u/0/103806695606848957210 dengan URL Google plus anda
• Ganti jalupangna dengan nama anda
• Ganti URL Blog http://jalu-pangna.blogspot.com dengan URL blog anda demikian juga nama blognya wawasan spiritual dan blogging 
• Ganti juga sijalupangna dengan ID twitter anda
•  Silahkan ganti URL Facebook fans page https://www.facebook.com/pages/Eyang-anom/427305383989192 dengan URL facebook fans page anda
• Silahkan ganti deskripsi authornya sesuai dengan deskripsi anda

  

Happy Blogging...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 22.41