Tuesday, July 22, 2014

Tutorial Blockquote efek hover

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.
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;
}


No comments:

Post a Comment

Kebahagiaan sejati bukanlah pada saat kita berhasil meraih apa yg kita perjuangkan, melainkan bagaimana kesuksesan kita itu memberi arti atau membahagiakan orang lain.