Cara Mudah Membuat Author Box di Bawah Postingan

Advertisemen

Author Box adalah sebuah kotak yang berisikan teks pesan atau deskripsi yang ingin disampaikan oleh pengarang kepada pembaca. Banyak sekali macam-macam untuk mempercantik blog, salah satunya Author Box. Selain untuk memberi teks pesan atau deskripsi kepada pembaca, Author Box inipun juga bisa membuat sang pembaca merasa di hargai oleh pengarang.

Salah satu cara untuk mempercantik Author Box adalah memberi foto admin agar pengunjung tahu bahwa sobat adalah sang pengarang di blog ini, Author Box pun banyak jenisnya, antara lain Wordpress dan Blogger. Cara membuatnya mudah, simak langkah-langkah berikut:

1. Seperti biasa, log in ke akun blog sobat.
2. Klik Template > Edit HTML > Lanjutkan > Centang ( Expand Template Widget ).
3. Cari kode ]]></b:skin> ( untuk mempermudah pencarian, klik Ctrl+F atau F3 ).
4. Copy kode dibawah ini, lalu paste tepat 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;
}

5. Kemudian cari kembali kode <div class='post-footer-line post-footer-line-1'> copy kode dibawah ini, lalu paste tepat dibawah 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='URL Foto/Avatar Sobat' width='70'/><b>About Author</b><br/>
Sekilas tentang diri sobat<br/></p>
</div>
</b:if>

Ganti kode yang berwarna merah, dengan URL foto/avatar sobat.
Ganti juga kode yang berwarna biru, dengan deskripsi atau teks sesuka hati sobat ).

6. Setelah semua langkah-langkah diatas selesai, Klik Simpan. ( lihat hasilnya ).

Saya rasa tutorial kita pada hari ini sudah cukup, Semoga Bermanfaat dan Semoga Berhasil bagi semua.

Advertisemen

 Tutorial