About Author Box dengan CSS

 Nah sekarang saya akan memberikan cara memasang About Author dengan CSS, dan About Author inisudah saya kasih efek hover , dan saya rasa Anda menyukainya!!!

 jika Anda tertarik langsung saja kalau gitu.

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 */
#hisyam-box{float:left;padding:10px;width:460px;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)}

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

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

.hisyam-corner{background:url(URL) no-repeat left top #33F; bottom:-13px;height:12px;left:2px;position:absolute;width:120px;}
.hisyam-avatar{float:left;margin:0 20px 0 0}
.hisyam-avatar img {width:110px;height:120px; border: 2px solid #ccc}
.hisyam-text{float:left;width:480px}
.hisyam-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='hisyam-box'>
<div class='hisyam-avatar'>
<img alt='hisyam ' src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/187517_100001767766955_862727_n.jpg'/></div>
<h4>Post Author : <a href='http://his4myahya.blogspot.com/' title='Posts by admin'>hisyam&#39;Thelearning&#39;</a></h4>
Akuhanya seseorang pemula dalam dunia internet . dan saya selalu tertarik dengan sesuatu yang baru dan saya selalu ingin mencoba hal yang baru <a href='http://feedburner.google.com/fb/a/mailverify?uri=/his4myahya' target='_blank'><strong><blink>Via Email</blink></strong></a> atau <a href='http://feeds.feedburner.com/his4myahya' target='_blank'><strong><blink>Feed Rss</blink></strong><center><a href='http://feeds.feedburner.com//his4myahya'><img alt='' height='26' src='http://feeds.feedburner.com/~fc//his4myahya?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.