Cara buat tab menu paling simple

tutorial request by Cik Ezy!


ok kali ni aish nak share cara buat tab menu paling simple abad ini. muahaha. takde kartun kartun, takde border border.. simple sangat. tak perlu aah nak buat lawa lawa dekat photoshop bagai, pastu nak upload lagi kat photobucket..no need!!! sebenarnya dulu tutorial ni lah yg aku cari. sebab aku lagi suka tab menu simple memandangkan blog dah semak. haha.

apa pun kredit untuk Mira Edora sebab share tutorial ni dulu. 


CARA BUAT PAGE

1. Dashboard - New Post - Edit Pages - New Page




2. Buat entry macam biasa. Contoh ABOUT ME. dah siap je, korang publish entry tu macam biasa. Bila dah publish, dapatkan URL entry tersebut.copy dulu dekat notepad.

3. Kalau korang nak letak page Facebook, tak perlu buat step nombor 1 dan 2. Korang just ambik je URL Facebook korang tu dan copy dekat notepad.

ulangi step di atas untuk buat page lain pulak. ok dah siap page page korang? sekarang kita belajar macam mana nak letak page page korang tu dekat tab menu pulak



CARA LETAK TAB MENU

4. Dashboard - Design - Add a gadget 

5. Letakkan kod menu tab bawah ni dan paste dekat gadget HTML. 

<center><p><div style="background-color: #ffffff"> <a href="URL HOME" " title='home'>HOME</a> | <a href="URL TAB MENU 1" title='about me'>ABOUT ME</a> | <a href="URL TAB MENU 2" title='tips & tutorial'>TIPS & TUTORIAL</a> | <a href="URL TAB MENU 3" title='segmen & contest'>SEGMEN & CONTEST</a> | <a href="URL TAB MENU 4" title='facebook'>FACEBOOK</a> | <a href="URL TAB MENU 5" title='blog bff'>BLOG BFF</a> | <a href="URL TAB MENU 6" title='banner'>BANNER</a> |<br /> </div> </p></center>

WARNA MERAH : letak URL page yang korang dah buat dalam step 1
WARNA BIRU : tulisan ni lah yang akan keluar dalam teb menu korang. (edit lah ikut tajuk tab menu korang sendiri)
title : ada perkataan title sebelum tulisan warna biru kan? tu gunanya sebagai title. bila orang alih cursor dekat tab menu tu, dia akan kuar title korang tu. title mestilah sama dengan tajuk tab menu korang yang tulisan biru tu ye.
WARNA PURPLE : korang boleh tukar warna tab kat sini ea.


6. kalau korang nak tab menu korang terletak dekat bawah header macam aish buat, korang drag gadget tu dekat bawah header ok. kalau nak letak dekat atas post title, drag kat blog post. pilih ah mana yang sesuai.





sharing is caring. selamat mencuba!


Previous
Next Post »

35 komen

Write komen
Cik Ezy
AUTHOR
May 10, 2011 at 11:20 PM delete

tenkiu cik aish!
cik ezy tgh cube nk buat ni..
tenkiuuuu~
=)

Reply
avatar
HAJAR hasan
AUTHOR
May 10, 2011 at 11:25 PM delete

simple and easay. nice tuto. :)

Reply
avatar
Cik Ezy
AUTHOR
May 10, 2011 at 11:37 PM delete

dh jadik la cik aish..
horay horay!
suke sgt.. hehe..
tenkiu yunk..

Reply
avatar
Cik Aish
AUTHOR
May 10, 2011 at 11:42 PM delete

@Cik Ezywaweee...bgs2.!! congrat! senang jekan?? hehehehe

Reply
avatar
.m y z.
AUTHOR
May 11, 2011 at 12:48 AM delete

ziema tak upload pun kat photobucket. just tambah kod simple utk image je ;)

Reply
avatar
May 11, 2011 at 8:17 AM delete

isi dlm dye cane aish?dulu dh penah buat.tp renyah lah. =)

Reply
avatar
uLan
AUTHOR
May 14, 2011 at 12:58 PM delete

uLAn try wat yea.. thank you aish for the tutorial..

Reply
avatar
kakiterbang
AUTHOR
May 23, 2011 at 9:57 PM delete

macam mane kalau dekat page element tu x de ruang untuk diletak kat header??

Reply
avatar
July 1, 2011 at 8:41 PM delete

Cenkiu cangat. Thenk yu! Cantek... so cantek...

Reply
avatar
Anonymous
AUTHOR
July 26, 2011 at 9:41 PM delete

url tu ape sebenarnya?pening lalat eh..

Reply
avatar
geenasofea
AUTHOR
July 28, 2011 at 6:47 PM delete

Cik Aish

Thank you for the tutorial, very useful dan informative. Kakak dah letak di blog http://ninaychicokidzlothing.blogspot.com. Sila berkunjung dan leave comment ye. Sebelum ni cuba belajar dari blog lain tak menjadi. Mula2 dulu buat page element. Tak se simple dan senang yang ini.

Reply
avatar
Hanie_Dew
AUTHOR
August 4, 2011 at 9:05 AM delete

kalau nak tambah lagi just copy je coding tu kan. thanks for sharing

Reply
avatar
Cik Aish
AUTHOR
August 4, 2011 at 2:31 PM delete

@kakiterbang mmg takde..so kt just drag je element kat sidebar tu letak dekat bwh header..just drag je ye

Reply
avatar
Cik Aish
AUTHOR
August 4, 2011 at 2:31 PM delete

@Anonymous hehe url tu stand for.. er. dia link sebenarnya. haha

Reply
avatar
Cik Aish
AUTHOR
August 4, 2011 at 2:32 PM delete

@geenasofea ok akak...tahniah! haha..

Reply
avatar
Cik Aish
AUTHOR
August 4, 2011 at 2:32 PM delete

@Hanie_Dew aa ah just tambah je kod yg sama.. :)

Reply
avatar
January 13, 2012 at 3:04 PM delete

salam..dh dpt buat tab tu,mcm mana nak post entry ikut tab plak?

Reply
avatar
dina mustapa
AUTHOR
June 8, 2012 at 6:28 PM delete

ten q kak,, dlm byk2 tuto,, yg nie bt saya fhm,,alhamdulillah jadik,,
kak follow la saya manisgurl.blogspot.com
saya dak baru,,,

Reply
avatar
jalil
AUTHOR
August 26, 2012 at 2:58 AM delete

yahoo..dah jadi dah.puas dah aku cari.baru jumpa cara paling senang..TQ

Reply
avatar
September 1, 2012 at 12:10 AM delete

CIK AISHH...help me leh? sya dh buat seperti disuruh..tp button tu xda function pn bila saya preview..nape ekk..?????

Reply
avatar
Cik Aish
AUTHOR
September 1, 2012 at 12:17 AM delete

@Roshazz Kliks! masa preview mmg takkan function button tu..save lepas preview..sure ok :)

Reply
avatar
purpleryna
AUTHOR
September 5, 2012 at 2:21 PM delete

mudah giler follow ur tutorial.. bole jadik chekgu nieh.. many2 thanks ya :)

Reply
avatar
Kirana Suraya
AUTHOR
October 12, 2012 at 12:57 AM delete

copy this tuto untuk tutorial dlam blog shaye ; sudah dicreditkan

Reply
avatar
October 14, 2012 at 10:15 AM delete

salam..akak tlg saye..saye punye yg version baru..bkn yg lame punye.. ermm

Reply
avatar
Ameera Ayya
AUTHOR
November 29, 2012 at 7:06 AM delete

link warna tab takdepon :(

Reply
avatar
Intan Malina
AUTHOR
February 21, 2013 at 2:42 PM delete

atoi xjadik pun..plz,plz,plz kamu jgn marah..pening ase..

Reply
avatar
Nieniey Aman
AUTHOR
November 5, 2013 at 4:05 PM delete

YEWW jdy! mekaseh cik aish:)

Reply
avatar
January 1, 2014 at 3:59 PM delete

tq aish (^_^) saya dh berjaya buat follow tutorial awak hihihi

Reply
avatar
CikLa Shahril
AUTHOR
January 12, 2014 at 12:49 AM delete

hi cik aish... akhir nye jadi gak... thanks sbb buat tuto ni.. mmg cari tab menu yg simple pun.. yeahhh

Reply
avatar
Anonymous
AUTHOR
March 3, 2014 at 12:25 PM delete

salam sis.. macam mna nk besarkan tulisan dia yea??

Reply
avatar
Anonymous
AUTHOR
August 15, 2014 at 9:12 AM delete

mmm...terbaik..thanks ye

Reply
avatar

Sila Tinggalkan Komen Anda Di Sini ConversionConversion EmoticonEmoticon