Tutorial : Tab Menu Yang Simple

Assalamualaikum. Hari ni aku nak bagi tutorial baru! Aku pun baru je berjinak-jinak dengan hobi mengedit blog neh. Cantik ke tak tu mengikut kreativiti korang sendiri. Aku suka yang simple je. Kali ni tutorial tab menu pulak. Tak payah nak edit html expand widget semua sebab aku paling malas nak buka edit html tu. Serabut. Tutorial ni korang just kena ada pic tab dan add kat html gadjet je.

INI LAH RUPA TAB MENU AKU

First of all, korang kena ada label untuk setiap entry yang korang nak kategorikan. Open DASHBOARD>POST>EDIT>POST SETTING>LABELS. Then korang isi je label apa korang nak. Macam entry yang ini, aku labelkan sebagai tutorial. Entry-entry lain korang boleh label macam-macam lagi contohnya resipi,older entry pun boleh. Ikut suka hati lah. Lepas tu update entry korang macam biasa.

Tinggalkan part label tu, sekarang kita senaraikan semua label kita dalam bentuk link. So that,bila visitor click tab menu tu semua entry yang dilabelkan tu akan tersusun mengikut label masing-masing. Ini link blog aku.

http://secretofnoone.blogspot.com/search/label/tutorial

http://secretofnoone.blogspot.com/search/label/lovestory

http://secretofnoone.blogspot.com/search/label/review

http://secretofnoone.blogspot.com/search/label/animals

http://secretofnoone.blogspot.com/search/label/recipes

Merah : Tukarkan dengan link blog korang.

Purple : Tukarkan dengan label entry korang.

Untuk memudahkan di copy dan paste ke html gadjet nanti, korang boleh lah save kat notepad dulu.

Ok, sekarang kita memerlukan gambar untuk tab kita. Korang boleh edit tab korang kat 

-PHOTOSCAPE

-PAINT.NET

Sila click untuk mendownload. Aku biasa gunakan paint.net je. Saiz tab yang aku gunakan sekarang adalah 160px x 50px. Untuk tutorial edit gambar menggunakan kedua-dua editor tu boleh tengok kat blog ZATIEY ISMAIL.

EDIT MENGGUNAKAN PAINT.NET

HASILNYA

Bila dah siap meng-edit gambar tab yang diinginkan, kemudian upload gambar tersebut ke PHOTOBUCKET untuk mendapatkan kod html. 

Kemudian pergi ke DASHBOARD>>LAYOUT>ADD WIDGET>HTML/JavaScript. Pergi semula ke photobucket korang dan copy kod html gambar tab yang korang dah upload tu. Copy satu persatu dan paste satu persatu jugak dalam html gadget yang sama.

Lepas dah paste semuanya, tambahkan perkataan < center> macam yang ditunjukkan dalam gambar kat bawah ni dan click rich text.

Nanti kod korang akan bertukar menjadi gambar. Macam kat bawah ni.

Lepas tu korang highlightkan gambar yang tertera dan klik link.

Then boleh lah paste link label yang korang save kat notepad td. Satu link untuk satu gambar.

Klik ok dan save. Lepastu arrange korang punya htm gadjet tu ke bawah header korang dan save arrangement. 

View, dan siap!!! Nampak leceh, tapi bila try buat satu persatu lagi senang daripada yang edit html punya. Sebarang pertanyaan sila lah comment dengan sopan dan santun. :)

*P/S: Nak copy tutorial ini boleh, dengan syarat creditkan ke blog ini. Sebab aku sendiri pun bersusah payah buat sendiri entry ini dan tak copy dari blog lain. TQ! ^^