Hari ini saya akan berbagi Multi Level Drop Down Menu dari CSS3, dalam tutorial hari ini saya berbagi Multi Level Drop Down Menu Dengan CSS3 yang bekerja dengan CSS3 murni dan setiap gambar tunggal tidak termasuk dalam menu, adalah bekerja dengan CSS3 murni, tidak akan mempengaruhi kecepatan loading blog Anda dibandingkan dengan menu jQuery dan menu lainnya yang bekerja dengan script.
Menu ini dirancang oleh Rethnaraj Rambabu dari bloggermint saya melakukan banyak perubahan pada menu ini untuk bekerja dengan baik di blogger. Jadi sebelum kita membahas cara menginstalnya pada blogger Anda silahkan Anda lihat dulu demonya.




Cara Tambah This Menu Untuk Blogger?


Menu ini dapat dengan mudah diinstal pada setiap blog blogger dalam 2 langkah mudah. Pertama kita akan menerapkan bagian CSS menu dalam template dan dalam Bagian Kedua terakhir kita akan menambahkan bagian widget HTML dari menu sebagai HTML / JavaScript. Menu ini begitu bersih dan rapi sehingga blogger baru juga dapat dengan mudah menambahkannya ke blog Anda, jika Anda tidak bisa saya di sini.


1. Menginstal Kode CSS3 pada template


1.Masuk ke akun blogger Anda.

2. Pada Dasbor klick Template  Edit HTML.

3. Dalam Edit HTML temukan kode

]]></b:skin> atau <style>
Bila kesulitan mencari kode HTML coba Anda lihat DISINI.

4. Lalu letakkan kode berikut tepat di atasnya.

/* Drop Down Menu By otowebsite.blogspot.com */
#nav {
 float: left;
 font: bold 12px Arial, Helvetica, Sans-serif;
 border: 1px solid #121314;
 border-top: 1px solid #2b2e30;
 overflow: hidden;
 width: 100%;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}
#nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
#nav ul li {
 float: left;
}
#nav ul li a {
 float: left;
 color: #d4d4d4;
 padding: 10px 20px;
 text-decoration: none;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
 border-left: 1px solid rgba(255, 255, 255, 0.05);
 border-right: 1px solid rgba(0,0,0,0.2);
 text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
/* Drop Down Menu By otowebsite.blogspot.com */
#nav ul li a:hover,
#nav ul li:hover > a {
 color: #252525;
 background: #3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover > a {
 color: #2c2c2c;
 background: #5C9ACD;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
 background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 border-bottom: 1px solid rgba(0,0,0,0.6);
 border-top: 1px solid #7BAED9;
 text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
/* Drop Down Menu By otowebsite.blogspot.com */
#nav li ul {
 background: #3C4042;
 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 left: -999em;
 margin: 35px 0 0;
 position: absolute;
 width: 160px;
 z-index: 9999;
 box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
 border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li:hover ul {
 left: auto;
}
#nav li ul a {
 background: none;
 border: 0 none;
 margin-right: 0;
 width: 120px;
 box-shadow: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 border-bottom: 1px solid transparent;
 border-top: 1px solid transparent;
}
.nav ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}
.nav ul li ul li {
    display: list-item;
    float: none;
}
.nav ul li ul li ul {
    top: 0;
}
.nav ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}
#nav li li ul {
 margin: -1px 0 0 160px;
 visibility: hidden;
}
#nav li li:hover ul {
 visibility: visible;
}
/* Drop Down Menu By otowebsite.blogspot.com */

5. Simpan template.

Anda sudah berhasil meginstal CSS Multi Level Drop Down Menu dan sekarang kita lanjut ke langkah ke dua.


2. Menambahkan Widget HTML/Java Script.


1. Sekarang pergi ke Tata Letak.

2. Klick Tambah Gadget (Peletakkan Gadget tersebut seperti pada gambar)


3. Pilih element HTML/Java Script.

4. Lalu copy kode di bawah ini dan paste di dalam element HTML/Java Script tadi.

<div id="nav">
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Portfolio</a></li>
  <li><a href="#">One Dropdown</a></li>
  <li><a href="#">Three Levels</a>
  <ul>
   <li><a href="#">Level 2.1</a></li>
   <li><a href="#">Level 2.2</a></li>
   <li><a href="#">Level 2.3</a></li>
   <li><a href="#">Level 2.4</a></li>
   <li><a href="#">Level 2.5</a></li>
  </ Ul>
  </li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact Us</a></li>
 </ Ul>
</div>

5. Simpan


Menyesuaikan Menu


Sekarang waktunya anda menyesuaikan menu dengan megganti  # Url Anda.
Ganti Home dan seterusnya dengan nama menu.


Butuh Bantuan


Dengan mengikuti langkah di atas, jika Anda tidak dapat membuat menu yang Anda inginkan maka cukup hubungi saya di komentar dengan pertanyaan Anda. Saya akan berusaha secepat mungkin membalasnya!

Poskan Komentar Blogger Disqus

  1. kok malah gak jadi ya gan menunya?
    jadi rusak gitu.. itu solusinya gimana?

    BalasHapus
  2. @kaskus comunitySebenarnya cara ini sangat gampang.....
    Yang perlu Anda perhatikan adalah penerapan,lebar dari sidebar header dari blog Anda...

    Lebar widget harus lebar agar menu ini tidak menumpuk menjadi satu. B)

    BalasHapus
  3. jadi lebar yg di pasang skrg blm default om?

    BalasHapus
  4. jadi cara ntk ngebenahin supaya bener itu gimana om? :(

    BalasHapus
  5. @kaskus comunityLebar menu ini harus satu halaman postingan.
    Seperti pada menu blog ini, lebarnya satu halaman postingan.

    Jika lebarnya hanya 500 makan menu ini akan menumpuk.

    Saya sarankan Anda mebuat 1 widget di bawah header, tapi sayangnya saya tidak membahasnya di blog ini karna sudah ketinggalan dan banyak yang membahasnya.
    Saya sarankan jika Anda ingin membuat widget di bawah header coba cari di blog lain.

    Kalo Anda tidak ingin membuat widget di bawah header saya sarankan membuat menu di bawah header yang berada di artikel http://otowebsite.blogspot.com/2012/05/cara-membuat-menu-drop-down-di-bawah.html :Q

    BalasHapus
  6. terus kok gak bisa kak ? ajarin dong

    BalasHapus
  7. membuat LINK nya gimana om ? Seperti Https://valerianrifky.blogspot.com/bla bla bla ,

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top