Buat Animasi Button Dalam HTML

Asslamulaikum murid-murid semua..
sapa yang tak hadir kelas hari ini?..hehe.

Ok,seperti yang admin janji, hari ni admin akan ajar cara nak buat "button" kat blog/website yang boleh bertukar warna/tulisan/rupa or apa-apa aje lah , janji anda kreatif..hehe..


Langkah 1. (upload)
- Sediakan 2 "button"/"picture" anda yang berlainan, cnth, satu warna merah satu warna biru. Sape yang terlepas cara nak buat "button" sendiri, boleh klik kat sini  atau scroll je kat bawah.
- Uploadkan "button"/"picture" anda kat Photobucket atau kat mana-mana image hosting yang anda guna.
- Copy "Direct link" kedua-dua "button"/"picture" yang anda upload kat Photobucket tadi.





                                               

                                          




 
Langkah 2. (HTML)
- Cuba study (kalu nak faham) atau copy html dibawah.
- Buka Notepad & paste kan html dibawah.

<a href="http://www.lamanwebAnda.com"><img alt="Click" border="0" height="69" onmouseout="this.src='http://link-picture1-anda/tadi'" onmouseover="this.src='http://link-picture2-anda/tadi'" src="http://link-picture1-anda/tadi" width="175" /></a>


****JANGAN COPY YANG BAWAH INI****

- Cuba cari "http://www.lamanwebAnda.com" kat html di atas dan tukar dengan alamat blog/web anda. *(http:// <---wajib tulis)
 
- Cuba cari "http://link-picture1-anda/tadi" kat html di atas dan tukar dengan link yang anda copy masa anda upload "button"/"picture" nombor 1 anda kat image hosting td. *(pastikan format kat ujung link tu ada[.jpg/.png/.tif]. cth: http://photobucket/albumsaya/button1.png <---format png)
 
- Cuba cari "http://link-picture2-anda/tadi" kat html di atas dan tukar dengan link yang anda copy masa anda upload "button"/"picture" nombor 2 anda kat image hosting td. *(pastikan format kat ujung link tu ada[.jpg/.png/.tif]. cth: http://photobucket/albumsaya/button2.png <---format png)
 
- Cuba lihat "border" , "height" , "width" . [border-biarkan nilainya "0"] [height-(size)adjust anda mahu button itu tinggi mana] [width-(size)adjust anda mahu button itu lebar mana].



Langkah 3. (Finishing)
- Copy html yang telah siap & paste kan ke dalam blog post anda atau dimana-mana (blog/web anda) yang anda mahu.
- siap.

**Tips: tambah "<center>" pada awal html "</center> pada akhir html, utk buat button anda berada center di post blog/web anda.






~Selamat Mencuba~