Tutorial Blockquote efek hover

Bentuk blockquote ini termasuk kesukaanku dan kodenya ingin aku simpan disini dan untuk berbagi dengan teman-teman kalau mau. Icon nya seperti yang ada pada gambar di atas. Oke deh mending kodenya segera aku tuliskan saja, tapi kalau sebelumnya sudah memasang blockquote harus di remove dulu.

Blockquote efek hover dengan icon bergerak:

1.Masuk Dashboard > template > edit HTML

2.Tick expand template widget dan tekan F3/CTRL +F dan cari kode:

.post-body blockquote {  (letakkan di bawahnya)

atau

body { (letakkan di atasnya)

3.Copy paste kode di bawah ini:

 .post blockquote {
background:#FCFCFC;
border-top: 1px dotted #4F4F4F;
border-bottom: 1px dotted #4F4F4F;
colour:#FFFFFF;
}
blockquote:hover{
background-image:url(URL ICON);background-position:bottom right;
background-repeat:no-repeat;
display:block;
padding:5px;
color:#CECEFF;
border-left:12px double #FF9797;
border-top:2px dotted #000000;
border-bottom:2px solid #FF95CA;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}