Pasang About Author Box dengan CSS

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Lalu cari kode berikut ]]></b:skin>
    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}

7. 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://i1086.photobucket.com/albums/j450/3xploration/207164_107061499379282_100002262987152_73923_7363646_n-1.jpg'/></div>
<h4>Post Author : <a href='http://www.3xploration.co.cc/' title='Posts by admin'>Exploration</a></h4>
Gue hanyalah seorang blogger pemula yang ingin belajar dan berbagi, Semua artikel bersumber dari pengalaman yang saya dapatkan dari dunia internet. <a href='http://feedburner.google.com/fb/a/mailverify?uri=3xploration' target='_blank'><strong><blink>Via Email</blink></strong></a> atau <a href='http://feeds.feedburner.com/3xploration' target='_blank'><strong><blink>Feed Rss</blink></strong><center><a href='http://feeds.feedburner.com/3xploration'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/3xploration?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-->

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

8. Save

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post