cara buat About Author Box debgan css

 

Tertarik ? Kalo begitu silahkan lanjutkan membacanya tapi kalo tidak tertarik silahkan baca artikel-artikel saya 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 */
#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)}

#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;}

#author-box a{font-size:15px; text-shadow: 1px 2px 1px #000; color:#fff}   
#author-box a:hover {font-size:18px;color:hijau}   
#author-box h4 {font-size:18px; text-shadow: 1px 2px 1px #000; color:orange}   

.author-corner{background:url(URL) no-repeat left top #33F; bottom:-13px;height:12px;left:2px;position:absolute;width:120px;}
.author-avatar{float:left;margin:0 20px 0 0}
.author-avatar img {width:110px;height:120px; border: 2px solid #ccc}
.author-text{float:left;width:480px}
.author-text p{line-height:2em}

5. Lau cari code <div class='post-footer-line post-footer-line-1'>. jika sdh ketemu, lalu copas kode berikut tepat dibawahnya.

<!-- Author Box Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='author-box'>
<div class='author-avatar'>
<img alt='Utta Melanikz' src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/187517_100001767766955_862727_n.jpg'/></div>
<h4>Post Author : <a href='http://www.uttafreak-987.co.cc/' title='Posts by admin'>Utta &#39;The Shelter&#39;</a></h4>
Gue hanyalah seorang blogger pemula yang ingin belajar dan berbagi, Semua artikel bersumber dari pengalaman yang saya dapatkan dari dunia internet.Jika anda senang dengan Artikel ini, silahkan berlangganan gratis <a href='http://feedburner.google.com/fb/a/mailverify?uri=uttafreak-987' target='_blank'><strong><blink>Via Email</blink></strong></a> atau <a href='http://feeds.feedburner.com/uttafreak-987' target='_blank'><strong><blink>Feed Rss</blink></strong><center><a href='http://feeds.feedburner.com/uttafreak-987'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/uttafreak-987?bg=660033&amp;fg=FFFFFF&amp;anim=1&amp;label=listeners' style='border:0' width='88'/></a></center></a></div>
</b:if>
<!-- Author Box Code End-->

6. Terakhir Save.dan lihat hasilnya...

KET:
-Teks yg berwana biru adalah URL foto sobat,
-dan teks yang berwarna orange adalah Isi tulisan mengenai diri sobat.
-dan yg berwarna merah adalah alamat Feed RSS anda.
-dan yg berwarna kuning adlh nama sobat.
-Width ukuran lebar halaman posting anda silahkan anda ganti dengan lebar halaman anda.


Semoga tutorial kali ini bisa bermanfaat bagi teman-teman semua.

Semoga bermanfaat !