Jika Ada Link Dalam Blog Ini Yang Tidak Berfungsi Atau Broken, Dengan Segala Kerendahan Hati Kami Berharap Pengunjung Sekalian Meng-Infokan Kepada Kami Agar Se-segera Mungkin Kami Memperbaikinya,TERIMA KASIH..!!BLOG ANAK BIMA mengucapkan "SELAMAT HARI RAYA IDUL ADHA 1437H MOHON MAAF LAHIR DAN BATIN" @Admin [by:dyenps]

Monday, November 19, 2012

Cara 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 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='http://3.bp.blogspot.com/-ok4EAJUO1EA/UKmuViEjhgI/AAAAAAAAC7k/iZgVrV5OxnM/s1600/Dyenps.jpg' width='100'/><b>About the Author</b><br/>
<div style='text-align: justify;'>Nama aku Mulyadin. 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/Mulyadin11'>Twitter</a>, <a href='http://www.facebook.com/Mulyaadin.dyen'>Facebook</a> atau di <a href='http://www.facebook.com/pages/Blog-Anak-Bima'>Blog Anak Bima</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...!!





Artikel Terkait:

3 comments:

Syarat Berkomentar:
Tanpa Sara
Tanpa Spam
Jangan Membuat Link Hidup Di Tengah Komentar
Berkomentarlah Yang Sopan Dan Bijak Agar Diharagai Oleh Orang Lain.
Komentar Yang Mengabaikan Syarat Diatas Akan Di Hapus,Terima Kasih...!

Followers

Google+ Followers

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More