Free Cute Icon dan Tutorial Efek Mouseover.

I currently have low self-esteem towards myself and my other blog. Yes tiqcakap. That is why I decided to update here instead, other than the fact I haven't been doing anything with this blog since I last left it with my header and layout project (which didn't go very well). 

I have VERY VERY VERY low self-esteem right now. I took one whole day just to create a Merdeka header for my blog. JUST THE HEADER! Which is why I am very disappointed of myself. I know I could do better than that. Maybe I was just trying too hard.

Sad story aside, today I am also feeling a bit generous. I want to give away free cute icons you can use for your blog or other stuff. You can also use them as buttons or simply just a decoration. Oh, and I will also give a tutorial on how to make an image change when you hover your mouse on it. For the tutorial part I think I should write in Malay because I love my country *takde kena mengena*.

URL

http://i831.photobucket.com/albums/zz236/nurulatiqah_mushi/mushroom-magenta.png

 Embed Code

<a href="http://s831.photobucket.com/albums/zz236/nurulatiqah_mushi/?action=view&amp;current=mushroom-magenta.png" target="_blank"><img src="http://i831.photobucket.com/albums/zz236/nurulatiqah_mushi/mushroom-magenta.png" border="0" alt="Photobucket"></a>

 URL

http://i831.photobucket.com/albums/zz236/nurulatiqah_mushi/mushroom-blue.png

Embed Code

<a href="http://s831.photobucket.com/albums/zz236/nurulatiqah_mushi/?action=view&amp;current=mushroom-blue.png" target="_blank"><img src="http://i831.photobucket.com/albums/zz236/nurulatiqah_mushi/mushroom-blue.png" border="0" alt="Photobucket"></a>

URL

http://i831.photobucket.com/albums/zz236/nurulatiqah_mushi/mushroom-green.png

Embed Code

<a href="http://s831.photobucket.com/albums/zz236/nurulatiqah_mushi/?action=view&amp;current=mushroom-green.png" target="_blank"><img src="http://i831.photobucket.com/albums/zz236/nurulatiqah_mushi/mushroom-green.png" border="0" alt="Photobucket"></a>

**URL: Kalau nak gunakan image sebagai cursor atau bersama sebarang coding lain, sila gunakan URL code ni okay? Kalau tak nanti tak jadi.

**Embed Code: Code ini hanyalah untuk insert gambar sebagai icon atau gambar hiasan pada sidebar atau mana-mana bahagian dalam blog/website/page anda.

TUTORIAL

Cuba lalukan cursor anda pada image di atas. Apa yang berlaku? Haa, itulah yang dinamakan efek mouseover. Kalau anda perasan, semua button yang ada pada blog saya seperti yang terdapat di sebelah kiri post ini menggunakan coding ini. Jadi mari saya ajarkan bagaimana hendak mengaplikasi pada blog anda.

1. Mula-mula pergi Design>>Page Elements

2. Kemudian Add a Gadget>>Add HTML

3. Copy code ni:

<img src="URL image 1" onmouseover="this.src='URL image 2'" onmouseout="this.src='URL image 1'" />

4. Dan paste-kan dalam widget HTML anda. Seterusnya anda boleh letakkan widget tersebut di mana-mana mengikut kesukaan anda. Cuba preview, jadi tak? Kalau jadi save!

Kalau nak letak link pada image tersebut (maksudnya, kalau anda klik pada image anda akan dibawa ke laman web atau page lain), tukarkan code pada langkah ke-3 dengan code yang ini:

<a href="URL laman web"><img src="URL image 1" onmouseover="this.src='URL image 2'" onmouseout="this.src='URL image 1'" /></a>

** Bagi tulisan yang berwarna merah, anda isikan dengan URL laman web yang anda ingin linkkan pada image. Bagi tulisan biru, letakkan image yang anda mahu keluar ketika anda tidak melalukan atau mengalihkan cursor daripada image. Tulisan warna pink pula adalah image yang anda nak keluarkan apabila dilalukan mouse di atasnya. 

Faham tak? Kalau tak faham tanya :) . 

I think that's all for today. If I feel generous again next time, I will post more tutorials. And wait for more icons and buttons and cursors from me. Peace out ^_^