Memasang Menu Navigasi di Blog

Pada kesempatan posting saya hari ini saya akan share bagaimana membuat sebuah menu navigasi yang saya dapat dari teman saya, hehehe
Sebagai contohnya ada di atas blog saya ini yang dapat menampilkan sub menu jika mouse kearah menu navigasinya.

Tapi yang ada home nya itu loh sob bukan gambar thumbnail paling atas, Oke ini dia caranya > >

1. Sobat pastinya punyai blog kan, tips ini untuk blogspot kalau di blog lain kurang tahu. hehehe

2. Pilih Rancangan

3. Pilih edit html

4. Lalu sobat cari kode ]]></b:skin> Agar lebih cepat dan efisien sobat cari saja melalui ctrl + f dan copy paste kode tadi

5. Copy kode ini tepat diatas ]]></b:skin>

#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; }
#navbar-iframe {
height:0px;

6. Lalu copy lagi kode dibawah ini tepat diatas kode <div id='content-wrapper'>

<div class='span-24'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://salemharp.blogspot.com/'>Home</a> </li>
<li><a href='#'>Software</a>
<ul>
        <li><a href='http://www.salemharp.blogspot.com/2011/12/aimp-251-full-version_11.html'>AIMP</a> </li>
<li><a href='http://salemharp.blogspot.com/2011/12/download-windows-7-loader-v197.html'>Windows Loader</a> </li>
        <li><a href='http://www.salemharp.blogspot.com/2011/12/power-iso-with-keygen.html'>Power ISO</a> </li>
        <li><a href='http://www.salemharp.blogspot.com/2011/12/tune-up-utilities-2011-with-crack.html'>Tune Up</a> </li>
         </ul> </li>
     
<li><a href='#'>Tips dan Trik</a>
<ul>
        <li><a href='http://www.salemharp.blogspot.com/2011/12/cara-memasang-password-di-flashdisk.html'>Tips Seputar Flashdisk</a> </li>
        <li><a href='http://salemharp.blogspot.com/2011/12/memasang-widget-naruto-fight.html'>Tips Memasang Animasi</a> </li>
<li><a href='http://www.salemharp.blogspot.com/2011/12/cara-memasang-password-di-flashdisk.html'>Tips Seputar Flashdisk</a> </li>
</ul> </li>
<li><a href='#'>Informasi</a>
<ul>
        <li><a href='http://www.salemharp.blogspot.com/2011/12/jenis-makanan-yang-dapat-memperkuat.html'>Informasi Makanan</a></li>
        <li><a href='http://www.salemharp.blogspot.com/2011/12/minuman-khas-asli-indonesia.html'>Informasi Minuman</a> </li>
        <li><a href='http://www.salemharp.blogspot.com/2011/11/tanaman-anti-nyamuk_17.html'>Informasi Tanaman</a> </li>
<li><a href='http://www.salemharp.blogspot.com/2011/11/cara-menggoda-bayi-agar-tertawa_17.html'>Informasi Bayi</a> </li>
<li><a href='http://www.salemharp.blogspot.com/2011/11/jangan-tidur-berlebihan-berbahaya.html'>Informasi Tidur</a> </li>
<li><a href='http://www.salemharp.blogspot.com/2011/01/bahayanya-jika-menahan-bersin.html'>Informasi Bersin</a> </li>
<li><a href='http://salemharp.blogspot.com/2011/12/manfaat-dari-susu-kedelai.html'>Informasi Susu Kedelai</a></li>
<li><a href='http://salemharp.blogspot.com/2011/12/keanehan-di-microsoft.html'>Informasi Microsoft</a></li>
         </ul> </li>

<li><a href='#'>Perihal Salemharp</a>
<ul>
        <li><a href='http://www.salemharp.blogspot.com/p/tentang-saya.html'>Tentang Saya</a></li>
<li><a href='http://www.salemharp.blogspot.com/p/renungan-untuk-jadi-lebih-baik-lagi.html'>Bahan Renungan</a></li>
</ul></li>
<li><a href='#'>Games</a>
<ul>
        <li><a href='http://www.salemharp.blogspot.com/2011/12/scrabble.html'>Scrabble</a></li>
</ul></li>
<li><a href='#'>Martial Arts</a>
<ul>
        <li><a href='http://salemharp.blogspot.com/2011/01/1.html'>Pedoman Pencak Silat</a></li>
<li><a href='http://salemharp.blogspot.com/2011/12/satria-muda-indonesia.html'>SMI</a></li>
</ul></li>
<li><a href='#'>Funny Story</a>
<ul>
        <li><a href='http://salemharp.blogspot.com/2011/12/iklan-kartu-as-terbaru-yang-lebay-lucu.html'>Iklan Provider</a></li>
</ul></li>
<li><a href='#'>Komputer</a>
<ul>
        <li><a href='http://salemharp.blogspot.com/2011/12/fungsi-kombinasi-keyboard-pada-komputer.html'>Kombinasi Keyboard</a></li>
<li><a href='http://salemharp.blogspot.com/2011/12/tips-merawat-laptop.html'>Merawat Laptop</a></li>
<li><a href='http://salemharp.blogspot.com/2011/12/ubah-bahasa-windows-xp.html'>Bahasa Windows</a></li>
</ul></li>
</ul>
</div>
</div>

Oya link yang ada diatas bisa sobat ganti koq, kode itu merupakan contoh saja selanjutnya sobat pikirkan sendiri ya??? hehehehe
Semoga Berhasil :)