Colourful Facebook Chat Text

                                      

Chat Di Facebook Dengan Colour Text!

Click Here

Read More

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~

Read More

Cara Mudah Design Button Sendiri

Assalamualaikum.

Admin ni tidak la pandai sangat tentang design-design ni, tapi hari admin nak aja cara mudah nak buat butang atau dalam English nya "Button".
Kalu tengok kat bawah ni memang la panjang admin tulis, tapi admin tulis ja panjang-panjang sebab nak explain bagi anda faham.

Untuk design "button" ni, admin guna softaware PAINT.NET sebab ringan and percuma. Kalu yang guna Photoshop pun boleh lebih kurang sama ja. (sorry, admin dah uninstall photoshop admin)
Kalu sapa yang nak download software yang mcm admin guna (PAINT.NET) boleh Download Disini.
Ok, jom Kita mula.



Alatan Dalam PAINT.NET



Langkah 1

- Buat new layer (Layer 1)
- Pergi ke layer 1. Pilih warna button yang kita mahu.(klik pada colour panel wane ape yang kita nak)
- Pergi ke too panel pilih drawing tool yang hendak digunakan.cth: Ellipse/Rectangle/.
- Sebelum melukis, pastikan anda telah klik pada "draw filled shape".(rujuk foto 2)
- Kemudia lukis button yang kita mahu.(Bulat ke , petak ke tiga segi ke ape ke terpulang pada diri sendiri)
Maka hasilnya seperti dibawah



Foto 2



Hasilnya

Langkah 2

- Buat new layer (Layer 2)
- Pilih warna yang sama warna tetapi gelap sidikit dari warna button anda tadi.
- Pergi ke layer 1.
- Sekarang pergi ke tool panel, click pada "Magic Wand" / "Smart Select Tool" (rujuk foto diatas).
- Klik pada button anda (bahagian dalam)(maka button anda akan terselect)
- Kembali ke Layer 2, pergi ke tool panel dan klik pada "Fill In"/ "Paint Bucket" dan fill kan warna dalam kawasan yang anda select tadi .
- Pergi ke tool panel klick "Ellipse Select" / "Circle select". Dan buat "circle selected" pada tengah-tengah button anda tadi dan terus tekan "delete" pada keyboard. Maka seakan-akan lubang akan terhasil di button anda.(Tips:Untuk adjust supaya bulatan yang ingin kita delete itu berada di tengah-tengah, boleh guna "Move Selection" pada tool panel.)
- Setelah itu, pergi ke "Effect" toolbar dan klik "Blur" > "Gaussian Blur" (rujuk foto 5).
- Adjust "blur" supaya ianya maching dan lubang tadi tidak terlalu kelihatan.(klik ok)
Maka hasilnya seperti dibawah

Foto 4

Foto 5

Langkah3

- Buat new layer (Layer 3) dan klik pada layer 3. (pergi ke layer 3)
- Pergi ke Colour panel, dan pilih warna untuk text (tulisan) yang anda mahu.
- Pergi ke tool panel, klik "Text"/"Add Text" (rujuk foto 6).
- Klik pada button anda, dan masukkan text yang anda mahu. Cth: "Start".
- Pergi ke Layer Panel dan klik pada "Layer Properties" dan adjust "Opacity" / "Transparency" , supaya colour text maching dengan colour button.(rujuk foto 6) (Abaikan proses ini jika anda sudah mendapat warna yang maching dgn button anda)
(Tips:Anda juga boleh gantikan Text dengan gambar sekiranya anda mahu)

Foto 6

Langkah 4

- Buat new layer (Layer 4) dan klik pada layer 4. (pergi ke layer 4)
- Pergi ke colour panel, pilih warna PUTIH.
- Kemudian ke tool panel klik pada "Ellipse"/"circle" (sekiranya bentuk button anda bulat) (kalau button anda petak, guna "Ractangle" atau ikut kesesuaian).
- Lukis bulatan pada bucu atas button anda. (rujuk Foto 7)
- Pergi ke "Layer Panel" dan klik pada "Layer Properties" dan adjust "Opacity" / "Transparency" (rujuk Foto 6) supaya ianya menjadi senipis yang boleh mengikut kemahuaan anda.
Maka hasilnya seperti dibawah

Foto 7

Langkah 5 (FINISHING)- Kembali ke layer 1.
- Pergi ke tool panel, click pada "Magic Wand" / "Smart Select Tool".
- Select (klik) pada luar kawasan button anda dan pergi ke layer 2 dan terus tekan "delete" pada keyboard.
- Ulang langkah tersebut untuk layer 4 (tadi buat untuk layer 2 kan? sekarang buat untuk layer 4 pulak)
(save kan sebagai format PNG untuk memastikan background nya transparen)
- Siap -



Button Anda Telah Siap



Contoh Button

Ini cuma langkah-langkah basic je, Anda boleh try macam-macam lagi untuk jadi kan ia lebih menarik.
Jangan segan-segan nak tanya kalu tak faham..ok =)

Macam Mana Nak Buat Button Macam Bawah Ni kat Blog Or Web?

Next Post =)

(gerakan mouse anda kat button bawah ni)

p/s: jangan batas kan had permikiran kita.

Read More