Notes

1. I don't do tutorials anymore.

2. I rarely update my blog due to my health condition.

Thanks for your concern :)

Friday, December 10, 2010

Tutorial buat menu bar macam blog I punya.

Ramai yang request so yeah here you go ;

1. First go to Design > Edit HTML. And click dekat Expand Widget Templates.

2. Click Ctrl & F serentak, then copy & paste code di bawah ni di ruangan find ;
]]></b:skin>
3. After that , copy code kat bawah ni. Dan paste kan ia di atas code di step ke 2.
/**************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*/
}  
4. Next , copy dan paste code di bawah ni di ruangan find ;
<div id='content-wrapper'>
5. Copy this code, paste kan di atas code di step num 4 tadi.
<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>
* Don't forget to change 'Masukkan Link Disini' kepada link anda sendiri. Dan 'NAMA MENU' kepada nama yang anda ingin kan contoh seperti 'Tutorial Blog'.

6. As usual, click preview. And if tak ada error click saja save. Selamat mencuba :D

P/S : Credit to mymijie.blogspot.com for the tutorial

19 orang rasa saya gemuk tapi hot. aww:

xaty said... REPLY

cantekk~ :)

Putree LaVida said... REPLY

thanks sys <333 i'll use it .

liyanaziz said... REPLY

weewitttt!! tq!

a n a s t a s y e a said... REPLY

Tutorial yang menarik!!!
me, anastasyea

adrinaqamarina said... REPLY

dah lama menanti tuto ne. hehe.

nanie said... REPLY

tuto yang bgus..nk try :D

E!ra said... REPLY

maaf ! yang number 4 tu apa meaning die ? tak paham la .. sorry :) .. can u please explain to me ☺ ..

http://www.blogger.com/html?blogID=3901270277335422739

Iqa said... REPLY

Hey sis! Thank you so much :)

Hey, Im Alyah. said... REPLY

kak , tak lepas buat . code number 4 takd dalam code HTML uh

Wawan3y. said... REPLY

alahai, kod num 4 tadak ler, nk paste kat mana u? =(

ezzamalik said... REPLY

Almak menu bar dia jadi panjng lain mcm.tak tahu
tgk ezza pnya blog
ezzathepolkadots.blogspot.com
nak adjust mcmana ?
really2 need your help.SOS
tqvm((:

Anonymous said... REPLY

how to change the menu bar according to our blog color? thanks

apitrawrr said... REPLY

kalau saye nk wat tab tutorial , mcam mne nk dpatkan link die ?

:: Zanna :: said... REPLY

thanx dh apply kat blog ^.^

nurul hidayah said... REPLY

hye boleh bertanya tak (:
kenapa i buat menu bar tuu tak jadi eh ? yang step no4 i tak paham la . macam mana eh "ruangan find" tu .

maisara majid said... REPLY

step no.4..ohhh tak jadi..takde pon..haha..maybe template laen2 kot..urmm :(

cik bella said... REPLY

tak phmla. bole tak trang dgn jelas lg

ejoy said... REPLY

best tuto nanti boleh guna jika custom template baru
Media Pengiklanan Untuk Blogger Tempatan

aieynlover said... REPLY

mcmner nk buad link sendiri ehh ??

Post a Comment

Next Previous Home