Membuat Menu Drop Down Dengan CSS3 di Blog

Blogger Pemula, CSS3, Tutorial Blog, Menu Drop Down

Membuat Menu Drop Down Dengan CSS3 di Blog - Ass. wr. wb. Kali ini saya kembali lagi akan membagikan tutorial blog, yaitu cara "Membuat Menu Drop Down Dengan CSS3 di Blog". Tutorial ini memang sudah banyak diposting ke dunia maya oleh blog-blog yang sudah terindex di mesin telusur. Namun dengan Alasan "Melengkapi", saya akan membuat label tersendiri untuk tutorial blog di blog ini.

Nah, Bagi Para Blogger yang ingin mengganti Menu Drop Down-nya bisa di simak cara di bawah ini :

1. Masuk ke Dashboard Blogger Anda

2. Klik Template >> EDIT HTML (Sebelum Itu Back Up Template Blog Anda untuk berjaga-jaga ketika ada kesalahan.

3. Letakkan Kode/Script berikut ini tepat diatas kode ]]></b:skin>

 /* CSS3 Drop Down Menu by Motivation*/ 
#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); } 
#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); } 
#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; } /* CSS3 Drop Down Menu by Motivation*/

4. Setelah di Simpan Klik Tata Letak >> Add Gadget >> HTML/JavaScript, lalu Masukkan Kode di Bawah Ini:

<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Tutorials</a></li>
    <li><a href="#">Sitemap</a></li>
    <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Sub Page #1</a></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="#">Create This</a></li>
  </ul>
</div>

Ket :

• Ganti Teks yang Berwarna Hijau dengan alamat url/link sobat
• Ganti Teks yang Berwarna Biru dengan Nama Judul yang Sobat Inginkan

 DEMO

Nah Itulah artikel Kali Ini, yaitu cara "Membuat Menu Drop Down Dengan CSS3 di Blog". Semoga Bermanfaat. Terima Kasih.