Multi Level Drop Down Menu Dengan CSS3 Untuk Blogger

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.

LIHAT DEMO

---

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!