Membuat Menu pada blog

Pada entri ini saya akan membahas toturial cara membuat menu horizontal pada blog ini seperti pada menu blog saya ..hehehee....biasanya menambahkan menu kita perlu dengan cara rancangan atau hack template tapi kali ini tidak,,hanya dengan menambah gadget seperti yang ada pada elemen laman.... ya sudah tak perlu banyak basa basi,,langsung ke topik pembicaraan,,

lihat contoh menu tersebut : 

langkah - langkahnya sebagai berikut :

1.log in ke blogger,pilih design-->>page element
2.klik pada add gadget--->>pilih HTML/Javascript
3.kemudian copastekan  kode menu horizontal anda dibawah ini :

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>
4.kemudian save ,kemudian seret gadget HTML/Javascript ke bawah header,,,akhirnya  jrengggg.... :)

catatan : 

Untuk memasukkan link anda perlu mengedit bagian ini pada kode diatas:

  <li><a href="#" ><span>Link 1</span></a></li>

  <li><a href="#" ><span>Link 2</span></a></li>

  <li><a href="#" ><span>Link 3</span></a></li>

  <li><a href="#" ><span>Link 4</span></a></li>

  Pada tanda "#"   : ganti dengan Url link anda

  pada tanda Link 1,Link2,Link3 dan Link 4 : ganti dengan nama judul yang sesuai dengan keinginanmu

contoh :

 

<li><a href="http://agroyweb.blogspot.com" ><span>menu</span></a></li>

<li><a href="http://agroyweb.blogspot.com" ><span>contact</span></a></li>

 lihat contohnya pada tampilan menu blog saya

sekian dulu artikel ini ,,,terima kasih.................................!!!!