Skip to content Skip to sidebar Skip to footer

Blockquote efek hover dengan icon bergerak

Blockquote efek hover dengan icon bergerak
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. Cara membuat blockquote pada blog aku pernah menuliskan di entri sebelum ini, atau kalau sebelumnya pernah memasang blockquote  hapus dulu  untuk yang belum tahu caranya.

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;
}
Warna pink itu adalah url icon cute DISINI kalau mau cari icon cute etc, silahkan mengambil kode nya kalau mau dan diedit sendiri sesuai keinginan xD

4.Tekan pratinjau dulu dan simpan template.

3 comments for "Blockquote efek hover dengan icon bergerak"