Jul 20, 2011

Tutorial Blog | Cara buat link hover comel

Salam to all readers

Ada blogger tanya dil, macam mana nak buat header yg bila sentuh dengan cursor, akan keluar hujan, keluar bunga-bunga cantik.. Actually, itu adalah link hover..Bukan setakat tu aja, bila korang sentuh link, dia akan keluar jugak..


Yang ni, adalah contoh yang ada dekat blog dil..Bila sentuh header, keluar love banyak-banyak.. *jiwang..hiii



















Sila tekan button READ THIS untuk melihat tutorial Link Hover Comel

Step 1 :


Pergi dekat Dashboard > Design > Edit html > tick Expand Widget Templates


Tekan Ctrl+F untuk cari code ini
]]></b:skin>


Step 2

Copy code kat bawah ini dan letakkan sebelum code step 1


a:hover

{color:#000000; 
background:url(URL HOVER COMEL);
background-repeat:repeat;text-decoration:none
}

Cuba preview.. Kalau tak ada error, boleh la tekan button save dengan senang hati..^^



Tips:

  • Kalau tak menjadi cara kat atas ni, korang boleh la, bukak template designer > Advanced >Add CSS.. Korang paste kan code ini kat situ..pastu save..
a:hover{
color:#000000; background:url(URL HOVER COMEL);
background-repeat:repeat;
text-decoration:none
}
  • Kalau cara ni pun tak menjadi, korang pergi dekat Dashboard > Design > Edit html > tick Expand Widget Templates, korang cari code ini 
a:hover{

  • Kalau dah jumpa, korang paste kan code yang ni, dibawah code tadi..Kemudian save..
color:#000000; background:url( URL HOVER COMEL);
background-repeat:repeat;
text-decoration:none
}


Kat bawah ni, dil ada sediakan bermacam-macam jenis hover comel untuk korang..Pilih jer yang mana korang suka okay..^^



http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif



http://i603.photobucket.com/albums/tt117/misdollymie/rainbowhover.gif

http://dl7.glitter-graphics.net/pub/474/474167l68h9nknqq.gif
http://dl2.glitter-graphics.net/pub/738/738322z0khilo37b.gif

http://i870.photobucket.com/albums/ab268/nieysalova95/ilovecandyfloss/gg4.gif
http://dl10.glitter-graphics.net/pub/590/590940trx4idmwj8.gif

http://dl.glitter-graphics.net/pub/590/590941r351ykwhz6.gif

http://dl6.glitter-graphics.net/pub/590/590966tdltan40f8.gif
http://dl4.glitter-graphics.net/pub/1175/1175324v8vs8exzv3.gif

http://dl2.glitter-graphics.net/pub/714/714992j6v84lbn4k.gif

nota kaki :

Tak menjadi?
Boleh tanya dil nanti..^^


67 comments:

  1. rajennya buat tutorial..x sesuai la plak nak letak blink2 mcm tu..hhee

    ReplyDelete
  2. waaahh,

    tapi dia tak beratkan blog kan .?

    ReplyDelete
  3. @syaz@rozelt:heehhe..pulak..knape.??

    ReplyDelete
  4. @ muhamad hanif:x mmberatkan sngt pun...

    ReplyDelete
  5. @ieyfa syifa:dil ada bg tips kalau x boleh cara 1st..cuba laa..ade 2 cara tu

    ReplyDelete
  6. @BalqisHusna:cuba cara ke 2, 3 yunk

    ReplyDelete
  7. dil..dil..dil..
    buat la tutorial favicon yg baru dkt section design tu..
    dya tak reti guna pun application tu..
    da try byk2 kali asek gagal jek.. :(

    ReplyDelete
  8. Cik Dil..Nice Sharing..Nanti ieqah try laa :)

    ReplyDelete
  9. hmm xjd pun....huhu.... :-( ke sbb sy dh ada link hover tu ek??? tp xpndai nk cari balik sbb kwn yg tlg buat hr tu....huhu

    ReplyDelete
  10. x menjadi lah...hermmm..germ nie...bnyk sabar buat benda nie....saya dah cuba banyak2 tutorial yang ada tapi semuanya x menjadi....ish...geram3x...:/

    ReplyDelete
  11. akak mcm mne nie?x jdi lh..susahnyerr..

    ReplyDelete
  12. nak cbe macam awk punyer leh x ? hehe..sweet ! :)

    ReplyDelete
  13. hai hai hai...nk mntak izin amik tuto ni...mekasih tuan tnh yg mulia (p/s:saje bodek ! hhehehe..)

    ReplyDelete
  14. jadi! TQ dil! muah sikit. hehe...

    ReplyDelete
  15. Thanks kak dil ~ daa jadik . :D

    ReplyDelete
  16. cik dil x jadik..:( dah cuba buat cara pertama dan kedua

    ReplyDelete
  17. thanx dil...meera da try,,jd la dil..hihi

    ReplyDelete
  18. thanx dil...
    gades dh cube...
    cute...
    huhuhu

    ReplyDelete
  19. TQVM adik.. sgt best!!

    ReplyDelete
  20. AKAK ta jadi pon :'( and mcm mne nk ltk hover someone can help me pless :)

    ReplyDelete
  21. salam kak...
    menjadi sangat....yhanks...xsusah pun..da 2 kali da sy gna tuto kak..

    ReplyDelete
  22. salam kak...
    menjadi sangat....yhanks...xsusah pun..da 2 kali da sy gna tuto kak..

    ReplyDelete
  23. salam..menjadi punyeww...thanks bebanyak ye..!!

    ReplyDelete
  24. Yang tanda ni *()* kene letak jugak kee?

    ReplyDelete
  25. x menjadi larh,,, macm manr nieyh,,semua cara dah cuber,, aper nak buat nieyh,, tapy x per,, tngh cube usaha nak cari algi sampai dpt,, hee~~ =')

    ReplyDelete
  26. wow3 ! dh jd !! tengs sgt2.. 3 4 kali dh try wt bnde nih guna tuto org lain , xjd pon.. gne tuto akk , jd plak.. tengss soo much ..

    ReplyDelete
  27. nape sy pnyer xjdi yea...blurrrrr o_O..plese helpp meee

    ReplyDelete
  28. kenape sye buadd tk jadi ? penat dahh sye budd , please help mee ..

    ReplyDelete
  29. sy buat msih x mnjadi...tlg terangkan dn lebih lanjut please..

    ReplyDelete
  30. Hi sis..Menjadi..Tima kasih taw ! :)

    ReplyDelete
  31. Akak tak jadi la..sye dah try tige2..

    ReplyDelete
  32. CIK DIL..SYE DAH cube da smua..tpy knape x jady??

    ReplyDelete
  33. x menjadi .. dh dua kali kott buat bender nihh

    ReplyDelete
  34. dil,,,camner nk copy code semua tuh...asik x jd je? ke kdit cam ner?

    ReplyDelete
  35. Jom join ga http://wanieseuk.blogspot.com/2013/08/giveaway-saya-nak-teddy-bear-by-farisha.html

    ReplyDelete
  36. tak jadi lah . tak tau knapa susah nak tambah benda cntik2 ni . pdhl guna templat simple :(

    ReplyDelete