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
Ternyata bagus juga tutorialnya.. Terimakasih ya
BalasHapusSama-sama mas nasihin, saya ucapkan terima kasih juga atas kunjugan dan apresiasinya.
Hapusgan, kalo ditaruh sebelum kode jadinya diatas postingan
BalasHapusmaksudnya di taruh diatas tag <data:post.body/> yang kedua, berarti dibawah <data:post.body/> yang pertama. Coba lagi anda letakan di bawah <data:post.body/> yang berikutnya yang ke 3 atau ke 4 (tergantung struktur template)
Hapusmantep pak eta potona...
BalasHapushatur nuhun kang rama..hehe :-)
HapusPak, kalo mau masang text area kaya yang di atas gimana ? bagus tuh :)
BalasHapus