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 == "item"'>
<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&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 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 !
Print
PDF
Blogger
Google+
Facebook
Twitter