August 21, 2010

Cara nak buat horizontal tab | Part 2

Kali ni aku nak sambung balik tutorial untuk horizontal tab menu. Sebelum ni aku dah pun buat entry mengenai horizontal tab menu. Tapi cuma menggunakan pages yang dah sedia ada dalam Blogger ni. Boleh refer entry tutorial horizontal tab menu | Part 1. Bila menggunakan Pages ni, ia agak statik jika dibandingkan apabila kita menggunakan free template yang sedia ada disediakan horizontal tab menu.

Tutorial kali ni lebih kepada pengubah suaian kod HTML pada free template yang kita guna. Aku tak la mahir nak buat template sendiri, so aku gunakan je template yang sedia ada. Banyak laman web pengeluar yang menyediakan Free Template. Korang boleh google je. Mesti banyak jumpa free template. Untuk blog ini, aku gunakan template daripada freebloggertemplate.info. Kat sini banyak template yang boleh dijadikan pilihan.Ok sekarang kita kembali ke tutorial langkah-langkah untuk membuat horizontal tab menu pada blog. 

Langkah pertama, kita kena pilih dulu mana-mana free template yang ada horizontal tab menu. Kebanyakan template dalam web freetemplate.info memang dah ada sedia horizontal tab. Jadi korang boleh pilih template yang sesuai untuk blog korang. Bila dah ada template ni, korang senang nak edit dekat HTML. Sebab kita cuma perlu tukar link pada HTML template tu.

Langkah kedua, kita kena pastikan yang kita dah download template tu dan install pada blog kita. Lepas tu, barulah kita boleh edit HTML untuk mengubah link untuk horizontal tab sedia ada. 

Kebiasaannya, pengeluar template tu dah pun masukkan installation guide. Jadi senang korang nak refer. Jadi kat sini aku nak tunjuk macamana nak tukar link tu pada template HTML. 

Klik Design > edit HTML


Klik ctrl + f dan masukkan code yang tertulis pada installation guide. Ni cuma memudahkan untuk kita cari code tu dalam template HTML.


Klik Enter.



Kat situ korang dah boleh bandingkan code yang diberi pada installation guide. Lepas tu, ikut arahan yang di beri. Selalunya korang kena tukar tajuk untuk tab tu dan masukkan link yang korang nak refer tab tu. Sebagai contoh, macam nak buat tab untuk tutorial. Jadi, korang masukkan je link tu ke tempat yang disediakan. Link tu terpulang la kat korang. Sama ada korang nak link kan ke label. Contohnya untuk entry tutorial ni. Aku letakkan tag tutorial. Bila klik pada tab tutorial nanti akan  keluar semua tajuk di bawah tag tutorial.


Arahan installation guide yang diberi. Bandingkan dengan HTML code untuk template korang. Kalau sama baru tukar.Tukar hanya di bahagian yang berwarna merah.

Last sekali klik preview. Kalau dah tak ada apa-apa error. Save la template tu. Dan akan terhasilah horizontal tab menu untuk blog korang. Aku masa mula-mula belajar pasal HTML code ni pun ambik masa juga. Jadi kalau buat first time tak jadi tu takpe. Cuba sehingga dapat ye. Kalau ade apa-apa masalah masa tukar code tu boleh la tanya aku balik ye.

No comments: