Friday, September 14, 2012

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 

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! ^^

5 comments:

miz ruha said...

comey2..
nak try lah nanti,,
thanks.. ^_^

Wilma said...

Thanks for the tips Cik Putri :-)

confdeb said...

nice tutorial..nt nk try le..:)

Qiel RQ said...

Thanks so much.

Zatiey Ismail said...

eh2..tengs mention nme kter kat cni yer Cik Putri.. ^_^