09 February 2013

Tutorial Blog - Picture Change On Hover



Assalamualaikum w.b.t

Aku nak buat tutorial lah sebab ramai plak yang tanya camna nak buat benda alah nie. Benda alah yang aku maksudkan nie bila cursor menghala ke menu tab atau gambar, ia akan berubah ikut gambar yang kita letak untuk berubah. Paham tak? Kalau confius, cuba hampa sentuh gambar aku pakai topeng kat bawah ni, tetiba kuar gambar aku kan? Hihihihi. DUCKFACE jap!


Aku ingat aku sorang ja yang ketinggalan bab nie sebab aku lama dah nak buat, tapi tak reti. Semalam lepas godek2 coding, rupanya senang ja nak buat. Cuma kena rajin la design satu lagi gambar untuk tambah kat coding tu. Kena design gambar apa yang hampa nak letak bila cursor menghala ke gambar tu. Sesuai untuk menutab lah tutorial nie. Tengok menu tab aku. Kan berubah kan. Meh nak ajar.


1. Mesti lah ada menu tab atau gambar apa-apa yang hampa nak buat.
(Tutorial buat menu tab di SINI)
2. Edit gambar kedua yang hampa nak letak untuk berubah tue.
3. Bukak Dashboard > Layout > Add a Gadget (Kalau dah ada menu tab, tak payah)
4. Okay, now copy code bawah nie dulu.


<a href="LINK><img src="URL GAMBAR 1" onmouseover="this.src='URL GAMBAR 2'" onmouseout="this.src='URL GAMBAR 1'" /></a>

LINK = Kalau menu tab nie untuk Home, letak link blog hampa.
URL GAMBAR 1 = Letak URL gambar yang pertama sebelum kita sentuh.
URL GAMBAR 2 = URL gambar untuk kita sentuh then berubah.


5. Paham tak? Apa-apa pon hampa kena ada dua gambaq la taw. Bukan automatik tambah code, terus tukar gambar sendiri. Takkkk. Kena ada dua gambar. Okay. 
6. Lepas siap, teruskan lah untuk tab-tab yang lain. Kena rajin sikit lah untuk cantikkan blog.
7. Lepas dah siap semua, SAVE dan loading blog. Tadaaa.

SELAMAT MENCUBA!





10 orang komen:

Lulu Caldina said...

yeay, tq apit

Nadia Johari said...

pergh penin main coding2 ni..haha..muke comel la tu..

MANZARINA said...

ehek......clap clap clap jari tgk apit.....

SITI said...

Wah menarik ! :)

Unknown said...

best la! =D

Nurul said...

yeay!tuto y best .. tq apit ..

admin said...

cara baru, selalunya pakai code lain :D

Unknown said...

memang menarik......

eyka said...

THANKS apit sbb buatkan tuto ni... :)

Ignorance said...

Abg Apit, kalau nak buat kat header leh x? Abg tahu ke code dia ?