Pasang About Author Box With CSS Ala Utta'

Sebelum kita ke TKP, saya cuma ingin memberitahukan ke anda, tutorial ini jg prnah sy berikan pada postingan sy sebelumnya 'Cara Memasang Author Box Info Simple' info lebih lanjut sobat bisa lihat disana. OK. Nah skrg Saya akan memberikan tutorial cara memasang 'About Author Box with CSS' tutorial ini sdh saya kembangkan dengan memberikan 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:auto;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:590px;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 h1 {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>
<h2>Post Author : <a href='http://ut2a-4down.blogspot.com/' title='Posts by admin'>UTta MOG-MOG</a></h2>
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=ut2a-4downnet' target='_blank'><strong><blink>Via Email</blink></strong></a> atau <a href='http://feeds.feedburner.com/ut2a-4downnet' target='_blank'><strong><blink>Feed Rss</blink></strong><center><a href='http://feeds.feedburner.com/ut2a-4downnet'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/ut2a-4downnet?bg=660033&fg=FFFFFF&anim=1&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 Blog dan 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 pink 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.


Please rate this article: