Cara membuat drop down menu di dlog

Cara membuat drop down menu di blog sebenarnya sangat mudah. Saat ini semakin banyak blogger pemula yang tertarik untuk belajar dasar-dasar kode untuk mengatur tampilan blognya. Jadi kali ini saya hendak berbagi cara membuat drop down menu yang horizontal. Menu ini bisa ditaruh di bawah header, di atas footer, atau di mana saja dalam posisi horizontal.

Lalu bagaimana cara membuat menu drop down horizontal ini? Sebenarnya anda bisa menggunakan CSS yang sangat sederhana untuk melakukan ini. Untuk memasang Drop down menu horizontal ada dua langkah yang harus dilakukan, yaitu:

MEMASANG CSS MENU DROP DOWN DI BLOG

#RickyMenu {
    background: warna1;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: warna2;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;

}
#Rickybox {
    width: 875px;
    float: left;
    margin: 0;
    padding: 0;
}

#punch {
    margin: 0;
    padding: 0;
}
#punch ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#punch li a, #punch li a:link, #punch li a:visited {
    color: warna2;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;
}
#punch li a:hover, #punch li a:active {
    background: warna2;
    color: warna1;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#punch li li a, #punch li li a:link, #punch li li a:visited {
    background: warna1;
    width: 150px;
    color: warna2;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#punch li li a:hover, #punch li li a:active {
    background: warna2;
    color: warna1;
    padding: 7px 10px;
}
#punch li {
    float: left;
    padding: 0;
}
#punch li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#punch li ul a {
    width: 140px;
}
#punch li ul ul {
    margin: -32px 0 0 171px;
}
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
    left: -999em;
}
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
    left: auto;
}
#punch li:hover, #punch li.sfhover {
    position: static;
}

Menu Hitam
warna1 = #555555
warna2 = #FFFFFF


Menu Biru
warna1 = #66bbdd
warna2 = #004661


Menu Hijau
warna1 = #38761d
warna2 = #FFFFFF

Menu Abu-abu
warna1 = #d4d4d4
warna2 = #555555


Menu Kuning
warna1 = #ffd966
warna2 = #d4812a

 MEMASANG KODE HTML DROP DOWN MENU DI TATA LETAK BLOG

<div id="RickyMenu">
       <div id="Rickybox">
      <ul id="punch">
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Sample Page</a>
          <ul>
            <li>
              <a href="#">Sub Page #1</a>
              <ul>
                <li><a href="#">Sub Sub Page #1</a></li>
                <li><a href="#">Sub Sub Page #2</a></li>
                <li><a href="#">Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Page #2</a></li>
            <li><a href="#">Sub Page #3</a></li>
            <li><a href="#">Sub Page #4</a></li>
            <li><a href="#">Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href="#">Sample Post</a></li>
        <li><a href="#">Blog Page</a></li>
      </ul>
    </div>
  </div>

Jika anda melakukan langkah-langkah di atas dengan benar, anda akan melihat sebuah horizontal drop down menu di tempat yang anda inginkan. Bentuknya kurang lebih seperti gambar di bawah ini.

Untuk Menambah Item di dalam drop down menu horizontal ini sangatlah mudah:

<li><a href="#">Blog Page</a></li>
      </ul>

<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU">TEKS BARU</a></li>
      </ul>

<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a></li>
<li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>

<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>

<li><a href="LINK BARU 2">TEKS BARU 2</a> 

        <li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li>

        <li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li>

</li>

<li><a href="LINK BARU n">TEKS BARU n</a></li> 
      </ul>

Tentunya anda telah masuk pada akun Blogger anda.

1. Masuk pada bagian Laman.

2. Perhatikan, terdapat tulisan "tampilkan laman sebagai", lalu klik kotak dropdown untuk memilih opsi, ubah pilihan "jangan tampilkan" dan pilihlah "Tab Atas". Untuk mengakhiri, klik Simpan Setelan.

Menu navigasi sudah dibuat, silakan lihat hasilnya. Namun hanya menu Beranda yang tampil. Sekarang apa lagi? Tugas anda selanjutnya adalah membuat menu-menu baru, berikut caranya:

Masih pada bagian Laman, anda klik kotak dropdown Laman Baru. Terdapat dua pilihan yaitu Laman Kosong dan Alamat Web. Laman Kosong berfungsi untuk membuat sebuah halaman baru secara manual seperti sebuah tulisan atau juga bisa sebuah script. Sedangakan Alamat Web berfungsi untuk memberikan fungsi link pada tombol menu navigasi dimana ketika menu navigasi diklik maka akan menuju pada URL yang telah anda masukan.

Telah jelaskan, Submenu itu adalah menu uraian dari menu induk. Nah untuk membuat submenu ini terlebih dahulu anda harus menampilkan elemen laman seperti yang telah dijelaskan dalam membuat Menu Navigasi.

Setelah elemen laman ditampilakan maka anda bisa memulai untuk membuat Menu serta Submenu Navigasi.

1. Masuk pada bagian Template dan klik Edit Template.

2. Gunakan tombol ctrl+F dan carilah kode ]]></b:skin>.

3. Letakan kode berikut tepat di atas kode ]]></b:skin>.

.tabs-inner .widget li ul {
  z-index: 100; position: absolute;
  left: -999em; height: auto; margin: 0; padding: 0;
  border: 1px solid #999999;
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
  -moz-border-radius: 0px; -webkit-border-radius: 0px;
  -goog-ms-border-radius: 0px; border-radius: 0px;
}

.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
  left: auto;
}

.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
  color: #ffffff; background: rgb(51, 102, 153);
}

.tabs-inner .widget li ul a {
  display: block; padding-left: 1.25em; padding-right: 1.25em;
  margin-left: 0px; margin-right: 0px; border: none;
  color: #000000; background: rgb(243, 244, 246);
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
  width: 250px;
}

Anda bisa mengubah ukuran (pada kode warna merah) dan warna (pada kode warna biru) border/garis pembatas dengan yang anda inginkan. Kode warna hijau adalah warna teks pada nama Submenu yang bisa anda ubah. Dan ukuran widht adalah lebar submenu, sesuaikan dengan panjang nama pada Submenu.

4. Gunakan tombol ctrl+F dan carilah kode <li><a expr:href='data:link.href'><data:link.title/></a></li>. Kemudian perhatikan kode-kode yang berada beberapa baris di bawahnya, terdapat kode <b:/loop>. Letakan kode berikut tepat di bawah kode <b:/loop>.

<li><a href='#'>Menu1</a>

  <ul>

    <li><a href='http://regibrader-free.blogspot.com/'>Sub Menu 1</a></li>

    <li><a href='http://regibrader-free.blogspot.com/'>Sub Menu 2</a></li>

    <li><a href='http://regibrader-free.blogspot.com/'>Sub Menu 3</a></li>

  </ul>

</li>

Ubah kode berwarna merah dengan URL tujuan yang anda inginkan, untuk Menu1 adalah menu induk. Jika anda tidak akan memberi fungsi link pada menu tersebut, biarkan saja URL nya '#'. Untuk tulisan berwarna biru anda ubah dengan nama menu dan submenu yang anda inginkan.
Jika anda ingin memasang Menu serta Submenu baru, maka yang perlu anda lakukan adalah menyalin/copy kode diatas dan menempelkanya/paste tepat di bawah kode tersebut. Jadi anda tinggal mengeditnya.

5. Jika telah selesai, maka akhiri dengan klik Simpan Template. Silakan lihat hasilnya, maka kurang lebih akan seperti berikut.

OK, dengan demikian pembahasan kali ini pun telah selesai.