TutorialBlog: Hover Blockquote With Cute Icon

Assalamualaikum and hi,

 

First, you need to learn how to make a blockquote. Click HERE.

1. Log in > Dashboard > Design > Edit Html

2. Tekan Ctrl F serentak , dan cari :
.post blockquote {

3. Then copy this code:

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 below the following code:


5. Change:

Pink : Color after hover, Find code here.
Red : Cute Icon appear after hover.

Example here::

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

Source: Lyssa

Share your experience down below!