Membuat Menu Horisontal Dropdown di Blogspot

Menu horisontal dropdown adalah menu yang berderet ke samping dan bisa mempunyai submenu di dalamnya. Menu seperti ini lazim ada di semua program aplikasi dan website. Untuk lebih jelas, kita lihat contoh gambar berikut ini :

Gambar di atas diambil dari situs apa, pasti anda tau kan? Ga perlu saya jelasin lagi ... yang penting anda sudah mengerti gambar tadi adalah salah satu contoh menu horisontal dropdown.

Tidak semua template memiliki pengaturan yang sama. Perbedaan ini terutama terjadi pada template bawaan blogspot atau yang dibuat dengan "Perancang Template" dengan template yang kita download dari web penyedia template gratis.

Menu horisontal dropdown di blogspot sebaiknya dibuat secara manual. Meskipun pada "Perancang Template" yang disediakan juga sudah memungkinkan untuk membuatnya, yaitu menggunakan fitur laman, tapi tetap saja harus disunting secara manual agar dapat menjadi menu horisontal dropdown, karena fitur laman sebetulnya lebih pas untuk membuat halaman statis. Karena itulah, agar menu ini dapat kita gunakan sesuai keinginan, lebih baik kita membuatnya secara manual dari awal. Tata cara membuat menu ini saya browsing kemudian saya lakukan pengujian di beberapa template sebelum akhirnya saya posting untuk berbagi pengalaman.

Supaya tidak terlalu panjang lebar (emang dari tadi udah kepanjangan ... hehehe), mari kita sama-sama buat menu horisontal dropdown.

1.   Setelah login, pilih Edit HTML di Tata Letak/Rancangan (Layout).
  

2.   Cari kode seperti berikut ]]></b:skin> menggunakan tombol Ctrl + F (atau F3) di keyboard.

3.   Expand Template Widget tidak perlu dicentang.

4.   Ada baiknya kita backup/restore template untuk mengantisipasi hasil edit kita gagal. Cara mem-backup template yaitu klik tulisan Download Template Lengkap. Hasil download dapat kita upload kembali jika terjadi kesalahan edit.

5.   Ketik/copy kode di bawah ini tepat di atas kode ]]></b:skin> :

      #subnavbar {

      background: #00CC00;

      width: 859px;

      height: 30px;

      color: #0033CC;

      margin: 0;

      padding: 0;

      }

      #subnav {

      margin: 0;

      padding: 0;

      }

      #subnav ul {

            float: left;

            list-style: none;

            margin: 0;

            padding: 0;

       }

       #subnav li {

            list-style: none;

            margin: 0;

       padding: 0;

       }

       #subnav li a, #subnav li a:link, #subnav li a:visited {

            color: #0000CC;

            display: block;

            font-size: 13px;

            font-weight: bold;

            text-transform: uppercase;

            margin: 0 5px 0 0;

            padding: 6px 13px;

       }

       #subnav li a:hover, #subnav li a:active {

            background: #00FF00;
            color: #FFFFFF;
            display: block;
            text-decoration: none;
            margin: 0 5px 0 0;
            padding: 6px 13px;
      }
      #subnav li li a, #subnav li li a:link, #subnav li li a:visited {
            background: #00CC00;
            width: 140px;
            float: none;
            margin: 0;
            padding: 6px 10px;
            border-bottom: 1px solid #FFFF00;
            border-left: 1px solid #FFFF00;
            border-right: 1px solid #FFFF00;
       }
       #subnav li li a:hover, #subnav li li a:active {
            background: #00FF00;
            margin: 0;
            padding: 6px 10px;
       }
       #subnav li {
            float: left;
            padding: 0;
       }
       #subnav li ul {
            z-index: 9999;
            position: absolute;
            left: -999em;
            height: auto;
            width: 160px;
            margin: 0;
            padding: 0;
       }
       #subnav li ul a {
            width: 140px;
       }
       #subnav li ul ul {
            margin: -25px 0 0 161px;
       }
       #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul,
       #subnav li.sfhover ul ul ul {
            left: -999em;
       }
       #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul,
       #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
            left: auto;
       }
       #subnav li:hover, #subnav li.sfhover {
            position: static;
       }

      Catatan : Nilai-nilai yang diwarnai jingga dapat diubah sesuai kebutuhan.

6.   Cari kode berikut :

      <b:widget id='Header1' locked='true' title=’Blog Anda (Header)' type='Header'/>

      </b:section>

      Catatan :

      Yang utama diperhatikan adalah kode yang diwarnai biru, yang berwarna hijau 
      sesuai dengan nama blog anda.

      Ketik/copy kode berikut, tepat di bawah kode </b:section> :

      <div id='subnavbar'>

           <ul id='subnav'>

      <li>

      <a href='http://arasadeta.blogspot.com'>Beranda</a>

      </li>

      <li>

      <a href='http://arasadeta.blogspot.com/2011/04/loading.html'>DAFTAR ISI</a>

      </li>

      <li>

      <a href='#'>Hiburan</a>

      <ul>

      <li>

      <a href='#'>Film</a>

      </li>

      <li>

      <a href='#'>Musik</a>

      <ul>
      <li>
      <a href='#'>Highlight</a>
      </li>

      <li>

      <a href='#'>Komposer</a>

      </li>
      <li>

      <a href='#'>Penyanyi</a>

      </li>

      <li>

      <a href='#'>Lirik Lagu</a>

      </li>

      <li>

      <a href='#'>Tangga Lagu</a>

      </li>

      <li>

      <a href='#'>Pustaka Lagu</a>

      </li>

      </ul>

      </li>

      <li>

      <a href='#'>Selebriti</a>

      </li>

      </ul>

      </li>

      <li>

      <a href='#'>Olah raga</a>

      <ul>

      <li>

      <a href='#'>Bulutangkis</a>

      </li>

      <li>

      <a href='#'>Sepak bola</a>

      </li>

      <li>

      <a href='#'>Tenis</a>

      </li>

      </ul>

      </li>

      <li>

      <a href='#'>Ragam</a>

      <ul>

      <li>

      <a href='#'>Keislaman</a>

      </li>

      <li>

      <a href='#'>Kesehatan</a>

      </li>

      <li>

      <a href='#'>Fenomena</a>

      <ul>

      <li>

      <a href='#'>Alam</a>

      </li>

      <li>

      <a href='#'>Manusia</a>

      </li>

      </ul>

      </li>

      <li>

      <a href='#'>Peristiwa</a>

      <ul>

      <li>

      <a href='#'>Dekade 2000-an</a>

      </li>

      <li>

      <a href='#'>Dekade '90-an</a>

      </li>

      <li>

      <a href='#'>Dekade '80-an</a>

      </li>

      </ul>

      </li>

      </ul>

      </li>

      <li>

      <a href='#'>Komputer</a>

      <ul>

      <li>

      <a href='#'>Hardware</a>

      </li>

      <li>

      <a href='#'>Software</a>

      </li>

      </ul>

      </li>

      <li>

      <a href='#'>Tutorial</a>
      <ul>
      <li>
      <a href='#'>Blog</a> 

      </li>      
      <li>      
      <a href='#'>Jejaring Sosial</a>
      </li>
      </ul>
      </li>

      </ul>

      </div>

7.   Klik tombol “Simpan Template”, tapi kalau masih ragu, baiknya klik dulu 
      "Pratinjau" baru kemudian "Simpan Template" jika sudah yakin.  

8.     Tentunya akan tampak menu-menu seperti di blog saya, untuk itu anda harus 
    segera menyunting menu sesuai keinginan dan kebutuhan blog yang anda buat.