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*************************/4. Next , copy dan paste code di bawah ni di ruangan find ;
/*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*/
}
<div id='content-wrapper'>5. Copy this code, paste kan di atas code di step num 4 tadi.
<ul class='glossymenu'>* 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'.
<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>
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
cantekk~ :)
ReplyDeletethanks sys <333 i'll use it .
ReplyDeleteweewitttt!! tq!
ReplyDeleteTutorial yang menarik!!!
ReplyDeleteme, anastasyea
dah lama menanti tuto ne. hehe.
ReplyDeletetuto yang bgus..nk try :D
ReplyDeletemaaf ! yang number 4 tu apa meaning die ? tak paham la .. sorry :) .. can u please explain to me ☺ ..
ReplyDeletehttp://www.blogger.com/html?blogID=3901270277335422739
Hey sis! Thank you so much :)
ReplyDeletekak , tak lepas buat . code number 4 takd dalam code HTML uh
ReplyDeletealahai, kod num 4 tadak ler, nk paste kat mana u? =(
ReplyDeleteAlmak menu bar dia jadi panjng lain mcm.tak tahu
ReplyDeletetgk ezza pnya blog
ezzathepolkadots.blogspot.com
nak adjust mcmana ?
really2 need your help.SOS
tqvm((:
how to change the menu bar according to our blog color? thanks
ReplyDeletekalau saye nk wat tab tutorial , mcam mne nk dpatkan link die ?
ReplyDeletethanx dh apply kat blog ^.^
ReplyDeletehye boleh bertanya tak (:
ReplyDeletekenapa i buat menu bar tuu tak jadi eh ? yang step no4 i tak paham la . macam mana eh "ruangan find" tu .
step no.4..ohhh tak jadi..takde pon..haha..maybe template laen2 kot..urmm :(
ReplyDeletetak phmla. bole tak trang dgn jelas lg
ReplyDeletebest tuto nanti boleh guna jika custom template baru
ReplyDeleteMedia Pengiklanan Untuk Blogger Tempatan
mcmner nk buad link sendiri ehh ??
ReplyDelete