Cara menambah Author Box di Bawah Postingan Pada Blogspot

seberapa pentingkah author box itu pada sebuah postingan di blog, menurut saya lumayan penting, karena dengan adanya author box pada setiap postingan, pembaca akan dengan mudah mengetahu tentang diri kita sebagai pemilik blog,di samping itu juga akan menambah cantiknya tampilan sebuah postingan di blog kita.

Ok langsung saja, berikut ini cara membuatnya:

1. Login dulu ke dasbhord blog.
2. Setelah di halaman dasbhor, pilih rancangan.
3. Selanjutnya pilih Edit HTML
4. di halaman Edit HTML, jangan lupa beri tanda centang pada Expand Template Widget
5. Kemudian cari kode berikut ]]></b:skin>
6. lalu sisipkan kode berikut di bawah ini persis di atasnya;


.author-box {
background: #f0f0f0;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#666;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}

7. Selanjutnya Anda cari Kode seperti ini : <div class='post-footer-line post-footer-line-1'> setelah ketemu, cope paste dan simpan kode di bawah ini persis di bawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='author-box'> <p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='URL avatar/photo kita' width='70'/><b>About Author</b><br/> Sekilas info tentang diri anda<br/></p> </div> </b:if>

8. Sebelum anda simpan kode di atas, harap di ganti URL dengan ULR image foto anda,serta sekilas info tentang diri anda juga harus anda ubah dengan info tentang anda. About Author juga dapat anda ganti dengan judul ksesuai keingan anda.

Contoh Punya saya Jadi seperti di bawah ini saya buat:
<b:if cond='data:blog.pageType == "item"'> <div class='author-box'> <p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJCmGbNuWu47WYVdRZJeRF8vcK6THmlvKiWg35OrUpiwkrHIm33wTC9seEtJt7xr6HHphEfD4tu93xxbRmdgm-VzKTmh46LGjRNTu6bdet3s_Hu801EY3Pk5297psgM2gxrXSe577JQXM/s200/Blogging.jpg' width='70'/><b>Blogging Dan Internet</b><br/> Hanya sekedar Berbagi Informasi<br/></p> </div> </b:if>

9. Kemudian simpan templete

Hasilnya dapat anda lihat di setiap halaman postingan blog ini.

Ok selesai sudah, semoga bermanfaat.