Memasang Drop Down Menu CSS3 elegan di Blogger

Membuat Drop Down Menu CSS3 elegan di Blogger pasti sudah tidak terdengar asing lagi untuk kita bukan. Tentunya dengan Menerapkan Trik yang satu ini, blog kita akan lebih cantik, elegan dan membuat blog kita lebih simple dan menghemat tempat.

1. Login ke blog sobat

2. Klik Template --> Edit HTML --> Klik Lanjutkan, kemudian kamu cari kode ]]></b:skin>

3. Salin kode CSS di bawah ini dan kamu letakkan di atas kode ]]></b:skin> 

/* Drop Down Menu By hzndi.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 hzndi.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 hzndi.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 hzndi.blogspot.com */

4.  Simpan template sobat. 

5. setelah itu sobat klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan sobat salin lagi kode HTML/Javascript di bawah ini.

<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>
  </ul>
  </li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact Us</a></li>
 </ul>
</div>

NOTE :

• Ganti tanda # dengan alamat URL yang kamu suka.
• Ganti Home, About US, dll dengan kata-kata sobat inginkan.

5. Simpan Template, semoga berhasil.