.jpg)
Minggu, 23 Juni 2013
Cara membuat kotak author keren berbasis CSS di Blog
Pernahkan anda melihat sebuah kotak yang terdapat di bawah setiap postingan blog menampilkan pengenalan singkat tentang author (penulis) ? pernahkan anda membayangkan untuk membuat dan memiliki salah satu kotak author tersebut? Dengan kotak author postingan tidak hanya terkesan lebih profesional akan tetapi para pembaca/visitor mendapatkan informasi lebih jauh tentang si penulis.
Dengan memberi sedikit informasi tentang latar belakang atau pengantar mengenai si penulis dan bisa meningkatkan reputasi sosialnya.
Kali ini saya akan share ke anda bagaimana cara membuat kotak author keren dengan beberapa tombol jejaring sosial di bawah setiap postingan. Kotak author yang satu ini unik, keren, cantik dan menarik. Dilengkapi dengan biographi author dan juga tombol jejaring sosial seperti Facebook dan twitter . Widget yang satu ini menggunakan sepenuhnya CSS3 transisi.
Cara Menambahkannya ke Blog
- Masuk ke akun blogger anda -> Klik Drop down menu
- Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML
- Cari tag / kode <div class='post-footer-line post-footer-line-1'> atau <data:post.body/> kemudian pastekan kode berikut dibawah tag/kode <div class='post-footer-line post-footer-line-1'> atau <data:post.body/>
<style>
.black-box {
background-color: rgb(251, 251, 251);
margin: 30px 0px;
padding: 30px;
text-align: center;
}
.black-box:hover {
box-shadow: 10px 7px 10px 7px rgba(0, 0, 0.7);
transition: all 0.5s ease-out 0s;
}
</style>
<div class='black-box'><img alt='Author' height='70px' src='http://i1087.photobucket.com/albums/j479/jalupangna/51863_355302354559661_2060566186_o-1.jpg' style='float: left;'/> <span style='font-weight: bold;'>Tentang Author</span><br/>
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.<br/>
Follow Me: <a href='http://www.twitter.com/TaretanPamexs'>@Twitter </a>| <a href='https://www.facebook.com/pages/Eyang-anom/427305383989192'>Facebook</a></div>
KETERANGAN
- Ganti http://i1087.photobucket.com/albums/j479/jalupangna/51863_355302354559661_2060566186_o-1.jpg dengan URL/Link gambar anda
- Silahkan anda ganti kalimat yang disorot warna hijau dengan deskripsi anda
- Ganti TaretanPamexs dengan ID twitter anda
- Ganti https://www.facebook.com/pages/Eyang-anom/427305383989192 dengan URL Facebook fans page anda.
