Tutorial Membuat Menu Bar di Blog

Cara Membuat Menu Bar di Blog

Cara Membuat Menu Bar di Blog

Membuat menu bukanlah hal yang mudah tetapi dengan postingan ini saya rasa hal ini akan terasa mudah dan tidak menjadi hal sulit. Bagaimana cara membuatnya?
Langsung saja anda ikuti langkah-langkah berikut :

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>
-------------------------------------------
#navbarmenu{width:930px; float:left; font-size:12px; color:#FFF; font-weight:bold; margin:0 auto; padding:0 auto} #nav{margin:0; padding:0} #nav ul{float:left; list-style:none; margin:0; padding:0} #nav li{list-style:none; margin:0; padding:0; background:none} #nav li a, #nav li a:link, #nav li a:visited{color:#992211; display:block; font-weight:normal; text-transform:normal; margin:0; padding:5px 15px 5px} #nav li a:hover{background:#4a4d4c; color:#FFF; margin:0; -moz-border-radius:8px; padding:5px 15px 5px; text-decoration:none} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#FFF; -moz-border-radius:8px; width:150px; color:#992211; font-weight:normal; text-transform:normal; float:none; margin:0; padding:5px 10px 5px 15px; border-bottom:1px solid #4a4d4c; border-left:1px solid #4a4d4c; border-right:1px solid #4a4d4c} #nav li li a:hover{background: #4a4d4c; color:#FFF; padding:5px 10px 5px 15px} #nav li{float:left; padding:0} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0} #nav li ul a{width:140px} #nav li ul ul{margin:-25px 0 0 171px} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto} #nav li:hover, #nav li.sfhover{position:static}

------------------------------------

Lalu Simpan Tempate.

7. Selanjutnya Masuk Tata Letak > Tambahkan Gadget pilih posisi yg paling atas >
lalu pilih HTML/JavaScript . 
8. Pasang kode di bawah ini pada konten java script . judul kosongkan saja.

-----------------------------
<div id='menu'>
<div id='menu-wrap'>
<div id='navbarmenu'>
<ul id='nav'>
<li><a href="http://amir-jrg-master.bogspot.com">Menu 1</a></li>
<li><a href="http://amir-jrg-master.bogspot.com">Menu 2</a></li>

<li><a href="http://amir-jrg-master.bogspot.com">Menu 3</a></li>

<li><a href="http://amir-jrg-master.bogspot.com">Menu 4</a></li>

<li><a href="http://amir-jrg-master.bogspot.com">Menu 5</a></li>

<li><a href="http://amir-jrg-master.bogspot.com">Menu 6</a></li>

<li><a href="http://amir-jrg-master.bogspot.com">Menu 7</a></li>

<li><a href="http://amir-jrg-master.bogspot.com">Menu 8</a></li>

<li><a href="http://amir-jrg-master.bogspot.com">Menu 9</a></li>

<li><a href="http://amir-jrg-master.bogspot.com">Menu 10</a></li>

</ul>
</div>

--------------------------------------
9. Simpan  dan lihat hasilnya. Lihat Blog

Keterangan :
Ganti tulisan http://amir-jrg-master.bogspot.com dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya.
Ganti tulisan berwarna Ungu dengan tulisan judul menubar tersebut, seperti: Home, Menu, Tutorial atau lainnya. 

Untuk mengurangi Total menu bar cukup hapus pada:

<li><a href="http://amir-jrg-master.bogspot.com">Menu 2-9</a></li>

Untuk menambah Total menu bar cukup copas

<li><a href="http://amir-jrg-master.bogspot.com">Menu 1</a></li>

dan paste tambahkan posisi dibawahnya

<li><a href="http://amir-jrg-master.bogspot.com">Menu 1</a></li>

Ini semua di lakukan pada Edit Html/Javascript yg tadi sobat buat pada Tambahkan gadget.