Home » , , » Cara Buat Menu Header

Cara Buat Menu Header

Saturday, May 8, 2010


Atas permintaan kawan mijie iaitu wan9. Mijie dengan telah membuat tutorial tentang Menu Header seperti yang anda lihat di atas..Mijie tidak akan menghuraikan lebih panjang tentang ini. Jom ikut step2 dibawah ini..






Step pertama :: seperti biasa pergi ke edit html dan klik expand widget templates..


Step Kedua :: cari ]]></b:skin> .Tekan control+F untuk carian tersebut.


Step Ketiga :: Copy code dibawah dan paste kan diatas kode yg telah anda cari tadi.


/**************MENU HEADER*************************/
/*Credits: By Mohd Artarmizi (http://mymijie.blogspot.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/menub_bg.gif) repeat-x;
width: 945px;
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/menub_hover_left.gif) no-repeat; /*left tab image path*/

background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/menub_hover_right.gif) no-repeat right top; /*right tab image path*/

}


Step Ketiga :: Cari <div id='content-wrapper'>. Tekan control+F untuk carian tersebut.


Step Keempat :: Copy code dibawah dan paste di atas code yang telah anda cari tadi. Tukarkan Masukkan link Disini kepada link yang anda ingin link kan contoh http://mymijie.blogspot.com/search/label/Exchange%20Link . Nama Menu adalah nama yang ingin anda letak pada menu tersebut.


<ul class='glossymenu'>

<li class='current'><a href='
Masukkan Link Disini'><b>NAMA MENU</b></a></li>
<li><a href='
Masukkan Link Disini'><b>NAMA MENU</b></a></li>
<li><a href='
Masukkan Link Disini'><b>NAMA MENU</b></a></li>
<li><a href='
Masukkan Link Disini'><b>NAMA MENU</b></a></li>
</ul>


Step Kelima :: Klik preview untuk melihat hasil nya. Jika tiada error berlaku tekan Save dan jika ada error, sila hantar komen anda dibawah. Insya Allah kalau ada masa mijie akan menolong.:)

57 dah komen:

Farazila 5/08/2010 6:22 PM  

erm.....
mijie..klu blog fara tu dah ade menu header...then step yg mne fara nk ikut..??

Mijie 5/08/2010 7:20 PM  

ikut dari awl lah..sebab yg atas tu css dia n then yg bawah 2 adelah utk paggil kembali css yg telah dibuat dari atas td..:)

Farazila 5/08/2010 8:28 PM  

erm ok..i'll try yea..

Mijie 5/08/2010 8:38 PM  

ok farazila..ade mslh btau ek..:)

zulkbo 5/08/2010 8:59 PM  

salam..
good tutor
thanks bro
byk berguna ni

Mijie 5/08/2010 9:18 PM  

ok zulfbo..ade mslh bgtau yer..mgkn dpt tolong..:)

S.I.T.I 5/09/2010 12:07 AM  

bagus gak nie..kebetulan siti memang ade masalah nak buat header..hehe

Mijie 5/09/2010 1:56 AM  

oo..a'ah..bole2..try ar buat..:)

~ar!eyko san~ 5/09/2010 10:59 AM  

menarik nye...ary pn nk try gak la.. ttq2 =)

S.I.T.I 5/09/2010 1:04 PM  

macammne mijie ritu letak header blog benashaari tu ek?tak reti nak buat ar.boleh ajar tak??
(err..lari tajok lak.hehe.)

Mijie 5/09/2010 1:38 PM  

ar!eyko :: a'ah blh je nk cuba..:)

S.I.T.I :: bole je nk aja..mu2 g kt blog benashaari 2..pstu save as header dia @ copy images URL, pstu msuk ar dlm entry siti mcm msuk gmbr biase je.:)

S.I.T.I 5/09/2010 4:00 PM  

owh..tengs ye mijie.. :)

yastro 5/11/2010 12:31 AM  

Cun ah bro...leh cuba nti!!

Mijie 5/11/2010 12:45 AM  

emm boleh2..try lah buat ek..de mslh leh mijie tlg..:)

Anonymous,  5/30/2010 9:43 AM  

Just want to say what a great blog you got here!
I've been around for quite a lot of time, but finally decided to show my appreciation of your work!

Thumbs up, and keep it going!

Cheers
Christian, iwspo.net

n.a.n.a 6/16/2010 9:58 AM  

kena buat blog baru ke utk linkkan?

Mijie 6/16/2010 10:43 AM  

xde ar n.a.n.a..guna blog yg sama tp guna label..mcm kita buat kategori jugak..link kategory 2 lah kita letak kt link menu2 di atas..

n.a.n.a 6/16/2010 11:15 AM  

waaa x paham lg. aiyok =_="

Mijie 6/16/2010 2:23 PM  

owh ye ke???..nk bt nie mmg complete skit..mijie pun beberapa kali try bru jdi..tp nk bt gak blh je mijie ajar..:)..

nadiah daud 6/26/2010 11:59 PM  

panjan sgt lgg mijie menu header ni.
sampai telebey2 dari header.
pastu camne nak tukar warne bg same ngan warne blog sy ye..
mintak tunjuk ajar.

Mijie 6/27/2010 2:46 AM  

a'ah mmg panjang pun..nk tkar color 2..kena edit blik ar guna photoshop.2 mijie guna images .gif..

nadiah daud 6/27/2010 9:12 AM  

coding mane yg nk pendek kan? huhu..

Hadi Cemas 7/14/2010 8:43 PM  

salam , hadi punya error la , kenapa ha ?

Mijie 7/15/2010 12:03 AM  

@Hadi Cemas

Wsalam..error pe ek??

Hadi Cemas 7/15/2010 3:19 PM  

@Mijie

okay , semua jadi cuma nak tukar lebar dia macam mana ? terlalu panjang pulak ;)

Mijie 7/15/2010 5:15 PM  

@Hadi Cemas

sory..bz sgt2 td..bgs dh jadi..klu nk ubah lebar..ejas kt weight..tkar ikut kesesuaian blog..:)

mohammka7476 7/31/2010 3:14 PM  

cari punya cari skali x jumpa juga la code div id='content-wrapper'
so camama ni mijie? minta tolong settle masalah ni sat..

Mijie 7/31/2010 4:43 PM  

@mohammka7476

owh.. xjumpa ke..cuba cari id='header-wrapper'

MK 8/08/2010 4:18 PM  

Mijie...prob aku sama mcm mohammka7476.

id='header-wrapper' pon xjumpe.cmne?

siti faridah harun (nama penuh tu) 8/17/2010 2:56 PM  

ida xleh nk buat,, search yg wrapper tu xde kat html

Mijie 8/21/2010 11:08 AM  

@siti faridah harun (nama penuh tu)

owh..mungkin sesetengah theme sesuai pkai menu ni..klu xde wrapper..cu cari header

amie... 10/02/2010 10:15 PM  

salam...slmt hri rye...

erm...mcm sye nye blog tu cmne eak??try wat tp xjd lak...

sbb dye mmg dh ade box sndri cme tak taw je nk wat...

Mijie 10/02/2010 11:17 PM  

@amie...

wsalam...slmt ari raya jgk..emm box kt mn 2?..kt header ke?..

amie... 10/03/2010 4:10 AM  

yup kt header...lupe lak...bkn kt blog tu...tp kat blog lagi satu >> http://kalam-nurani.blogspot.com

DoRaEmoN LuRvE 10/24/2010 5:08 PM  

mijie.. nk tanye.. navbar kt bl0g sy xde.. camne nk wat supaya navbar kt bl0g sy 2 ade?? ley tlg x??

Mijie 10/25/2010 12:55 AM  

@DoRaEmoN LuRvE

ok..mijie dh comment kt sbox..;)

NanaEmon 11/16/2010 6:58 PM  

Assamualaikum Yang Berbahagia Miji.. Kita kan dah ada menu header. Masalahnya, camner nak buat page untuk header tu and buat linknya supaya terus ke page yang baru kita buat tu.. Agak2nya fahamla dengan soalan saya ni ye? Heee..

Anonymous,  11/18/2010 11:18 PM  

mijie x ada buat ebook untuk blog tutorial ke?

Mijie 11/22/2010 10:16 AM  

@NanaEmon

Waalaikumusalam NanaEmon..sory lmbt reply..

kalau nak tambah page..buka dashboard, klik pada posting dan klik pada Edit Pages. lpas siap copy link address dia, pastu pastu kt href dalam kod 2..

tp mijie biasa buat mengikut kategori @ labels. buat posting mengikut kategory. kalau nak copy link labels plk..cuba try klik pada link TAGS pada blog mijie. pastu copy link address dia..link tersebut akan senarai semua mengikut label yg kita buat td..

Mijie 11/22/2010 10:18 AM  

@Anonymous

xde lg setakat ni..skrg msh busy, x sempat nk handle..maybe next time insyaAllah mijie akan buat..;)

Shawls Colourful Gallery 11/24/2010 11:32 PM  

mijie xboleh wat pun..step 3 xjupe lah dlm edit html tu..dah ctrl+f.tp xde pun..npe erk??

Shibebell Prissy 12/16/2010 9:58 PM  

Abg, mintak izin ajar kawan-kawan ye :)

Mijie 12/20/2010 2:40 PM  

@Shibebell Prissy

ok boleh3..mari abg ajr..hehe..;)

Mijie 12/20/2010 2:43 PM  

@Shawls Colourful Gallery

da atas template 2..kdang2 guna content wrapper, kdang2 guna pkataan lain.

Matika 1/16/2011 2:45 PM  

Tak boleh laa abg...
hampir gler dh ni..hehe
bnyak kali try..asyik eror jew..
tolong plizz...

Mijie 1/17/2011 11:16 AM  

@Matika

emm..error ape yg keluar tu?..maybe silap letak kot.

Yus 4/13/2011 12:48 AM  

Mijie,mcm mana dia jadi lain macam sikit..bila preview,dia keluar mcm list!..tolong
dia keluar macam ni:
.Home
.About Me
.Facebook
kenapa ek?

Mijie 4/15/2011 11:00 PM  

@Yus

sory lmbt reply..eh yeke..gambar menu tu keluar x?

Dunia IT Untuk Anda 5/16/2011 5:05 PM  

kenape kod step ketiga saya x de??

Mijie 5/17/2011 11:39 PM  

@Dunia IT Untuk Anda

eh step ketiga xde??.eh yg tu kan copy dari sini

miszcokelat95 6/04/2011 9:32 PM  

jp , cane na uad y step 4 tu ? ta fham .

Mijie 6/17/2011 3:20 PM  

@miszcokelat95

Step ke-4 tu adalah link ataupun page yg nk letak pada menu atas tu..

KiMiE 9/26/2011 4:47 PM  

bro dia jadi lebar sikit la..nak edit katne ek nak bagi ngam2 ngan page kita?thanks bro~

KiMiE 9/27/2011 2:36 PM  

takpe bro dah setel hehehe..!!!!

Sandokhan 9/28/2011 12:02 PM  

nice tutorial. Simple dan padat~

Mijie 9/28/2011 9:09 PM  

@KiMiE

Bagus ar kalau dah jadi.. Sorry yer lambat reply..

Post a Comment

Sila Tinggalkan komen korang kat sini yer..
InsyaAllah setiap komen dari korang aku akan blas..:)

DeSiGn By MiJiE BloG @ 2011. Powered by Blogger.