Membuat kotak author berbasis CSS di blog

Pada postingan kali ini, saya akan berbagi ke anda tentang cara membuat kotak author keren berbasis CSS di blog. Pada umumnya kebanyakan para blogger ingin terlihat tampil lebih  profesional dimata para visitor atau pengunjung, sehingga berbagai cara dilakukan diantaranya mendesain tampilan blog seindah dan secantik mungkin atau membuat berbagai variasi gadget dll. Salah satunya dengan memodifikasi kotak author berbasis css agar terkesan lebih profesional.  

Live demo (arahkan krusor anda ke kotak author)

Tentang Author
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.
Follow Me: @Twitter | Facebook

APA SIH KOTAK AUTHOR ITU?  

Kotak author pada dasarnya adalah sebuah kotak yang ditempatkan di atas atau di bawah setiap postingan dengan tujuan untuk menginformasikan pengguna tentang dirinya, sedikit deskripsi atau menginformasikan tentang situs lain.

MENGAPA KOTAK AUTHOR PERLU? 

• Situs atau blog anda terkesan profesional
• Visitor mengetahui informasi lebih jauh tentang anda
• dll..

FITUR DARI KOTAK AUTHOR INI ADALAH:

• Elegant
• Terkesan profesional
• Ringan
• Menggunakan efek hover
• Termasuk ada gambar author (penulis)
• All in one

BAGAIMANA CARA MEMBUAT KOTAK AUTHOR DI BLOG?

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

•  Kemudian cari kode:

<div class='post-footer-line post-footer-line-1'> atau <data:post.body/> 

• Kopi dan Pastekan kode berikut setelah kode diatas:

<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/sijalupangna'>@Twitter </a>| <a href='https://www.facebook.com/pages/Eyang-anom/427305383989192'>Facebook</a></div>

Silahkan letakan kode diatas setelah  kode <data:post.body/> yang kedua atau ketiga

• 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 biru dengan deskripsi anda
• Ganti sijalupangna dengan ID twitter anda
• Ganti https://www.facebook.com/pages/Eyang-anom/427305383989192 dengan URL Facebook fans page anda.