Cara Membuat Author Box

Pengen disetiap postingan sobat terpampang foto sobat (foto author). Sekarang Irenk akan membagi cara membuat author box diblog sobat. Apa sih author box itu?? hmmm...dari pada ane panjang x lebar jelasinnya dibawah ini adalah contoh author box atau liat disini

Tertarik ? Kalo begitu silahkan lanjutkan membacanya tapi kalo tidak tertarik silahkan baca artikel irenk yang lain.


Berikut Langkah Membuatnya :
1. Login dahulu ke Blogger
2. Kemudian Klik Tata Letak » Edit HTML
3. Jangan lupa Centang Expand Template Widget
4. Lalu cari kode berikut ]></b:skin> Tekan Ctrl+F (mozzilla) untuk mempermudah pencarian. 
Kemudian taruh kode berikut diatasnya.








/* Author Box */<br /> #author-box{float:left;padding:10px;width:560px;background:#fff;margin:0 0 0 -30px;position:relative;text-shadow: 1px 2px 1px red; color:#000;border: 3px solid #000;-moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F;-o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out)}<br /> <br /> #author-box:hover{opacity:0.7; width:auto;background:red;color:#000;text-shadow: 1px 2px 1px white;border-radius:10px; border: 3px solid #ccc;-moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000;}<br /> <br /> #author-box a{font-size:15px; text-shadow: 1px 2px 1px #000; color:#fff} <br /> #author-box a:hover {font-size:18px;color:hijau} <br /> #author-box h4 {font-size:18px; text-shadow: 1px 2px 1px #000; color:orange} <br /> <br /> .author-corner{background:url(URL) no-repeat left top #33F; bottom:-13px;height:12px;left:2px;position:absolute;width:120px;}<br /> .author-avatar{float:left;margin:0 20px 0 0}<br /> .author-avatar img {width:110px;height:120px; border: 2px solid #ccc}<br /> .author-text{float:left;width:480px}<br /> .author-text p{line-height:2em}
5. Lau cari code <div class='post-footer-line post-footer-line-1'>. jika sudah ketemu, lalu copas kode berikut tepat dibawahnya.









<!-- Author Box Code Start--><br /> <b:if cond='data:blog.pageType == "item"'><br /> <div id='author-box'><div class='author-avatar'><img alt='NAMA SOBAT' src='URL FOTO SOBAT'/></div><h4>Post Author : <a href='URL BLOG SOBAT' title='Posts by admin'>NAMA SOBAT</a></h4>TEXT TENTANG DIRI SOBAT <a href='http://feedburner.google.com/fb/a/mailverify?uri=NAMA BLOG' target='_blank'><strong><blink>Via Email</blink></strong></a> atau <a href='http://feeds.feedburner.com/NAMA BLOG' target='_blank'><strong><blink>Feed Rss</blink></strong><center><a href='http://feeds.feedburner.com/BLOG SOBAT'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/BLOG SOBAT?bg=660033&fg=FFFFFF&anim=1&label=listeners' style='border:0' width='88'/></a></center></a></div></b:if><br /> <!-- Author Box Code End-->


6. Terakhir Save.dan lihat hasilnya...


Selamat mencoba

Artikel Terkait :

Suka Artikel Ini...klik