Cara Membuat Menu NAVIGASI Dengan SUB Menu | Tips Blogspot | Cara Mudah Membuat Menu NAVIGASI Di - BlOG

Cara Membuat Menu NAVIGASI Dengan SUB - MENU | Tips Blogspot | Cara Mudah Membuat Menu NAVIGASI Di BlOgspOt - Dengan menu navigasi blog akan terlihat lebih menarik bukan? Selain itu tentunya bagi si pemilik admin blog juga lebih mudah mengorganisir konten dari blognya. Begitupun sebaliknya buat pengunjung blog sobat, menu seperti ini mempermudah pengunjung dalam mengeksplor isi blog sobat. Pada saat saya surfing, saya menemukan beberapa menu navigasi dengan sub-menu. Ada yang menggunakan javascript dengan tampilan dan efek yang sangat menarik, namun saya tidak akan membahasnya kali ini, mungkin di lain waktu saya akan posting tentang hal ini. Yang sekarang akan saya bahas adalah cara yang paling mudah dan tidak menggunakan javascript. langsung aja ya masuk ke penjelasan bagaimana caranya memasang menu ini di blog sobat,..

1. login ke blogger - Klik Edit HTML.


2. Back-up dulu template


3. Carilah kode ]]></b:skin>


4. 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 .
   #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; }


5. Sebelum lanjut, sobat perlu menentukan posisi menu navigasi. Misal ingin pasang di atas header, cari kode <div id='header-wrapper'>


6. Lalu letakkan kode di bawah ini persis di atas kode tadi.
   <div id='NavbarMenu'>
   <div id='NavbarMenuleft'>
   <ul id='nav'>
   <li><a href='http://kolombloggratis.blogspot.com'>Home</a> </li>
   <li><a href='#'>Blogger Template</a>
   <ul>
           <li><a href='http://kolombloggratis.blogspot.com/search/label/2 column'>2 Column</a> </li>
           <li><a href='http://kolombloggratis.blogspot.com/search/label/3 column'>3 Column</a> </li>
           <li><a href='http://kolombloggratis.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://kolombloggratis.blogspot.com/search/label/Learn SEO'>Learn SEO</a> </li>
          <li><a href='http://kolombloggratis.blogspot.com/search/label/Adsense'>Adsense</a> </li>
          <li><a href='http://kolombloggratis.blogspot.com/search/label/Blog Monetize'>Blog Monetize</a> </li>
         <li><a href='http://kolombloggratis.blogspot.com/search/label/Link Exchange'>Link Exchange</a> </li>
   </ul> </li> </ul>
   </div> </div>


7. Sekarang sobat perlu mengganti beberapa kode di atas agar sesuai dengan keinginan sobat. Kode warna Merah adalah url-link dan kode warna biru adalah anchor-text atau titel menu yang terkait.


8. Contoh menu Home. adalah halaman utama dari blog sobat, maka dari itu rubahlah url-linknya dengan url blog sobat.


9. Bila ingin menu ini diklik maka akan membawa atau menampilkan posting yang mempunyai label Software. rubahlah link menjadi http://blogKU.com/search/label/software


10. Sobat bisa menambah menu maupun sub-menu dan menghilangkan menu maupun sub-menu dengan menambahkan atau menghilangkan kode seperti di atas - Klik Simpan - selesei sobat. Jangan lupa tambahkan jaringan teman di Kolom Blog GRATIS.