Banyak sobat blogger yang bertanya mengenai cara menambahkan navbar menu pada template yang tidak ada navbar menunya. Bahkan tidak jarang diantara mereka ada yang meminta dikirimi email untuk penjelasannya. Bukannya apa-apa, bukannya saya tidak mau memberikan penjelasan mengenai hal ini, tapi karena script-nya yang panjang dan membutuhkan penjelasan yang memadai, membuat saya selalu mengurungkan untuk mempostingnya. Namun akhirnya, demi memenuhi keinginan para sobat blogger tadi, saya pun mempostingnya juga.

Ada dua bentuk navbar menu, yaitu: navbar menu biasa dan navbar menu droftdown atau navbar menu yang memiliki sub-sub menu (children) di bawahnya. Navbar menu droftdown inipun terbagi dua: ada yang berbentuk animasi, seperti navbar menu pada blog SC Community, dan ada pula yang biasa (non-animasi), seperti navbar menu pada blog ini. Nah, pada tulisan kali ini saya akan membahas cara menambahkan navbar menu droftdown (dikenal juga dengan istilah Category menu) yang non-animasi kedalam template blog.

Langkah-langkah untuk menambahkan navbar menu ini adalah sebagai berikut:

• Login ke akun Blogger kamu.
• Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
• Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
• Kopikan script CSS berikut (gunakan Control A):

  /* Category menu*/
  #catmenucontainer {
   height:34px;
   background: url(link gambar latar) repeat-x;
   display:block;
   padding: 0px 0px 0px 0px;
   font: 12px Tahoma,Century gothic,verdana, Arial, sans-serif;
   font-weight:normal;
   text-transform:title;
   }
   
  #catmenu {
   margin: 0px 0px 0px 0px;
   padding: 0px 15px;
   list-style: none;
   height:33px;
   }
  
  #catmenu ul {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px;
   list-style: none;
   height:33px;
   }
  
  #catmenu a {
   color:#ffffff;
   display: block;
   font-weight: normal;
     padding: 10px 15px 9px 15px;
   }
   
  #catmenu a:hover {
   color:#ffffff;
   display: block;
   text-decoration: none;
   font-weight: bold;
   background:#999999;
   }
  
  #catmenu li {
   float: left;
   margin: 0px 0px;
   padding: 0px 0px;
   }
   
  #catmenu li li {
   float: left;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px;
   width: 130px;
   }
   
  #catmenu li li a, #catmenu  li li a:link, #catmenu  li li a:visited {
   background: url(link gambar latar) repeat-x;
   width: 130px;
   float: none;
   margin: 0px 0px;
   padding: 7px 10px 7px 10px;
   color:#ffffff;
   font-weight:normal;
   }
  
  #catmenu li li a:hover, #catmenu  li li a:active {
   background:#999999;
   color:#ffffff;
   font-weight:bold;
   }
  
  #catmenu li ul {
   position: absolute;
   left: -999em;
   z-index:200;
   background: url("") bottom;
   width:170px;
   }
  
  #catmenu li:hover ul {
   left: auto;
   display: block;
   }
   
  #catmenu li:hover ul, #catmenu li.sfhover ul {
   left: auto;
   }
  

  Pada script di atas disetting sebagai berikut (lihat yang dicetak tebal):
  * Gambar latar (background:url) : belum ditentukan
  * Warna huruf : putih (#ffffff)
  * Warna latar link hover : abu gelap (#999999)
  * Padding menu utama : 10px 15px 9px 15px
  * Lebar submenu (children) : 130px
  * Padding submenu (children) : 7px 10px 7px 10px
  Kamu dapat mengubah settingan tersebut disesuaikan dengan template blog kamu. Untuk memilih gambar latar (background: url), kamu bisa memilihnya pada Catatan tambahan di akhir tulisan ini. Atau jika tidak ingin memakainya, hapus kalimat link gambar latar pada perintah background: url(link gambar latar).
• Letakkan script tersebut di atas kode ]]></b:skin>.
  Untuk memudahkan pencarian, tekan Control F atau F3.
• Selanjutnya kopikan script berikut:

  <!-- Catmenucontainer -->
  <div id='catmenucontainer'>
  <div id='catmenu'>
    <ul>
   <li><a expr:href='data:blog.homepageUrl' title='Halaman Muka'>Home</a>
     </li>
   
   <li><a href='' title='Menu 1'>Menu 1</a>
        <ul class='children'>
       <li><a href='Link URL' title='Submenu 1.1'>Submenu 1.1</a></li>
       <li><a href='Link URL' title='Submenu 1.2'>Submenu 1.2</a></li>
       <li><a href='Link URL' title='Submenu 1.3'>Submenu 1.3</a></li>
       <li><a href='Link URL' title='Submenu 1.4'>Submenu 1.4</a></li>
       <li><a href='Link URL' title='Submenu 1.5'>Submenu 1.5</a></li>
     </ul>
      </li>
   
   <li><a href='' title='Menu 2'>Menu 2</a>
        <ul class='children'>
       <li><a href='Link URL' title='Submenu 2.1'>Submenu 2.1</a></li>
       <li><a href='Link URL' title='Submenu 2.2'>Submenu 2.2</a></li>
       <li><a href='Link URL' title='Submenu 2.3'>Submenu 2.3</a></li>
       <li><a href='Link URL' title='Submenu 2.4'>Submenu 2.4</a></li>
       <li><a href='Link URL' title='Submenu 2.5'>Submenu 2.5</a></li>
     </ul>
      </li>
  
   <li><a href='' title='Menu 3'>Menu 3</a>
        <ul class='children'>
       <li><a href='Link URL' title='Submenu 3.1'>Submenu 3.1</a></li>
       <li><a href='Link URL' title='Submenu 3.2'>Submenu 3.2</a></li>
       <li><a href='Link URL' title='Submenu 3.3'>Submenu 3.3</a></li>
       <li><a href='Link URL' title='Submenu 3.4'>Submenu 3.4</a></li>
       <li><a href='Link URL' title='Submenu 3.5'>Submenu 3.5</a></li>
     </ul>
      </li>
      
   <li><a href='' title='Menu 4'>Menu 4</a>
        <ul class='children'>
       <li><a href='Link URL' title='Submenu 4.1'>Submenu 4.1</a></li>
       <li><a href='Link URL' title='Submenu 4.2'>Submenu 4.2</a></li>
       <li><a href='Link URL' title='Submenu 4.3'>Submenu 4.3</a></li>
       <li><a href='Link URL' title='Submenu 4.4'>Submenu 4.4</a></li>
       <li><a href='Link URL' title='Submenu 4.5'>Submenu 4.5</a></li>
     </ul>
      </li>
  
   <li><a href='' title='Menu 5'>Menu 5</a>
        <ul class='children'>
       <li><a href='Link URL' title='Submenu 5.1'>Submenu 5.1</a></li>
       <li><a href='Link URL' title='Submenu 5.2'>Submenu 5.2</a></li>
       <li><a href='Link URL' title='Submenu 5.3'>Submenu 5.3</a></li>
       <li><a href='Link URL' title='Submenu 5.4'>Submenu 5.4</a></li>
       <li><a href='Link URL' title='Submenu 5.5'>Submenu 5.5</a></li>
     </ul>
      </li>
   
    </ul>
  </div>  
  </div>
  <!-- /Catmenucontainer -->
  

  Pada huruf yang dicetak tebal, gantilah sesuai dengan link dan menu/submenu yang kamu inginkan. Untuk setiap judul (title) menu/submenu, dapat kamu kosongkan dengan cara menghapus Menu x atau Submenu x.x-nya. Dan jika kamu tidak akan menggunakan sub-sub menu (children menu), hapuslah <ul class='children'> sampai dengan penutupnya (</ul>).
• Letakkan script tersebut di bawah kode <body>, jika ingin diletakkan di atas, atau di bawah kode <div id='header'>, jika ingin diletakkan di bawah header.
  Karena setiap template berbeda-beda, bisa juga diletakkan di bawah <div id='header-wrapper'>, jika ingin diletakkan di bawah header, tepatnya di bawah penutup widget id='Header1' (</b:section>).
• Lakukan Pratinjau, jika sudah OK, Save hasil kerjaan kamu dan ucapkan Alhamdulillah.....

Nah, cukup ribet kan? OK coy, selamat mencoba....

Catatan tambahan:

Berikut adalah gambar latar yang bisa kamu pilih:

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-biru1.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-biru2.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-hijau1.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-hijau2.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-merah1.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-merah2.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-pink1.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-pink2.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-ungu1.gif

URL: http://s563.photobucket.com/albums/ss76/peace_enes/cm-ungu2.gif

Kopikan URL-nya lalu paste di bagian link gambar latar.
Supaya warna latar link hover sesuai dengan gambar yang kamu pilih (tidak abu gelap), ubah saja kode background:#999999; pada #catmenu a:hover dan #catmenu li li a:hover dengan warna yang sesuai (untuk mencari warna bisa kamu kunjungi situs HTML Color Codes), atau ubah menjadi background: url (link gambar latar); dengan gambar latar yang sesuai, misalnya: jika gambar latar menu memakai Merah1 maka pada hover memakai Merah2 atau sebaliknya. Atau bisa juga menghilangkan background ini dengan cara menghapusnya atau mengubahnya menjadi background: none;.