membuat blockquote indah dengan efek hover

Hallo Pengunjung Learning Blog, pada postingan kali ini saya akan mengajarkan cara membuat blockquote indah dengan efek hover.akan aku jelaskan sedikit tentang blockquote.
blockquote adalah kutipan yang bisa digunakan  untuk mengutip perkataan orang lain atau menjelaskan intisari dari suatu bacaan.:
kalo ingin melihat demonya silhakan klik disini
dan ini hasil secreen shootnya bisa dilihat

CONTOH BLOCKQUOTE SEBELUM DI HOVER

 CONTOH BLOCKQUOTE SESUDAH DI HOVER
kalau anda tertarik anda bisa 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 (Dan 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{margin:10px 5px;padding:0px}

.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.9; filter:alpha(opacity=95); 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 #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}

.post-body blockquote:hover{color:#fff; font-size:15px; background:#000;

opacity:0.9; filter:alpha(opacity=95); 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 #000000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #000000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #000000;}

.post blockquote{ margin:1em 15px}

.post blockquote p{ margin:.75em 0}

Sobat perhatikan kode CSS diatas, sobat dapat mengeditnya dengan mengganti teks yang berwarna merah.
5. Terakhir Save template, dan lihat hasilnya.....


cara penggunaanya adalah
masuk ke entri baru terus pilih edit html..
kalau sudah ketikan kode ini <blackquote>Teks </blackquote>
atau anda bisa masuk setelan pilih Templat Entri kalau sudah masukan code <blackquote>teks</blackquote>

good luck