Cara Membuat Drop Down Menu di Blog

Home » Tutorial Blogger » Cara Membuat Drop Down Menu di Blog

Sudah lama sepertinya saya lari dari dunia maya, sebab saya sudah nyaman didunia jameela :D
Ok kali ini kita akan membahas tentang Cara Membuat Drop Down Menu di Blog. banyak sekali Bloggers yang membicarakan Menu Drop Down, dari Style maupun CSS.

Sedikit Pengertian Menu Drop Down

Sebenarnya saya tidak bisa menjelaskannya secara
detail apa itu Menu Drop Down, tapi dengan simpelnya Menu Drop Down adalah menu seperti menu biasanya, hanya saja jika kita menempelkan kursor dimenu tersebut otomatis menu itu akan bergulir secara vertikal, yaitu menu dimana masih terkait dengan menu aslinya.

Untuk lebih jelas bisa lihat Screenshot berikut:

Memasang CSS Menu Drop Down di Blog

Login ke pada blogger anda
Pilih blog yang akan dipasangi
Pilih Menu Template
Klik Tombol EDIT HTML.
Carilah kode ]]></b:skin>
Copy kode CSS di bawah ini dan paste tepat di atas kode ]]></b:skin> tadi...

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

Ganti kode warna1 dan warna2 dengan kode warna yang anda inginkan.

Jika sudah mengganti semua kode warna di atas silahkan klik SIMPAN TEMPLATE....

MEMASANG KODE HTML DROP DOWN MENU DI TATA LETAK BLOG

Sekarang masuk ke Menu TATA LETAK atau LAYOUT
Klik ADD A GADGET atau TAMBAH GADGET
Pilih HTML/JAVASCRIPT. Biarkan kolom judul nama gadget kosong, lalu copy paste kode di bawah ini ke kolom HTML yang tersedia

<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>

Edit semua nama menu sesuai keinginan anda. Jangan lupa mengganti tanda # dengan alamat URL yang anda inginkan
Klik SIMPAN
Atur posisi gadget drop down menu horizontal ini di tempat yang anda inginkan, lalu klik tombol SIMPAN SETELAN di bagian kanan atas layar.

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

Silahkan cari pada bagian akhir ada kode seperti ini:

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

Tepat di bagian atas </ul> bisa disisipkan menu baru, dan akan terlihat seperti di bawah ini:

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

Jika menu tambahan lebih dari satu akan terlihat seperti di bawah ini

<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>

Jika salah satu menu tambahan mempunyai sub menu, maka perhatikan kode </li> menu tersebut yang diturunkan untuk membuka ruang baru bagi sub menu di dalam menu tersebut

<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>

Ok, silahkan divariasikan sendiri cara untuk menambah dan mengurangi item pada drop down menu horizontal di atas pada blog anda. untuk info lebih jelas bisa contact trikmudahseo.blogspot.com karena artikel ini saya dapat dari beliau.
Sekian ya bro untuk hari ini, tunggu Tutorial-tutorial lainnya. Salam^_^

Ditulis oleh: Anonymous Pada : Friday, January 31, 2014

Label : Tutorial Blogger