Friday

top navigation menu like mine

TUTORIAL FOR BLOG


Masuk ke dashboard dan pilih Design seterusnya Edit HTML
klik Expend Widget Template 

cari kod seperti di bawah
lebih mudah gunakan "Ctrl + F "

]]></b:skin>
copy dan paste kod di bawah SEBELUM / DI ATAS kod di atas
/**************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*/
}  
Next Step,
Save template anda dan pergi ke 
Dashboard, Layout >> Page Elements >>Dan pilih Add HTML/JavaScript
letakkan di atas kawasan catatan blog/blog post 
paste kan kod di bawah di dalam kotak HTML/JavaScript 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>
</ul>

kod_url --> link kan dengan URL anda
Menu --> gantikan dengan nama yang anda mahu

"Preview and Save"
DONE 
SELAMAT MENCUBA

2 comments: