Tutorial : Hover Blockquote (Cute Icon Muncul Bila Cursor Meyentuh)

Tutorial : Hover Blockquote (Cute Icon Muncul Bila Cursor Meyentuh)

Gadis Kidal Berceloteh... 

.Assalamualaikum !

Peacee ^_^v


Haiiyy . Tutorial Datang Lagi Di Pagi Indah nih . HAHA :)
Okeyyyy . Now , saye nak ajarkan cara nya . Bila cursor sentuh blockquote , 
akan keluar cute icon yang comel omeyy . Macam ini :

 

Dah tahu kan ?

Sebelum tuh, bagi siapa yang tak tahu macam mana nak buat blockquote , 

boleh TEKAN SINI okeyy ? :)

Now jom belajar macam mana nak buat hover blockquote macam saye ^^v

1. Log in > Dashboard > Design > Edit Html

2. Tekan Ctrl F serentak , dan cari :

.post blockquote {

3. Dah jumpa kan ? Korang Copy yang ini pulak :

blockquote:hover {
background-color: #FFC8F2;
-webkit-transition-duration: 3.5s;
background-image:url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/barbiepink/pic003demoji_17348898decoojp.gif);
background-position:bottom right;
background-repeat:no-repeat;
 }

4. Paste di bahagian bawah kod yang korang carikan tu . Saye bagi contoh :

 

5. Sudah kan  ? Oke , sekarang ni , tukar :

Warna Biru : Warna Background Selepas Cursor Menyentuh Blockquote TEKAN SINI UTK KOD

Warna Merah : Cute Icon Yang Akan Muncul Selepas Cursor Menyentuh Blockquote

* Kalau nak Cute Icon , saye boleh bagi di bawah contoh yang comel - comel :)

  http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic013demoji_416577decoojp.gif

  http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic005demoji_18140524decoojp.gif

  http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic009demoji_19040781decoojp.gif

  http://i257.photobucket.com/albums/hh205/xoxojays/smilies/barbiepink/pic001demoji_8517130decoojp.gif

  http://i257.photobucket.com/albums/hh205/xoxojays/smilies/barbiepink/pic014demoji_12056299decoojp.gif

  http://i257.photobucket.com/albums/hh205/xoxojays/smilies/barbiepink/pic011demoji_671878decoojp.gif

OKE  ! SELAMAT MENCUBA YEAHH :)