Jangan Bosen untuk Kunjungin Blog Sederhana Ini Yaahh !!! (-__-lll) (˘_˘”) Home | DickeyMaru™ | Caesar Shinobito | Join This Site

Friday, July 22, 2011

Avatar

cara buat Blockquote keren

postingan kali sangatlah berbeda pada postingan 'Cara Membuat Blockquote Indah', tp pada postingan yang kedua 'Cara Membuat Blockquote Indah2', itu sama saja, dan disini saya sudah memodifnya dengan memberikan efek 'Box Shadow Hover', 'CSS' dan fungsi 'Auto Scroll Down', nah, barikut Preview Gambarnya :
Sebelum :
http://i53.tinypic.com/16anvyq.jpg
Saat : 
http://i56.tinypic.com/osu5bp.jpg

Gimana tertarik untuk mencobanya?? 
Berikut langkah - langkah pembuatannya.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
Lalu letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .
.post-body blockquote {overflow:auto;height:220px;background-position:-10px -7px;border: 1px dashed #fff;margin: 10px;padding: 10px;background:#666;text-align: justify;line-height:1.4em;opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6;border-radius:15px; -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}.post-body blockquote:hover{color:#fff; font-size:15px; background:#666;opacity:0.9; filter:alpha(opacity=40); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}.post blockquote{ margin:1em 15px}.post blockquote p{ margin:.75em 0}
 ::: Sobat dapat mengedit code yang berwarna diatas sesuka anda,

5. Terakhir Save template, dan lihat hasilnya...

Jangan lupa untuk memberikan pendapat anda, mengenai Posting ini. terima kasih....

0 komentar:

post comment not spam !!!