Cara Buat Menu Header

Posted by mije Sabtu, 08 Mei 2010 0 komentar

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.:)

Adsense Content. bottom of article

0 komentar:

Posting Komentar