Cara Membuat Menu Atau Submenu di blog

Sering kali kita jumpai sebuah blog dan blog itu mempunyai menu, nahhh kita juga ingin kan memiliki menu seperti itu. mungkin bagi yg sudah mengerti itu terbilang mudah tapi untuk para newbie mngkin itu terbilang suit dan agak ribet untuk membuatnya. baiklah kita mulai saja langsung tutorialnya.

1. Dalam blogger dasbor, klik Layout

2. lalu klik tambah widget/Add a Gadget

3. Pilih HTML/JavaScript

4. Isi kolom Content, dengan code di bawah ini

<div id='menubar'>
<ul id='menus'>
<li>
<a href='#'>nama menu</a>
</li>
<li>
<a href='#'>nama menu</a>
</li>
<li>
<a href='#'>nama menu</a>
</li>
<li>
<a href='#'>nama menu</a>
<ul>
<li><a href='#'>nama submenu</a></li>
<li><a href='#'>nama submenu</a></li>
<li><a href='#'>nama submenu</a></li>
</ul>
</li>
</ul>
</div>

5. Ganti nama menu dengan nama menu yg anda inginkan

6. ganti nama submenu dengan nama submenu yg anda inginkan
7. Ganti # dengan link/URL anda
8. klik simpan
9. pindahkan/drag widged tadi ke posisi yg anda inginkan
10. Lalu klik publikasikan

11. sekarang klik Template

12. klik Edit HTML

13. klik Proceed

14. Cari teks seperti di bawah ini:
]]></b:skin>

15. Copy teks di bawah ini, lalu pastekan di atas ]]></b:skin>

/*-------- Begin Drop Down Menu -------*/

#menubar {
background: #8E8E8E;
width: 840px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:1px solid #B2FFFF;
height:35px;
}

#menus {
margin: 0;
padding: 0;
}

#menus ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#menus li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #1A6680;
border-right:1px solid #1A6680;
height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
color: #FFF;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

#menus li a:hover, #menus li a:active {
background: #130000; /* Menu hover */
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}

#menus li {
float: left;
padding: 0;
}

#menus li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}

#menus li ul a {
width: 140px;
}

#menus li ul ul {
margin: -25px 0 0 160px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
left: -999em;
}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
left: auto;
}

#menus li:hover, #menus li.sfhover {
position: static;
}

#menus li li a, #menus li li a:link, #menus li li a:visited {
background: #B3B3B3; /* drop down background color */
width: 120px;
color: #FFF;
display: block;
font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}

#menus li li a:hover, #menusli li a:active {
background: #130000; /* Drop down hover */
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

/*-------- End Drop Down Menu -------*/

16. klik Save Template, kemudian selesai..

Terima kasih atas kunjungannya semoga bermanfaat :)
*jangan lupa untuk komentar