Baca Entry Latest Nie Jugak!

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 comel komen:

Lulu Caldina said...

yeay, tq apit

Nadia Johari said...

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

manzarina berntsz said...

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

Siti Anirah Azuri said...

Wah menarik ! :)

Nabila Medan said...

best la! =D

Are_Rull said...

yeay!tuto y best .. tq apit ..

Nurul Ain Atikah said...

cara baru, selalunya pakai code lain :D

Remy hazza said...

memang menarik......

eyka said...

THANKS apit sbb buatkan tuto ni... :)

Laurie Gina said...

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

Related Posts Plugin for WordPress, Blogger...