Cara Membuat Menu Bar Pada Blog

Cara Membuat Menu Bar Pada Blog ~ Selamat pagi menjelang siang sobat hehehe. nah tanpa basa basi lagi ya sobat soalnya capek gak tidur seharian {Woaw}, ok kali ini saya akan menjelaskan  Cara Membuat Menu Bar Pada Blog. Mau tau caranya? ayo langsung saja.

Bagaimana cara membuatnya? :

1. Log in / Masuk ke blog sobat
2. Pergi ke rancangan lalu click "Edit HTML"
3. Centang kotak "Expand Template Widget"
4. Cari code ]]></b:skin>. [Gunakan CTRL + F]
5. Copy code berikut dan pastekan diatas code ]]></b:skin>

#menubar{
width:900px;
height:32px;
background:#de360f;
float:center;
margin-bottom:10px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #FF0000;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ff0000;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #000000;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #000000;
color: #FF0000;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##FF0000;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}

6. Click simpan template
7. Selanjutnya pergi ke "Elemen Laman / Tata Letak"
8. Click "Add a gadget" lalu "HTML/JavaScript"
9. Pasangkan code berikut ke Gadget yang sobat tambahkan tadi

<div id='menubar'>
<ul>
<li><a href='URL Blog Sobat'>Home</a></li>
<li><a href='http://virtual-blogger.blogspot.com/'>Menu 1</a></li>
<li><a href='http://virtual-blogger.blogspot.com/'>Menu 2</a></li>
<li><a href='http://virtual-blogger.blogspot.com/'>Menu 3</a></li>
<li><a href='http://virtual-blogger.blogspot.com/'>Menu 4</a></li>
</ul>
</div>

10. Click "Simpan" dan lihat hasilnya.

Notice :
• Ganti tulisan berwarna "Putih" dengan link menuju blog sobat.
• Ganti tulisan berwarna "Hiaju" dengan link / url.
   Exp : Link =>  Label, Postingan, Halaman statis, dan lain sebagainya
• Ganti tulisan berwarna "Biru" dengan judul menubarnya.
   Exp : Judul => About, Facebook, Twitter, dan lain sebagainya.


Sekian dulu tips membuat menu bar pada blog. semoga bermanfaat ya sobat. and good luck.
Thank's By Admin Virtual Blogger.