Menambahkan Effect Hover Pada Blockquote

Kali ini saya akan memberi tips kepada sobat blogger tentang cara memasang effect hover pada blockquote. Saya akan menjelaskan apa itu effect hover pada sobat yang newbie seperti saya, Hover adalah effect yang membuat tampilan awal suatu link ataupun gambar menjadi berbeda saat terkena cursor pointer mouse, maka link atau gambar tersebut akan terlihat lebih menarik (jika kurang pas, tolong betulkan :D). Tetapi kita tidak memasangnya di Link ataupun gambar, melainkan kita akan memasangnya pada Blockquote atau kotak kutipan blogger, saya harap sobat semua sudah tahu apa itu Blockquote.
berikut preview blockquote milik saya dengan effect hover

Contoh saja sobat blogger

memang gaya tampilannya hampir mirip dengan milik mas Kompi Ajaib, tetapi berhubungan saya sedikit mengerti dengan CSS, akhirnya saya menerapkannya di blog saya.
ok, jika sobat semua tertarik untuk menggunakan effect hover pada blockquotenya, silahkan sobat ikuti cara berikut :
- Tempelkan kode berikut diatas kode ]]><b:skin

.post blockquote:hover{margin:5px 10px 10px 20px;padding:30px 15px 10px;line-height: 1.6em;color: #333;background: #fff;border-left: 10px solid #b20000;text-decoration:none;box-shadow:0 0 15px 1px #bbb}

Note
Ganti kode yang berwarna hijau dengan warna text blockquotenya.
Ganti kode yang berwarna orange dengan background blockquote saat terjadi effect hover.
Sesuaikan kode yang berwarna kuning dengan ukuran left border awal blockquote sobat.
Ganti kode yang berwarna biru muda dengan warna left border yang sobat inginkan.
Tambahan Sobat :
Sobat bisa sesuaikan warna bayangan saat terjadi effect Hover pada blcokquote dengan cara mengganti kode #bbb (yang paling terakhir dari kode CSS sebelum penutup)

Selesai, jika sobat kesulitan, silahkan tanyakan pada saya.
Demikian artikel dari saya, semoga bermanfaat.