Pasang About Author Box dengan CSS

Nah skrg Saya akan memberikan cara memasang 'About Author Box dengan CSS', About Author Box dengan CSS ini sdh saya berikan beberapa efek CSS, dan saya rasa anda pasti menyukainya.!

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/203270_100000771677312_2706391_n.jpg'/></div>
<h4>Post Author : <a href='http://blogcunayz.blogspot.com/' title='Posts by admin'>Rizky Wardiansyah</a></h4>
Saya 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=blogcunayz' target='_blank'><strong><blink>Via Email</blink></strong></a> atau <a href='http://feeds.feedburner.com/blogcunayz' target='_blank'><strong><blink>Feed Rss</blink></strong><center><a href='http://feeds.feedburner.com/blogcunayz'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/blogcunayz?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 !

Share this history on :

Tweet

Title : Pasang About Author Box dengan CSS
URL : http://blogcunayz.blogspot.com/2011/07/nah-skrg-saya-akan-memberikan-cara.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Pasang About Author Box dengan CSS sebagai Sumbernya.