buat Tab menu cara saya

Macam mana nak buat tab menu? Sebenarnya senang sahaja. Dah banyak yang buat tuto ni dan aku tengok sama sahaja. Aku rasa cara aku ni mungkin jugak sama dengan yang lain tapi mungkin jugak ada berbeza. Siapa tahu? HAHA.

Tuto kali ini sebenarnya disoal oleh seorang blogger. Siapa? Entahlah, cea, macam itu pulak. Kedekut betul,HAHA. Akey, nak tahu siapa dia? Sila pergi sini. Dah tengok? Simple aje belog dia kan? :) Loading pun cepat je, mungkin sebab dia tak simpan widget- widget yang boleh memberatkan belog kot. Pemilihan warna pun lembut, warna purple yang tak garang. Dan yang lebih mengharukan, dia letak aku kat bloglist sidebar tu. Eh, bukan aku ya tapi belog ni haa. HAHA. Tapi kan, kalau kurangkan post kat laman utama tu mungkin lebih baik sikit. Penat nak scroll panjang- panjang. Kalau nak letak entry lebih dari satu, better pakai widget readmore.. =) ( sempat buat review khas pulak ).

Akey, mari kita teruskan dengan tuto kita k? Mula- mula untuk membuat tab menu ni, korang perlulah mempunyai software yang boleh edit- edit kan? Tak ada? Boleh rujuk sini. <--


Dan kalau korang dah ada sekarang, bolehlah mula. Yeah! Sekarang ni, aku akan ajar buat tab menu dengan menggunakan photoscape ya. Sebab lebih senang. Bagi yang nak menggunakan software lain jugak boleh, bergantung kepada kreativiti korang sendiri.

Mula- mula buka software korang terlebih dahulu. Bagi aku, mestilah software photoscape kan? Then, pilih Editor dan lebih kurang macam inilah nanti yang korang akan nampak.

Nampak tak kat dalam gambar tu ada new photo? Akey, korang pergi ke menu ( atas sebelah kanan ), klik new photo seperti yang ada di dalam gambar tu, then isi kat bahagian height dan width tu. width tu terpulang kat koranglah tapi aku selalu pakai 100 dan bagi height pulak, 40. Dan jangan lupa pilih sekali warna apa yang korang nak.

Lepas korang dah isi semua tu, akan keluar satu petak kecil mengikut apa yang korang isi tadi. Contohnya aku pilih warna putih, so keluar petak warna putih.

Akey, kat dalam gambar tu aku dah labelkan beberapa perkara. Korang boleh rujuk kalau ini first time korang menggunakan Photoscape. Yang lain- lain tu korang bolehla explore ekk. Sekarang ni, hiaslah petak kecil korang korang tu sesuai mengikut kreativiti korang. Aku buat simple je macam kat dalam gambar tu. Sekadar nak demo untuk tuto kan?

Dah siap? Sekarang ni save petak kecil tu dan jadikan ia sebagai format jpg. Then, nak upload pulak. Bergantung kepada korang nak upload kat mana. Kalau aku upload kat blog je, lagi mudah dan terjamin sebab bawah blogger sendiri. Lainlah kalau tiba- tiba blogspot ni kena buang ke apa kan. So, kalau ikut cara aku 100% ni, sila buka new post kat dashboard korang k. Dan upload gambar tu kat sana.

Bila dah siap upload kesemua gambar yang korang nak jadikan tab menu tu. Korang klik petak edit html tu. Rujuk dalam gambar kat atas tu k. So, ia akan kelihatan seperti ini.

Sekarang ni, sila highlightkan beberapa code. Rujuk gambar kat bawah ni. 

Nampak tak? Highlight code tu betul- betul mengikut contoh kat atas ya. Start dari  <a sampai </a>  . Akey, copy code tu. Lepas tu, sila buka new tab dan buka dashboard blogger korang lagi. Tapi kali ini pilih design pulak dan page elements. Add a gadget dan pilih html/ javascript.  Paste code yang korang copy tadi kat kotak widget tu.

Ini contoh code- code yang aku dah copy paste. Kira semua gambar tab menu tu aku dah letak kat kotak ni. Korang pun kena buat benda yang sama tau. Copy paste semua code gambar tab menu tu kat kotak ini, mengikut langkah- langkah yang aku dah ajar tadi.

Lepas dah siap letak code- code tu, sekarang ni kita nak link kan gambar tu. So, kalau korang klik gambar tab menu kat blog korang, gambar tu akan bawa korang ke url yang korang dah letak tu. Kalau tuto yang lain, dioarang akan klik simbol rantai dan.. dah lupa dah. Tapi aku akan buat semua ni main copy paste dan code, sebab itu akan lebih mudah. Bagi akulah, bagi korang tak tahu, HEHE.

Dalam gambar kat atas tu, aku highlight lagi satu code. Banyak pulak highlight- highlight ni kan? HAHA. Sila ikut seperti kat dalam gambar ni k? Dari http sampailah ke jpg tu. Then, padamkan code tu dan isi dengan url yang korang nak. Contohnya aku letak url blog aku. 

Macam mana nak ambil url? Akey, bagi yang baru nak belajar, sini aku bagi tips mudah. Kalau korang nak letak url satu laman web ni. Korang pergi buka dulu laman web tu. Contohnya nak letak url blog koranglah kan, pergi buka blog korang dan ambil url tu kat atas. Contoh :

Opps, bocor bukak facebook, huhu. Dah tahu? Mudahkan? HEHE. Lepas dah tukar code- code gambar tu menjadi url code laman web yang korang nak, korang da boleh save dah. Dan sekarang ni cuba korang tengok blog korang k.

Tadddaa! Dah ada bukan? Senang sahaja nak buat tab menu ni tau. Hehe. Selamat mencuba. Lepas ni mesti korang punya tab menu akan lebih cantik dan boleh kalahkan aku punya ni, HAHAHA. Eh, lupa nak bagitahu. Pastikan widget tab menu tu korang letak kat bawah header k.

P/S : Entry ni dibuat sebaik bangun tidur. Sekarang nak pergi tengok TV. Papai-out