Tutorial Buat Link Hover Effect Cara Mudah

Kali ini tutorial untuk cara mudah buat Link Hover Effect request dari shag sayang. Pada yang tertanya2 apa itu hover link effect. Hover link ialah link atau hyperlink bagi sesuatu url. Nak mudah lagi kalau korang halakan cursor mouse pada sesuatu link, link hover ni akan tunjukkan effect. Effect yang berlaku pula depend pada code blog masing2 contoh macam tulisan jadi besar/tukar warna lain/underline dan sebagainya. Tutorial ni nak ajar ubah kepada effect yang korang suka. Contoh gambar kat bawah sebelum dan selepas hala cursor pada link.



STEP 1


Sila backup template sebelum mula untuk mengedit sebarang code.

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>klik DOWNLOAD FULL TEMPLATE



STEP 2

Tekan keyboard “CTRL+F” atau “F3” dan search code;


</head>


STEP 3

Copy dan paste code dibawah sebelum code </head>

<style>
a:hover {
text-decoration:underline;
color:#000000;
font-size:18px;
font-style:bold;
}
</style>

#untuk code diatas yang korang boleh ubah pada effect disukai;


text-decoration: none/ underline / blink

color: pilih code warna yang disukai kat CODE COLOR
font-size: ubah ikut size yang disukai
font-style: bold/italic

STEP 4

Preview dan save jika tiada sebarang error pada coding.

Sharing is caring

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

34 thoughts on “Tutorial Buat Link Hover Effect Cara Mudah

  • January 31, 2011 at 6:52 am
    Permalink

    great tuto la cik tom!

    Reply
  • January 31, 2011 at 7:27 am
    Permalink

    gud info….bla akak dah ada layout bru,bru akak try…

    Reply
  • January 31, 2011 at 7:30 am
    Permalink

    ohhhhh macam gitu…

    tiba2 kan cik tom,kita terpikir, kalau lah kita nak tukar layout lain, habislah jenuh kena carik kod2 ni semua, leh pengsan cam nih..dah macam2 kita tambah,sbb cik tom lah hahah

    Reply
  • January 31, 2011 at 7:33 am
    Permalink

    thanks cik tom..sharing is caring..:)

    Reply
  • January 31, 2011 at 7:34 am
    Permalink

    salam petang ciktom

    tq kongsi ni..tapi tak pernah terfikir nak buat,,,hehe…ada gak baca sebelum ni…

    p/s : cik tom, sukar nak gambarkan kesedihan hati ini,,sukar nak luahan kepedihan jiwa ni, cik tom bila balik, nak jumpa….nak luah banyak bnda ni…huhuh…

    Reply
  • January 31, 2011 at 7:40 am
    Permalink

    Thanks share ni Tom…ellen pun akan try nanti..hehe

    Reply
  • January 31, 2011 at 7:56 am
    Permalink

    tips.. berguna. meh cuba πŸ˜€

    Reply
  • January 31, 2011 at 8:15 am
    Permalink

    llalaalaa…akak singgah lagi…tapi nk try buat..penakut amat ciktom..u know me..hehehe

    Reply
  • January 31, 2011 at 9:00 am
    Permalink

    hmmm..tk de masa nak godek2 kod…

    Reply
  • January 31, 2011 at 10:24 am
    Permalink

    huhu

    byk g yg zati xtaw rupanya

    Reply
  • January 31, 2011 at 10:58 am
    Permalink

    ta smpt da na usha2.. uwaa

    Reply
  • January 31, 2011 at 10:59 am
    Permalink

    wow!!!ilmu baru..hehe…thanx cik tom!!

    lama xdtg cni….

    Reply
  • January 31, 2011 at 11:26 am
    Permalink

    cik tom,ingat tak dulu akak pernah tanye pasal sejak pakai google chrome entry akak yang bila di publish tak boleh guna pun font size,
    kaler dan font style yang ada kat 'catatan baru" tu..
    sampai sekarang akak tak reti nak buat la..
    cik tom boleh tolong tak?/
    lambat pun tak pe..
    bila ciktom lapang la ye..
    terima kasih..:)

    Reply
  • January 31, 2011 at 1:57 pm
    Permalink

    Wahh~ TERIMA KASIH CIK TOM sayam! ;D Tak sabar nak cuba πŸ˜‰

    Reply
  • January 31, 2011 at 2:01 pm
    Permalink

    thankslah cik tom2 bak…tapi aku xnak trypun tutorial ni,kehkehkeh

    Reply
  • January 31, 2011 at 3:26 pm
    Permalink

    nice tutor tom..pasni boleh la wat hover macam tom buat ni πŸ™‚

    Reply
  • January 31, 2011 at 5:00 pm
    Permalink

    singgah cni n follow cik tom

    Reply
  • January 31, 2011 at 5:28 pm
    Permalink

    faham..faham ciktom.mekasih untuk nih.

    semakin sibuk sekarang nih ye ciktom..

    Reply
  • January 31, 2011 at 6:08 pm
    Permalink

    Dah berjaya cikgu Tom!..hihihi..yeeepeeee!..

    Reply
  • February 1, 2011 at 5:02 am
    Permalink

    waaaa cik tom best la banyak tutor…best best

    Reply
  • February 1, 2011 at 7:47 am
    Permalink

    wahhhh..thanx cik tom..nt dla nak try wat jugakla..cam comey jer ble jd camtu..

    Reply
  • February 1, 2011 at 12:09 pm
    Permalink

    Good sharing Cik Tom (^.^)

    Reply
  • February 1, 2011 at 5:02 pm
    Permalink

    hahaa shag rq kali ni,tembak mati2 shag..heheee sdih la cik tom coding sy tak leh pakai tuk hmpir semua tutorial yang ada kat cik tom n maribinablog milik Ncfe ais..dah tnya NA,dia kata kalau dah tukar domain coding dah berupa..so tak tahu mcm mna nak cari coding2 ni..pening den…ermmm

    mat pagi cik tom ^^

    Reply
  • February 1, 2011 at 6:58 pm
    Permalink

    @diana: cik tom pun takde penyelesaian bagi masalah tue la akak…mmg pening..sebab tue mana ade entry cik tom skang ade warna…hehehe

    Reply
  • February 1, 2011 at 7:02 pm
    Permalink

    @woofer:oh lain ek..tgk la nanti cik tom cuba skodeng coding blog achie kalau free nanti ye….

    tapi xkan la xde code "head" kot??dah cari belum??sbb setahu cik tom tue asas bagi setiap code..

    Reply
  • February 1, 2011 at 7:03 pm
    Permalink

    kepada kawan yg berminat silalah cuba ye..good luck!!

    Reply
  • February 2, 2011 at 5:40 am
    Permalink

    thank u cik tom

    Reply
  • February 2, 2011 at 6:29 am
    Permalink

    Waaaaaah…
    Tutorial blog free.
    Terima kasih kerana berkongsi.

    Reply
  • February 2, 2011 at 1:39 pm
    Permalink

    owhh yang kale2 pun ok kan cik tom πŸ˜€

    Reply
  • February 2, 2011 at 3:33 pm
    Permalink

    cik tom..
    pasal tuturial yg mirra tny tu..
    cik tom cuba tgk kat blog sy..
    kat bahagian juara carta tu ada icon bunga warna pink di belakang gambar.. mcm mana nak buang icon tu eyh?? nk buang kat sidebar juara carta je, yg lain tanak.. err, faham tak mksud sy? hehe!! πŸ™‚

    Reply
  • February 4, 2011 at 4:45 pm
    Permalink

    bagos2…yg ni mamat senang paham..he3

    Reply
  • February 5, 2011 at 2:42 pm
    Permalink

    @Amirrah Zawani:cik tom faham…tutorial letak icon pd sidear tue mmg dah automatik untuk semua bullet yang terletak pd sidebar..kalau just nak buang pd bahagian juara carta, maaf cik tom xpasti plk caranya…sori ye..

    Reply
  • March 10, 2011 at 2:39 pm
    Permalink

    ya XYBASE kat kelana jaya Glomac…HQ… apa nama abg cik tom…

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Optimization WordPress Plugins & Solutions by W3 EDGE