Instagram

Friday, October 07, 2011

# 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!

    4 comments:

    ::tHe sHaDoW:: said...

    thank you ! comel sangat ! nak try buat lah =)

    Anonymous said...

    kak ayu,,knape x jdi yg sye punye...?? dah puas cube dah...

    ::CIK LYNN:: said...

    ayu, cik lynn gna tuto ni...
    thnks...

    AzielahRahim said...

    Kak Ayu,knapa yng saya punya tak jadi?

    2leep.com