Tutorial Membuat Tab Menu Bar Plus SubMenu di Blog

         ok gan ane mau ngeshare cara buat menubar beserta sub menunya dengan mudah diblog ,, langsung saja gan  ga usah banyak bacot,, simak caranya dibawah ini :

1. Silahkan masuk ke akun Blogger agan.

2. Klik halaman "Template" download template lengkap untuk berjaga-jaga terjadi hal-hal yang tidak di inginkan.

3. Centang "Expand Template Widget". 

4. Terus silahkan cari kode ]]></b:skin> denan menggunakan Ctrl + F.pada laman script

5. Simpan kode script di bawah ini tepat di atas kode ]]></b:skin>

#menubar{
border-bottom:4px solid #ff0000;
width:1349px;
height:32px;
background:#000000;
float:center;
margin-bottom:3px;
}
#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{
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  {
background: #ff0000;
color: #fff;
text-decoration:none;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #ff0000;
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: #ffffff;
}
#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. Untuk seterusnya silahkan cari kode <div class='main-outer'>  
7. Simpan kode script di bawah ini tepat di atas kode <div class='main-outer'>
 

 <div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blogmania96.blogspot.com/search/label/Info'>Info</a></li>
<li><a href='http://blogmania96.blogspot.com/search/label/Tutorial'>Tutorial</a></li>
<li><a href='http://blogmania96.blogspot.com/search/label/Download'>Download</a>
<ul>
<li><a href='http://blogmania96.blogspot.com/search/label/Software'>Software</a></li>
<li><a href='http://blogmania96.blogspot.com/search/label/Film'>Film</a></li>
<li><a href='http://blogmania96.blogspot.com/search/label/Game'>Game</a></li>
<li><a href='http://blogmania96.blogspot.com/search/label/Musik'>Musik</a></li>
</ul>
</li>
</ul>
</div>

8. Yang terakhir simpan Template,  Enjoy........