Tutorial Buat Link Hover Effect Cara Mudah

January 31, 2011April 15, 2011 ciktom 34 Comments

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.

Tips Panduan dekorasi rumah versi bajet!

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”

She's retarded
January 31, 2011 at 6:52 am
Permalink

great tuto la cik tom!
Reply
Cikgu Nurin
January 31, 2011 at 7:27 am
Permalink

gud info….bla akak dah ada layout bru,bru akak try…
Reply
rossoneri
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
~ PIJA ~
January 31, 2011 at 7:33 am
Permalink

thanks cik tom..sharing is caring..:)
Reply
sissyira
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
Ellen
January 31, 2011 at 7:40 am
Permalink

Thanks share ni Tom…ellen pun akan try nanti..hehe
Reply
ardinihumaira
January 31, 2011 at 7:56 am
Permalink

tips.. berguna. meh cuba 😀
Reply
sarah-najwan
January 31, 2011 at 8:15 am
Permalink

llalaalaa…akak singgah lagi…tapi nk try buat..penakut amat ciktom..u know me..hehehe
Reply
SYaMiLa
January 31, 2011 at 9:00 am
Permalink

hmmm..tk de masa nak godek2 kod…
Reply
zaty luvlianncezzz
January 31, 2011 at 10:24 am
Permalink

huhu

byk g yg zati xtaw rupanya
Reply
maCy
January 31, 2011 at 10:58 am
Permalink

ta smpt da na usha2.. uwaa
Reply
najihah sahami
January 31, 2011 at 10:59 am
Permalink

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

lama xdtg cni….
Reply
diana
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
Puan Besar Shag Yahaya
January 31, 2011 at 1:57 pm
Permalink

Wahh~ TERIMA KASIH CIK TOM sayam! ;D Tak sabar nak cuba 😉
Reply
AkuBukanBlogger
January 31, 2011 at 2:01 pm
Permalink

thankslah cik tom2 bak…tapi aku xnak trypun tutorial ni,kehkehkeh
Reply
ferry
January 31, 2011 at 3:26 pm
Permalink

nice tutor tom..pasni boleh la wat hover macam tom buat ni 🙂
Reply
deAnza-wAnda
January 31, 2011 at 5:00 pm
Permalink

singgah cni n follow cik tom
Reply
biskut
January 31, 2011 at 5:28 pm
Permalink

faham..faham ciktom.mekasih untuk nih.

semakin sibuk sekarang nih ye ciktom..
Reply
JUNKO-EL-HIDA
January 31, 2011 at 6:08 pm
Permalink

Dah berjaya cikgu Tom!..hihihi..yeeepeeee!..
Reply
Liz
February 1, 2011 at 5:02 am
Permalink

waaaa cik tom best la banyak tutor…best best
Reply
d_LA
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
Mawar Merah
February 1, 2011 at 12:09 pm
Permalink

Good sharing Cik Tom (^.^)
Reply
Woofer Storm
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
CIK TOM
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
CIK TOM
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
CIK TOM
February 1, 2011 at 7:03 pm
Permalink

kepada kawan yg berminat silalah cuba ye..good luck!!
Reply
Encik Blogger
February 2, 2011 at 5:40 am
Permalink

thank u cik tom
Reply
Sabahan Bloggers Club
February 2, 2011 at 6:29 am
Permalink

Waaaaaah…
Tutorial blog free.
Terima kasih kerana berkongsi.
Reply
fatin hanani
February 2, 2011 at 1:39 pm
Permalink

owhh yang kale2 pun ok kan cik tom 😀
Reply
Amirrah Zawani
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
Matika
February 4, 2011 at 4:45 pm
Permalink

bagos2…yg ni mamat senang paham..he3
Reply
CIK TOM
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
vaithis
March 10, 2011 at 2:39 pm
Permalink

ya XYBASE kat kelana jaya Glomac…HQ… apa nama abg cik tom…
Reply
salwaismail
July 20, 2011 at 3:23 pm
Permalink

thanks! 😀
http://salwaismail.blogspot.com
Jom baca entri terkini salwaismail …minumlah air cap masak sendiri.
Reply

Ciktom

Tutorial Buat Link Hover Effect Cara Mudah

ciktom

34 thoughts on “Tutorial Buat Link Hover Effect Cara Mudah”

Leave a Reply Cancel reply