Alhamdulillah kita masih diberi nikamat sehat dan sempat Oleh Allah sehingga dengan sehat dan sempat saya dapat berposting kembali setelah postingan terakhir Kerjain Monitor Temen Dengan Screen Shaker
saat ini dapat berkembali dengan judul Cara Membuat SubMenu di Blogspot.
Membuat submenu bukanlah hal yang mudah tetapi setelah bertemu dengan postingan ini saya rasa hal ini akan terasa mudah dan tidak sedikitpun merasa sulit.
nah untuk mengetahui Cara Membuat SubMenu di Blogspot dapat anda ikuti langkah 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. lalu di simpat
mudah bukan??
SELAMAT MENCOBA!!
mudah bukan??
SELAMAT MENCOBA!!
