cara membuat kotak author atau identitas diri berbasis CSS di blog

seperti ini kalau diterapkan...

                              APA SIH KOTAK AUTHOR ITU?  

Kotak author pada dasarnya adalah sebuah kotak yang ditempatkan di atas atau di bawah setiap postingan dengan tujuan untukmenginformasikan 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

• Gantihttp://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 jimi jimey dengan ID twitter anda
• Ganti https://www.facebook.com/pages/jimi jimey/427305383989192 dengan URL Facebook fans page anda.

jangan lupa simpan...dan lihat perubahanya.