share all free for you

Advertiser Here

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 !

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.

Sudah ada [ 4 komentar ] bagaimana pendapat Anda,,?

  1. wah menarik nih..buat mempercanik tampilan about me..jgn lupa jga komen balik di blogku ya

    ReplyDelete
  2. wah nice2 langsung k TKP gan hehe
    jgn lupa visitback. tukerin link yuk masuk k blog sy yah :D

    ReplyDelete
  3. saip sob, thank sudah berkunjung ke blog saya

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah