Cara Membuat SubMenu di Blogspot

Cara Membuat SubMenu di Blogspot | Menu Bar dan Sub Menu Bar di Blog | Sub Menu pada Template Bawaan Blog | Tips Mudah Membuat Menubar dan SubMenu di Blog. Trik bikin submenu ini membuat tampilan pada blog menjadi semakin cantik dan keren tentunya, biasanya penempatannya di bawah header.

Adapun langkah membuat submenu di bawah menu pada template blog adalah sebagai berikut :
1. log in dulu pada ID Blogspot kita
2. klik tata letak
3. pilih edit HTML
4. Copas kode berikut tepat diatas ]]></b:skin>

  /* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 875px;
height: 35px;
background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
color: #ffffff;
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#NavbarMenuleft {
width: 680px;
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: #ffffff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#FF6600;
color: #ffffff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
width: 150px;
color: #ffffff;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #FF6600;
color: #ffffff;
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. cari kode berikut

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>

 6. jika langkah no. 5 sudah ketemu kemudian copas kode berikut dibawah kode no. 5

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='#'>Menu-1</a>
<ul>
<li><a href='#'>SubMenu-1-1</a></li>
<li><a href='# '> SubMenu-1-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-2</a>
<ul>
<li><a href='#'>SubMenu-2-1</a></li>
<li><a href='#'> SubMenu-2-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-3</a>
<ul>
<li><a href='#'>SubMenu-3-1</a></li>
<li><a href='# '> SubMenu-3-2</a></li>
<li><a href='#'> SubMenu-3-3</a></li>
</ul>
</li>
<li><a href='#'>Menu-4 </a></li>
</ul>
</div>
</div> <!-- end navbar -->

7. Silahkan di simpan.

bila anda ternyata berhasil maka jangan lupa senyum kiri kanan sambil jingkrak sini sana hahaha....
artikel fafan ini mengulas postingan tentang Cara Membuat SubMenu di Blogspot

Backlink here..

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg4E00RpCxC45KElamGiO4IbvCFW-Xo0gs6ObWbap2MLkA166y01GRtT-aLRFRdMSbU89t2zoglV87s7UvknopqXV0D_RL1Bm7RO-3x-S6i-yFJv-SlR55P4ss5j2iMwGGN7tw0Tmq9nc/s1600/IMG_9238.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg4E00RpCxC45KElamGiO4IbvCFW-Xo0gs6ObWbap2MLkA166y01GRtT-aLRFRdMSbU89t2zoglV87s7UvknopqXV0D_RL1Bm7RO-3x-S6i-yFJv-SlR55P4ss5j2iMwGGN7tw0Tmq9nc/s1600/IMG_9238.gif" /></a></div> <a href="http://fafansuka.blogspot.com/2013/07/cara-membuat-submenu-di-blogspot.html"><b>Cara Membuat SubMenu di Blogspot</b></a> | Menu Bar dan Sub Menu Bar di Blog | Sub Menu pada Template Bawaan Blog | Tips Mudah Membuat Menubar dan SubMenu di Blog. Trik bikin submenu ini membuat tampilan pada blog menjadi semakin cantik dan keren tentunya, biasanya penempatannya di bawah header.<br /> <br /> Adapun langkah membuat submenu di bawah menu pada template blog adalah sebagai berikut :<br /> 1. log in dulu pada ID Blogspot kita<br /> 2. klik tata letak<br /> 3. pilih edit HTML<br /> 4. Copas kode berikut tepat diatas ]]></b:skin><br /> <br /> <i>  /* ----- NAVBAR MENU ----- */<br />#NavbarMenu {<br />width: 875px;<br />height: 35px;<br />background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;<br />color: #ffffff;<br />margin: 0 auto 0;<br />padding: 0;<br />font: bold 11px Arial, Tahoma, Verdana;<br />border-top: 1px solid #ffffff;<br />border-bottom: 1px solid #ffffff;<br />}<br />#NavbarMenuleft {<br />width: 680px;<br />float: left;<br />margin: 0;<br />padding: 0;<br />}<br />#nav {<br />margin: 0;<br />padding: 0;<br />}<br />#nav ul {<br />float: left;<br />list-style: none;<br />margin: 0;<br />padding: 0;<br />}<br />#nav li {<br />list-style: none;<br />margin: 0;<br />padding: 0;<br />}<br />#nav li a, #nav li a:link, #nav li a:visited {<br />color: #ffffff;<br />display: block;<br />text-transform: capitalize;<br />margin: 0;<br />padding: 9px 15px 8px;<br />font: normal 15px Georgia, Times New Roman;<br />}<br />#nav li a:hover, #nav li a:active {<br />background:#FF6600;<br />color: #ffffff;<br />margin: 0;<br />padding: 9px 15px 8px;<br />text-decoration: none;<br />}<br />#nav li li a, #nav li li a:link, #nav li li a:visited {<br />background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;<br />width: 150px;<br />color: #ffffff;<br />text-transform: lowercase;<br />float: none;<br />margin: 0;<br />padding: 7px 10px;<br />border-bottom: 1px solid #ffffff;<br />border-left: 1px solid #ffffff;<br />border-right: 1px solid #ffffff;<br />font: normal 14px Georgia, Times New Roman;<br />}<br />#nav li li a:hover, #nav li li a:active {<br />background: #FF6600;<br />color: #ffffff;<br />padding: 7px 10px;<br />}<br />#nav li {<br />float: left;<br />padding: 0;<br />}<br />#nav li ul {<br />z-index: 9999;<br />position: absolute;<br />left: -999em;<br />height: auto;<br />width: 170px;<br />margin: 0;<br />padding: 0;<br />}<br />#nav li ul a {<br />width: 140px;<br />}<br />#nav li ul ul {<br />margin: -32px 0 0 171px;<br />}<br />#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {<br />left: -999em;<br />}<br />#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 {<br />left: auto;<br />}<br />#nav li:hover, #nav li.sfhover {<br />position: static;<br />}</i><br /> <br /> 5. cari kode berikut<br /> <br /> <i><div id='header-wrapper'><br /><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /><b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/><br /></b:section><br /></div></i><br /> <br />  6. jika langkah no. 5 sudah ketemu kemudian copas kode berikut dibawah kode no. 5<br /> <br /> <i><div id='NavbarMenu'><br /><div id='NavbarMenuleft'><br /><ul id='nav'><br /><li><a expr:href='data:blog.homepageUrl'>Beranda</a></li><br /><li><a href='#'>Menu-1</a><br /><ul><br /><li><a href='#'>SubMenu-1-1</a></li><br /><li><a href='# '> SubMenu-1-2</a></li><br /></ul><br /></li><br /><li><a href='#'>Menu-2</a><br /><ul><br /><li><a href='#'>SubMenu-2-1</a></li><br /><li><a href='#'> SubMenu-2-2</a></li><br /></ul><br /></li><br /><li><a href='#'>Menu-3</a><br /><ul><br /><li><a href='#'>SubMenu-3-1</a></li><br /><li><a href='# '> SubMenu-3-2</a></li><br /><li><a href='#'> SubMenu-3-3</a></li><br /></ul><br /></li><br /><li><a href='#'>Menu-4 </a></li><br /></ul><br /></div><br /></div> <!-- end navbar --></i><br /> <br /> 7. Silahkan di simpan.<br /> <br /> bila anda ternyata berhasil maka jangan lupa senyum kiri kanan sambil jingkrak sini sana hahaha....<br /> artikel fafan ini mengulas postingan tentang <a href="http://fafansuka.blogspot.com/2013/07/cara-membuat-submenu-di-blogspot.html"><b>Cara Membuat SubMenu di Blogspot</b></a></div> <br/> Sumber: <a href='http://fafansuka.blogspot.com/2013/07/cara-membuat-submenu-di-blogspot.html'> Fafan Suka Blogging, Tutorial Blogger | Tips Trik Blog | Belajar Blogspot | Bisnis </a>