Membuat Author Box Di Bawah Postingan

Selamat malam semua, malam ini saya akan menjelaskan tentang membuat Author Box. Ternyata membuat Author Box tidaklah sulit.


Langsung ke TKP :

1. Login ke blogger
   
2. Masuk ke Edit Html , Beri Centang Pada  "Expand Template Widget"
3. Cari kode ini :

]]></b:skin>

4. Letakkan Kode di bawah ini di atas kode tersebut :

/***** Author Box ********************/
.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;
}

5. Simpan , Lalu Cari kode di bawah ini :

<div class=’post-footer-line post-footer-line-1’>

6. Letakkan Kode di bawah ini tepat di bawah kode di atas langkah no 5.

<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=’http://i959.photobucket.com/albums/ae80/barboz_228/gw_opt.jpg’ width=’70’/><b>About Author</b><br/>

Maka apakah mereka tidak memperhatikan perkataan (Kami), atau apakah telah datang kepada mereka apa yang tidak pernah datang kepada nenek moyang mereka dahulu?
(QS. AL MU'MINUN:68) !<br/></p>

</div>

</b:if>

7. Simpan dan Lihat Hasilnya.

Anda bisa berkreasi sendiri, untuk mengedit warna, lebar, panjang nya ada di kode Css nya.

Teks yang berwarna merah adalah Pesan/teks anda.

Teks yang berwarna biru adalah url gambar anda.

Membuat Author Box Di Bawah Postingan 9 out of 10 based on 10 ratings. 9 user reviews.