Menambahkan Menu Dropdown Sederhana Menggunakan JQuery Di Blogger

Menambahkan Menu Drop-Down Keren Menggunakan JQuery Di Blogger

Pada kesempatan kali saya akan memposting tentang cara membuat Menu Drop-Down menggunakan JQuery, menu drop-down yang akan saya bagikan kali ini terbilang simple dan juga penuh dengan kesederhanaan. Saya juga telah membuat DEMO untuk menu drop-down kali ini. jadi, lihat dulu DEMO tersebut ya... supaya tidak ada keraguan nantinya.

Anda juga bisa memodifikasi menu drop-down ini dengan mudah pada kode CSS menu drop-down yang nanti akan saya bagikan, kamu bisa mengubah warna atau menambahkan backround di belakang menu drop-down tersebut supaya menjadi lebih menarik.

Live Demo
click to view

Cara Menambahkan Menu Drop-Down Keren Menggunakan JQuery

1.Buka Dahboard -> Template -> Edit HTML

2. Cari kode ]]></b:skin> pada halaman kode template (lebih mudah gunakan CTRL+F)

Baca Juga:

3. Copy kode dibawah ini dan paste kode tersebut di atas ]]></b:skin>

#KodeBlogger {
height: 40px;
margin: 0;
overflow: visible;
z-index: 2;
padding: 15px;
position:relative;
}
#KodeBlogger li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#KodeBlogger li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#KodeBlogger li a:hover {
background: #C8C8C8;
}
#KodeBlogger li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#KodeBlogger li ul li {
float: none;
display: inline;
}
#KodeBlogger li ul li a {
width: auto;
background: #CAE8FA;
}
#KodeBlogger li ul li a:hover {
background: #A3CEE5;
}

4. Selanjutnya cari kode </head>

5. Copy kode dibawah ini dan paste kode tersebut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;
function KodeBlogger_open()
  {  KodeBlogger_canceltimer();
  KodeBlogger_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function KodeBlogger_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function KodeBlogger_timer()
  {  closetimer = window.setTimeout(KodeBlogger_close, timeout);}
function KodeBlogger_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}
$(document).ready(function()
  {  $('#KodeBlogger > li').bind('mouseover', KodeBlogger_open)
  $('#KodeBlogger > li').bind('mouseout',  KodeBlogger_timer)});
document.onclick = KodeBlogger_close;
  //]]>
  </script>

6. Klik Simpan Template.

Anda sudah berhasil menerapkan kode CSSnya, sekarang mari kita terapkan menu drop-down tersebut...

7. Buka Dashboard -> Tata Letak -> Tambahkan Gadget

8. Pilih HTML/JavaScript pada menu pop-up yang muncul.

Pilih HTML/JavaScrip pada Menu pop up yang muncul

9. Kemudian pada bagian konten isi dengan kode dibawah ini

<ul id="KodeBlogger">
  <li><a href="http://kodelogger.blogspot.com/">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Sub-menu 1-1</a></li>
  <li><a href="#">Sub-menu 1-2</a></li>
  <li><a href="#">Sub-menu 1-3</a></li>
  </ul>
  </li>
 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Sub-menu 2-1</a></li>
  <li><a href="#">Sub-menu 2-2</a></li>
  </ul>
  </li>
 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Sub-menu 3-1</a></li>
  <li><a href="#">Sub-menu 3-2</a></li>
  <li><a href="#">Sub-menu 3-3</a></li>
  <li><a href="#">Sub-menu 3-4</a></li>
  </ul>
  </li>
 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  </li></ul>

- Ganti kode berwarna hijau dengan Link tujuan.
- Ganti kode berwarna merah dengan nama menu sesuai keinginanmu.

10. Klik Simpan.

Sekarang lihat blog anda, apakah menu drop-down tersebut terpasang dengan benar.
Apabila ada permasalahan silahkan berkomentar dibawah.

Itu dia artikel tentang Menambahkan Menu Drop-Down Keren Menggunakan JQuery Di Blogger, apabila anda menyukainya jangan lupa Subscribe untuk tetap terhubung dan juga menerima artikel terbaru dari blog ini melalui email secara gratis.