DON'T LIKE ME

Cara Membuat SubMenu di Blogger

Cara Membuat SubMenu di Blogger


Silahkan lihat dulu hasilnya di sini.
Untuk membuat submenu semacam itu, silahkan ikuti langkah-langkah berikut ini:
1. Masuk ke Blogger
2. Klik Tata Letak
3. Klik Edit HTML
4. Cari kode: ]]></b:skin>
5. Tambahkan kode berikut ini di atas kode yang tadi (no. 4)

/* ----- 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;
}
6. Kemudian, cari kode ini:
<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>
7. Tambahkan kode berikut ini di bawah kode no. 6
<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 -->
8. Simpan

Selamat mencoba

By : Bang Udin
----------------------------------------------------------------------------------
Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel
----------------------------------------------------------------------------------
Postingan Baru :
TERIMAKASIH SUDAH BERKOMENTAR


Comments
3 Comments

3 komentar:

ncek wawat mengatakan... Reply To This Comment

Bang udin Tutorialnya kepanjangan....ada yang rada pendek ngk bang udin tanks..

SARWINDA mengatakan... Reply To This Comment

wah mantap banget...
saya boleh nyoba ne...
makasih banyak bang udin.

Teha94 mengatakan... Reply To This Comment

makasih infonya,...
langsung saya coba ne bang udin...

Posting Komentar