Membuat Menu Navigasi dan Submenu pada Blog

Untuk membuat menu navigasi seperti gambar di bawah ini dapat dilakukan dengan cara sebagai berikut:

Klik Rancangan -> Edit HTML

Tekan CTRL+F lalu carilah teks

]]></b:skin>

Kemudian ganti dengan kode berikut:

#NavbarMenu { 
width: 980px;
height: 35px;
background:#fafaff
repeat-x top;
color: #9fc5e8
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#navi {
margin: 0;
padding: 0;
}
#navi ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#navi li {
list-style: none;
margin: 0;
padding: 0;
}
#navi li a, #navi li a:link, #navi li a:visited {
color: #fafaff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Arial, Georgia, Times New Roman;
}
#navi li a:hover, #navi li a:active {
background:#fafaff;
color: #3d85c6;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#navi li li a, #navi li li a:link, #navi li li a:visited {
background: #3d85c6
repeat-x top;
width: 200px;
color: #fafaff;
text-transform: capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-top: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 14px Arial, Georgia, Times New Roman;
}

#navi li li a:hover, #navi li li a:active {
background: #fafaff;
color: #3d85c6;
padding: 7px 10px;
}
#navi li {
float: left;
padding: 0;
}
#navi li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#navi li ul a {
width: 140px;
}
#navi li ul ul {
margin: -32px 0 0 90px;
}
#navi li:hover ul ul, #navi li:hover ul ul ul, #navi li.sfhover ul ul, #navi li.sfhover ul ul ul {
left: -999em;
}
#navi li:hover ul, #navi li li:hover ul, #navi li li li:hover ul, #navi li.sfhover ul, #navi li li.sfhover ul, #navi li li li.sfhover ul {
left: auto;
}
#navi li:hover, #navi li.sfhover {
position: static;
}]]></b:skin>

Simpan  template lalu pindah ke tab Elemen Laman, klik Tambah Gadget yang terdapat dibawah header.

kemudian pilih HTML/JavaScript

Lalu isi bagian konten dengan kode di bawah ini:

<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='navi'>
<li><a href='http://halamanteknologi.blogspot.com'>Beranda</a></li>


<li><a href='http://halamanteknologi.blogspot.com/search/label/server'>Server</a>
<ul>
<li><a href='http://halamanteknologi.blogspot.com/search/label/linux'>Linux</a>
<ul>
<li><a href='http://halamanteknologi.blogspot.com/search/label/centos'>CentOS</a></li>
<li><a href='http://halamanteknologi.blogspot.com/search/label/debian'>Debian</a></li>
</ul>
</li>
<li><a href='http://halamanteknologi.blogspot.com/search/label/freebsd'>FreeBSD</a></li>
<li><a href='http://halamanteknologi.blogspot.com/search/label/mikrotik'>Mikrotik</a></li>
<li><a href='http://halamanteknologi.blogspot.com/search/label/windows'>Windows</a></li>
</ul></li>

<li><a href='http://halamanteknologi.blogspot.com/search/label/aplikasi'>Program Aplikasi</a>
<ul>
<li><a href='http://halamanteknologi.blogspot.com/search/label/perkantoran'>Perkantoran</a></li>
<li><a href='http://halamanteknologi.blogspot.com/search/label/grafis'>Grafis</a></li>
<li><a href='http://halamanteknologi.blogspot.com/search/label/animasi'>Animasi</a></li>
</ul>
</li>

<li><a href='http://halamanteknologi.blogspot.com/search/label/perangkat keras'>Perangkat Keras</a>
<ul>
<li><a href='http://halamanteknologi.blogspot.com/search/label/informasi'>Informasi</a></li>
<li><a href='http://halamanteknologi.blogspot.com/search/label/diagnosis'>Diagnosis</a></li>
<li><a href='http://halamanteknologi.blogspot.com/search/label/reparasi'>Reparasi</a></li>
</ul>

</li>
<li><a href='http://halamanteknologi.blogspot.com/search/label/serba-serbi'>Serba-serbi</a></li>
</ul></div>

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