membuat Menu Horisontal Di blog

 Membuat Menu Horisontal Di blog - Gambar disamping adalah hasilnya.Jika sobat tertarik ikuti langkah-langkahnya sebagai berikut:

1.Login ke Blogger
2. Klik "Page Element" & Klik "Edit HTML"
3. Centangkan "Expand Widget Templates"
4. Cari  kode ]]></b:skin> dan letakkan Kode dibawah ini tepat diatas kode ]]></b:skin>



.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-background-1.gif) repeat-x; /*tab background image path*/
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: 11px;
font-weight: bold;
padding:0 0 0 16px; /*Jangan Dirubah kode Jarak ini*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 20px 0 8px;
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kiri.gif) no-repeat;
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kanan.gif) no-repeat right top;
}


5. Lalu cari  code <div id='content-wrapper'> dan letakkan code di bawah ini tepat di atas kode <div id='content-wrapper'>

<ul class='glossymenu'>
<li class='current'><a href='URL-Blog-Kamu'><b>Home</b></a></li>
<li><a href='URL-Link-Tujuan1'><b>Judul-Tujuan1</b></a></li>
<li><a href='URL-Link-Tujuan2'><b>Judul-Tujuan2</b></a></li>
<li><a href='URL-Link-Tujuan3'><b>Judul-Tujuan3</b></a></li>
<li><a href='URL-Link-Tujuan4'><b>Judul-Tujuan4</b></a></li>
<li><a href='URL-Link-Tujuan5'><b>Judul-Tujuan5</b></a></li>
</ul>

 Keterangan:

•  URL-Link-Tujuan Ganti dengan url sobat.
•  Judul-Tujuan Ganti dengan judul menu sobat.
•  Untuk mempercepat pencarian HTML gunakan Ctrl + F pada keyboard secara bersamaan.

Penting!! Sebelum save/simpan template!!!saran'kalau bisa di Pratinjau atau Unduh lengkap template dulu.Ini dilakukan  untuk mengantisipasi kalau ada kejadian yang tidak di inginkan terhadap template Sobat.  

 

Diposting oleh Unknown
POSTING BERKAITAN

TEMPLATE DESIGN BY
m-template | by: bagas96