# Tutorial : Hover

tutorial request dari MASHE .... dia nak tahu macam mana nak buat hover mcm dekat blockquote nih...

pelangi kat bawah tu...

ikut step kat bawah yep!

• dashboard-->design --> edit HTML --> TICK expand widget templates
• CTRL + F dan cari kod ni

.post blockquote {

• dah jumpa? akan nampak anak-anak kat bawah dia kan...biarkan anak-anak dia tu... jangan usik...kang mak dia marah!
• yang penting sekarang cuma tambah kan kod ni...dekat BAWAH kode anak-anak di atas.

.post blockquote:hover {
background-image:url(URL IMAGE);
background-position:bottom right;
background-repeat:no-repeat;
}

• letak url image dekat ruang URL IMAGE tu...
• kalau nak border bertukar bila tekan ...letak kod ni...

moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
border:  3px dashed #FF99CC;

• di BAWAH kod

.post blockquote:hover {

• kalau nak border jadi senget

 -webkit-transform: skew(5deg,-5deg);
    -moz-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    -webkit-transition: 3s;

• ini adalah contoh kod blockquote hover blog ayu!

.post blockquote:hover {
 -webkit-transform: skew(5deg,-5deg);
    -moz-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    -webkit-transition: 3s;
moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
border:  3px dashed #FF99CC;
background-image:url(http://dl5.glitter-graphics.net/pub/921/921755e6iz9ol5vc.gif);
background-position:bottom right;
background-repeat:no-repeat;
text-shadow: 2px 2px 3px #FF33CC;

}

-tebal border
-jenis border 
-color border 

senang je kan..copy +paste je...hehehe...

SELAMAT MENCUBA! 

kalau tak jadi... bagitahu yep!