Blockquote dengan efek lampu berkedip

Kali ini saya akan share Blockquote yang berbeda dari yang sebelumnya. Tutorial ini benar-benar akan memungkinkan Anda untuk membuat blockquote
menakjubkan dan menarik untuk postingan Anda para blogger ataupun website. Blockquote ini akan berubah warna saat kursor mouse diletakkan di atas Blockquote tersebut.





Sebelumnya Saya telah share Cara mengganti tampilan background Blockquote dengan 14 Gaya tampilan Blockquote yang cantik. anda dapat membacanya disini

Coba lihat contoh blockquote di bawah ini.

Arahkan kursor mouse Anda pada blockquote di bawah ini :

Menarik, bukan? Sekarang mari kita belajar bagaimana menambahkan efek yang sama seperti efek lampu berkedip di atas.

Blockquote ini dapat ditambahkan dalam cara yang sama seperti yang dijelaskan dalam postingan saya sebelumnya. jika anda belum paham cara merubah Blockquote, silahkan anda membacanya terlebih dahulu di sini

masukkan Kode CSS dibawah ini, tepat di atas kode     ]]> </ b: skin>

blockquote {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitPimn3PZ6Vn1laptazQM97BPaXUFs4uc7zBY7tHkgzDmEnxCLdU55Qv0Y5Podtau4X84Z-rSaw4lQGpVkm1zld2Qqaftr_J1SuIxo1xuiup92BjnjAlrwP7r7_FIFafDf8unCftkWmxs/s1600/bulb-off.gif) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;
}
blockquote:hover {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx_DRaWcj9U2YiPSK4Hk0DiiLxcaTkkLxY_An9uc58GrjjBKLhvKEUI_3NxK0RJ2hPt4RoUT6wUgeujZuOqoGeyfd6Cy7f1ZoL30IK3SY3eJuIdYtCutcpvLgBwy8jQLFrVYh1btHLtYs/s1600/bulb-on.gif) no-repeat right bottom ;
color:#E0E089;
}

blockquote p {
margin: 0;
padding-top:10px;
}

selamat mencoba, , , di komment yahh (^.^' . . .