Cara membuat Menu Horisontal Di blog

0

Share

Klik Image untuk memperbesar gambar

  Cara 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.  

  Post by.Kang Andikwin

 Referensi

 publise modif : andikwin.blogspot.com