Cara Membuat Menubar Dengan Sub Menu.

Assalamualaikum Sobat,

Naaah Cara Membuat Menubar Dengan Sub Menu dibawahnya sudah ane utak atik akhirnya bisa dengan lancar (maklum Newbie), banyak bloger yang sudah pada paham, nah saatnya ane yang baru paham juga berbagi buat bloger yang belum paham.

Contoh Gbr : Klik gbr untuk memperbesar.






Langkah selanjutnya :

1. Buka & Login di blog sobat.
2. Masuk ke Rancangan trus ke Edit HTML (jangan lupa centang/ceklist Expand Template Widget)
3. Tekan F3 atau Ctrl+F, setelah keluar kolom pencari script HTML masukkan script seperti ini ]]><b:skin>
4. Setelah ketemu script tersebut, Copy Script dibawah ini :
----------------------------------------------------------------------------------------------------------


#NavbarMenu {
width: 1000;
height: 40px;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJm3UruZOGyCEWh-pxpd3nY4cs0bCKYHHJDhjy1PFkcYpegEDZw44Z5pu3lpz2P9QHm_uVcvVUqYCXznDBcXjcpDjB-U3V836SQPh_MnqG6seeVYECvqaHUfXW_rvy7OTq1h2PoNGqEEw1/s1600/bg4.jpg) repeat-x top;
color: # 7f6000
margin: 0 auto 0;
padding: 0;
font: bold 12px Verdana, Verdana, Verdana;
border-top: 1px solid # 93c47d;
border-bottom: 1px solid # 93c47d;
}
#NavbarMenuleft {
width: 1000;
float: left;
margin: 0;
padding: 0;
}
#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;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #1f1fd2;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Century Gothic, Century Gothic, Century Gothic;
}
#nav li a:hover, #nav li a:active {
background:#f1c232;
color: #5252f0;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL08GbdGIpKFLL5fbjE0YxGE6HQii-sChFwVfQof1ps6rDHiyJH1uzX1RtYPX3mayP49CWSrBGGvZ6TVVYQ1YZv5G-AHtyoY0-6Px0efbTK8Fpv7uZ7oAHPQrcm3nibKF9RQHWq8b8-VCZ/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: normal;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 11px Verdana, Verdana, Verdana;
}
#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#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: -32px 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;
}

----------------------------------------------------------------------------------------------------------
5. Setelah script di copy, pastekan tepat diatas code ]]><b:skin> selesai tahap ke.1.
6. Setelah itu cari script ini </b:section>

7. Jika sudah ketemu, Copy script dibawah ini dulu

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

</div><div id='NavbarMenu'>

<div id='NavbarMenuleft'>

<ul id='nav'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href=http://url.profil blogspot.com'>Profil</a> </li>

<li><a href='http://nama.blogspot.com'>Menu 1</a>

<ul>

<li><a href='http://nama.blogspot.com'>Menu 1.a</a></li>

<li><a href='http://nama.blogspot.com'>Menu 1.b</a></li>

</ul>

</li>

<li><a>Menu 2</a>

<ul>

<li><a href='http://nama.blogspot.com'>Menu 2.a</a></li>

<li><a href='http://nama.blogspot.com'>Menu 2.b</a></li>

</ul>

</li>

</ul>

</div>

</div> <!-- end navbar -->

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

8. Paste kan tepat dibawah code </b:section>

9. Ganti tulisan berwana merah dengan nama blog sobat dan ganti warna biru dengan nama menu yang sobat inginkan.

10. Klik Pratinjau, jika berhasil klik simpan template widget. Selesai tahap 2.

11. Jangan Lupa Klik G+ atau follow untuk jadi Sahabat dan ane akan backlink sobat segera.

12. Semoga Bermanfaat.^_^

Wassalam.