Nah, langsung aja ya masuk ke penjelasan bagaimana caranya memasang menu ini di blog anda. Seperti biasa anda perlu login ke www.blogger.com dan langsung menuju ke Edit HTML. Jangan lupa back-up dulu template anda. Setelah itu ikutilah langkah-langkah di bawah ini:

1. Carilah kode ]]></b:skin>
2.

Setelah menemukan kode di atas, letakkan kode di bawah ini di atas kode tersebut. Kode berwarna merah adalah lebar dari menu navigasi, rubahlah nilai px agar sesuai dengan lebar blog anda.

#NavbarMenu { background: #000; width: 874px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; 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 { background: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #000; color: #fff; 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; }
3.
Sebelum melanjutkan ke langkah berikutnya, anda perlu menentukan posisi menu navigasi yang diinginkan. Biasanya menu navigasi diletakkan di atas header atau di bawah header. Misalkan anda ingin memasangnya di atas header, maka anda harus mencari kode <div id='header-wrapper'>
4. Lalu letakkan kode di bawah ini persis di atas kode tadi

<div id='NavbarMenu'>

<div id='NavbarMenuleft'>

<ul id='nav'>

<li><a href='http://www.martinnio.co.cc/'>Home</a> </li>

<li><a href='#'>Blogger Template</a>

<ul>

<li><a href='http://www.martinnio.co.cc/'>2 Column</a> </li>

<li><a href='http://www.martinnio.co.cc/</a> </li>

<li><a href='http://www.martinnio.co.cc/</a> </li> </ul> </li>

<li><a href='#'>Blogging Trick</a> </li>

<li><a href='#'>Forum</a>

<ul>

<li><a href='http://www.martinnio.co.cc/'>Learn SEO</a> </li>

<li><a href='http://www.martinnio.co.cc/'>Adsense</a> </li>

<li><a href='http://www.martinnio.co.cc/'>Blog Monetize</a> </li>

<li><a href='http://www.martinnio.co.cc/'>Link Exchange</a> </li>

</ul> </li> </ul>

</div> </div>
5. Sekarang anda perlu mengganti beberapa kode di atas agar sesuai dengan keinginan anda. Kode warna biru adalah url-link dan kode warna merah adalah anchor-text atau titel menu yang terkait dengan url-link tadi. Sebagai contoh menu Home. Anda menginginkan apabila menu ini diklik maka akan membawa anda kepada halaman utama dari blog anda, maka dari itu rubahlah url-linknya dengan url blog anda. Berikutnya, menu Blogger Template. Anda ingin apabila menu ini diklik maka akan membawa atau menampilkan posting-posting yang mempunyai label blogger template. Maka, rubahlah linknya menjadi http://namabloganda.blogspot.com/search/label/blogger template.
6. Anda bisa menambah menu maupun sub-menu dengan menambahkan kode seperti di atas. Sebaliknya anda pun bisa menghilangkan menu dan sub-menu yang tidak anda inginkan dengan menghapus kode di atas yang tidak diinginkan.
7. Setelah itu jangan lupa untuk menyimpan pekerjaan anda dan lihatlah hasilnya di blog anda.
8. Jika anda berhasil, tentunya blog anda akan terlihat lebih menarik.

Update

1. Login dulu ke Blogger, lalu pilih menu Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Cari kode:

]]></b:skin>

4. Tepat diatasnya, ketikkan kode:

/* Navigasi Menu */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:#81BEF7; /* Warna latar belakang menu navigasi */
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover{
background:#5858FA; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}
/* Sub Navigasi Menu */
#subnavmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu subnavigasi. Sesuaikan dengan lebar blog anda */
background:#5858FA; /* Warna latar belakang menu navigasi */
float:left;
}
#subnavmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#subnavmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#subnavmenu ul li {
float: left;
display:inline;
}
#subnavmenu li a, #subnavmenu li a:link, #subnavmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:5px 5px 5px 5px;
font-size:10px; /* Ukuran teks */
}
#subnavmenu li a:hover {
text-decoration:underline;
}

5. Lalu cari kode yang mirip/mendekati:

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

6. Lalu dibawahnya, ketikkan kode:

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Baik Baik Sayang</a></li>
<li><a href='#'>Buka Hatimu</a></li>
<li><a href='#'>Sang Mantan</a></li>
<li><a href='#'>Separuh Jiwaku Pergi</a></li>
<li><a href='#'>Rasa Ini</a></li>
</ul>
</div>
<div id="subnavmenu">
<ul id="subnavmenu">
<li><a href="#">Wali</a></li>
<li><a href="#">Hijau Daun</a></li>
<li><a href="#">ST 12</a></li>
<li><a href="#">Ungu</a></li>
<li><a href="#">Nidji</a></li>
<li><a href="#">Vierra</a></li>
<li><a href="#">The Dance Company</a></li>
</ul>
</div>

Jangan lupa, Ganti link diatas dengan link yang anda inginkan. Anda bisa menambah ataupun mengurangi jumlah link dari menu tersebut.

7. Kalau masih ragu-ragu, sebaiknya Klik Pratinjau.

8. Kalau sudah yakin, Klik Simpan Template.