Cara Membuat Dropdown CSS Menu

Ingin membuat menu horizontal seperti gambar diatas? Bagaimana Cara Membuat Menu Dropdown dengan CSS ? Artikel kali ini akan membahas mengenai tutorial pembuatan daftar isi dengan dropdown menu style yang elegant dan bagus. Design dari menu dropdown ini lebih simple dibandingkan dengan script jQuery yang berakibat akan memperlambat loading blog Anda.

Menu dropdown horizontal ini dapat Anda taruh sesuai dengan keinginan Anda. Dan Anda juga dapat merubah tampilan warna, style, border, margin dan lainnya dengan mudah. Lalu, bagaimana cara membuat menu horizontal ini langsung yuk ikuti tutorialnya.


1. Login ke dalam akun blogger anda. Klik Nama Blog yang ingin dipasang Menu Horizontal ini.
2. Pilih Menu Template
3. Klik Tombol EDIT HTML. Setelah itu akan muncul jendela konfirmasi, silahkan klik LANJUTKAN dan centang Expand Widget Template
4. Carilah kode ]]></b:skin> dengan menggunakan CTRL+F
Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin> :

#Mediablogger {
    background: warna1;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: warna2;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;
}
#mediabloggerbox {
    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 sesuai keinginan Anda. Atau dapat memakai kode HTML warna berikut :

Menu Kuning
warna1 = #ffd966
warna2 = #d4812a

Menu Hitam
warna1 = #555555
warna2 = #FFFFFF

Menu Biru
warna1 = #66bbdd
warna2 = #004661

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

Menu Hijau
warna1 = #38761d
warna2 = #FFFFFF

Jika telah selesai memberikan kode warna contoh #FFFFFF , Klik Simpan Template / SAVE.
Lalu klik Layout, Pilih Add Gadget, sesuaikan lokasi penempatan menu horizontall ini. Lalu pilih HTML/Javascript. Kemudian,masukkan kode seperti berikut :

<div id="Mediablogger">
       <div id="mediabloggerbox">
      <ul id="punch">
        <li><a href="http://impoint.blogspot.com">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>

Kemudian Klik Save dan lihat hasilnya. Apabila di dalam Layout Anda tidak ada opsi untuk menambahkan gadget pada bagian Header Blog. Anda dapat menaruh dibagian atas header tersebut dengan masuk kembali ke Template , Lalu Edit HTML, Cari kode <body>. Lihat bagian bawah dari kode <body> tersebut. Cari kode yang mirip kata berikut ini <div id='header'> , <div id='header-wrapper'> taruhlah kode script yang diatas dibawah kode <div id='header'> lalu klik Preview untuk melihat hasilnya. Apabila posisinya terlalu keatas, Anda tinggal menaruh script tadi lebih kebawah.

Jika Anda melakukan lankah-langkah diatas dengan benar maka tampilan menu dropdown horizontal cantik pun akan segera terlihat. Terimakasih telah membaca artikel mengenai Bagaimana Cara Membuat Dropdown CSS Menu di Blogspot. Semoga dapat mempercantik bagian style menu Anda.

Read more: http://impoint.blogspot.com/2013/01/bagaimana-cara-membuat-dropdown-css-menu.html#ixzz2P0rpNgMJ
Dilarang copy paste artikel tanpa menggunakan sumber link - DMCA Protected
Follow us: @ravdania on Twitter | pemakan.worell on Facebook

TERIMA KASIH TELAH MEMBACANYA,,,,,,SEMOGA BERMANFAAT ^^



 Pembaca yang baik adalah pembaca yang meninggalkan komentar setelah membaca... ^.^



>>>SILAHKAN BERKOMENTAR<<<



 Silahkan COPY vs PASTE artikel di blog ini, tapi bawa juga LINK saya. http://noviapriandewi.blogspot.com/ Follow Me at twetter@Novi_priell