Cara Membuat Box Author Keren Di Blogspot

Cara Membuat Box Author Keren Di Blogspot

A pa itu box author? Box author adalah sejenis kotak pemberitahuan mengenai si penulis blog, dan pada umumnya box author ini terlihat pada akhir postingan artikel. Disana juga biasanya terdapat sebuah photo profil dan juga sekelumit atau sekilas tentang diri si penulis/ empunya blog. Ya, kurang lebih seperti itulah gambaran mengenai sebuah box author. Dan untuk pembuatannya sendiri sobat bisa mengikuti langkah-langkahnya di bawah ini.

Cara membuat box author keren di blogspot.

Setelah mengenal fungsi dari box author, kini saatnya aku lanjutkan kepada tata cara pembuatannya. Adapun langkah-langkah pemasangan box author adalah sebagai berikut.

• Login kedalam dasbor blog sobat. 

• Pilih Template.

• Pilih edit HTML, setelah terbuka keseluruhan kode html dalam template blog, kemudian cari kode berikut <div class='post-footer-line post-footer-line-1'/> gunakan pencarian cepat dengan menekan CTRL+F . dan jika sudah menemukannya, selanjutnya copy kode berikut ini dan pastekan dibawah atau setelah kode <div class='post-footer-line post-footer-line-1'/>

<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='https://lh6.googleusercontent.com/-uyjAv9dttnE/AAAAAAAAAAI/AAAAAAAACxU/dQKRPQu0A7g/s120-c/photo.jpg' width='70'/><b>About Author</b><br/>
Aku adalah seorang kapiten mempunyai kumis panjang kalau berjalan prok ! prok ! prok.!! aku seorang kapiten<br/></p>
</div>
</b:if>

Keterangan: silahkan ubah photo profil dan juga kalimat tentang diri sobat, dengan melakukan pengeditan pada url gambar,dan juga kalimat tersebut yang terlihat berwarna merah.

• Klik simpan template untuk menyimpan hasil kerja sobat.

• Selanjutnya, masih dalam edit HTML carilah kode yang mirip seperti ini ]]></b:skin> lalu copy kembali kode yang tersedia dibawah ini dan...lalu pastekan kodenya tepat sebelum/ diatas kode ]]></b:skin>

.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;
}

Terakhir klik simpan template dan selesai.!

Kurang lebih hasilnya akan terlihat seperti pada gambar dibawah ini

Dan akhirnya aku cukupkan sampai disini saja dulu cara membuat box author keren di blogspot ini, selamat mencoba dan bye-bye...