Membuat Menu Navigasi

Awal gue blog, gue bingung gimana cara buat ne menu navigasi, uthak uthek cara ini itu, tapi tak memuaskan. Akhirnya tak lama gue nunggu, 1 minggunan deh, kelas gue dapat les blog di sekolah. Dari situ, gue tahu bagian mana yang bikin ga berhasil-berhasil. Langsung aja, disini gue juga pengen share ke temen-temen.

1. Carilah kode ]]></b:skin>
2. Setelah nemu 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 blogmu guys.
   #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. Lo udah, kalian cari </b:section> , cari yang bawah </b:section> tadi ada </div>  ( atas bawah) lo udah copast kode dibawah ini diantara </div> tadi
   
   

   <div id='NavbarMenu'>
   <div id='NavbarMenuleft'>
   <ul id='nav'>
   <li><a href='http://allfreetips4u.blogspot.com'>Home</a> </li>
   <li><a href='#'>Blogger Template</a>
   <ul>
           <li><a href='http://allfreetips4u.blogspot.com/search/label/2 column'>2 Column</a> </li>
           <li><a href='http://allfreetips4u.blogspot.com/search/label/3 column'>3 Column</a> </li>
           <li><a href='http://allfreetips4u.blogspot.com/search/label/4 column'>4 Column</a> </li> </ul> </li>
   <li><a href='#'>Blogging Trick</a> </li>
   <li><a href='#'>Forum</a>
   <ul>
          <li><a href='http://allfreetips4u.blogspot.com/search/label/Learn SEO'>Learn SEO</a> </li>
          <li><a href='http://allfreetips4u.blogspot.com/search/label/Adsense'>Adsense</a> </li>
          <li><a href='http://allfreetips4u.blogspot.com/search/label/Blog Monetize'>Blog Monetize</a> </li>
         <li><a href='http://allfreetips4u.blogspot.com/search/label/Link Exchange'>Link Exchange</a> </li>
   </ul> </li> </ul>
   </div> </div>
   

       

• Sekarang kalian perlu mengganti beberapa kode di atas agar sesuai dengan keinginan anda. Kode warna biru adalah url-link dan kode warna merahadalah anchor-text atau titel menu yang terkait dengan url-link tadi. Sebagai contoh menu Home. kalian menginginkan apabila menu ini diklik maka akan membawa kalain kepada halaman utama dari blog , maka dari itu rubahlah url-linknya dengan url blog . Berikutnya, menu Blogger Template. Kalian 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.
• Kalian bisa menambah menu maupun sub-menu dengan menambahkan kode seperti di atas. Sebaliknya kalain pun bisa menghilangkan menu dan sub-menu yang tidak kalian inginkan dengan menghapus kode di atas yang tidak diinginkan.
• Setelah itu jangan lupa untuk menyimpan pekerjaan  dan lihatlah hasilnya di blog .
• Jika  berhasil, tentunya blog kalian akan terlihat lebih menarik.