Membuat Box About The Author di Bawah Postingan

Pada tutorial kali ini saya coba jawab pertanyaan seorang pengunjung blog saya tentang bagaimana cara membuat Box About The Author yang muncul di bawah setiap postingan.
Kira-kira gambarnya seperti yang ada dibawah setiap postingan blog saya ini:

Jika sobat tertarik ikuti cara membuatnya berikut ini:
* Login ke akun Blogger masing-masing => Klik Template =>Edit Template=>Lanjutkan=>Centang Expand Template Widget.
** Cari code ]]></b:skin> kemudian letakan code css beerikut tepat diatasnya:


.author-box {
border:2px solid#2E2EFE;
margin: auto;
margin: 10px 3px;
padding: 10px;
overflow: auto;
background:#EFFBF5;
}

.author-box a {
color: #102C4A;
font-size: 14px;
font-weight: Bold;
letter-spacing: -1px;
margin: 0 0 1em;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #102C4A;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

*** Setelah itu cari code berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

**** Hapus code tersebut ganti dengan code berikut:


<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<div class='author-box'>
<p><img alt='' class='avatar avatar-80 photo' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4WcqhcjZh4CZOZM83GU0Ldd2zl85bPdc6ur_SBpYqEoLFIN73sk0RJ4ZrEU33zaJsaiPi6EtRDLR27rgGtvOVlcxKaeuFstv9VkG-Qnj-wjs07ZtHnTAFhX0Vj62S-xkzFcv42kqds4Ue/s1600/Dyenps.jpg' width='100'/><b>About the Author</b><br/>
<div style='text-align: justify;'>Nama aku Vebi. Aku adalah seorang pelajar Ijazah Sarjana Muda Kejuruteraan Awam di UiTM Shah Alam.Segala penulisan aku disini adalah berdasarkan pandangan aku sendiri. Maaf jika ada Kesalahan Dalam Menulis Artikel Mohon Di Maklumi.<br/>
Follow aku di <a href='https://twitter.com/FtrianingsihN'>Twitter</a>, <a href='http://www.facebook.com/vebi.hanyauntukmu'>Facebook</a> atau di <a href='http://www.facebook.com/pages/Blog-Anak-PS'>Blog Anak PS</a>
<p style='margin:-8px 0'><br/></p></div></p>
</div>
</b:if>

Ket: ganti setiap tulisan berwarna merah di atas dengan nama dan akun milik sobat dan ganti setiap kata saya diatas sesuai keinginan sobat,
dan tulisan warna biru adalah url gambar atau foto sobat yg akan tampil dalam box about the author nantinya,ganti dengan Url gambar milik sobat.

 ***** Setelah semuanya selesai Simpan Template sobat, tutup dan lihat hasinya Keren kan..??
Demikian cara mebuat Box About The Author pada blog selamat berkreasi semoga sukses..!

SELESAI...!!

sumber:http://ningsih-ps.blogspot.com

Anda baru saja membaca artikel yang berkategori Tutorial Blogger dengan judul Membuat Box About The Author di Bawah Postingan. Anda bisa bookmark halaman ini dengan URL http://avome.blogspot.com/2012/12/membuat-box-about-author-di-bawah_2.html. Terima kasih!

Ditulis oleh: Unknown -