Cara Membuat Drop Down Menu jQuery ~ http://syamsudinnamaku.blogspot.com

Menu model drop down horizontal ini umumnya dipasang
pada bagian bawah atau atas header sebuah blog. Namun
bila anda ingin memasangnya di tempat lain pun tidaklah
mengapa, semua anda sendiri yang mengaturnya, ingin
dipasang dimana, untuk menyesuaikan template anda
tentunya. Previewnya anda bisa lihat gambar di bawah :

Cara memasangnya adalah seperti berikut ini :

1.   Masuk Edit HTML

2.   Cari kode <head>

3.   Letakkan kode berikut
    di bawah kode <head> ini.

<meta content='AReYxpgdsMBYYQOjD6MjHKPlF2U' name='alexaVerifyID'/>

4.   Lalu cari lagi kode </body>

5.   Letakkan kode berikut
    di atas kode </body> ini.

<div id="container"><br /> <style type="text/css"> #navigation { font-family: georgia!important; font-size: 18px!important; padding: 0px; margin: 0px; list-style-type: none; } #navigation li { position: relative; float: left; margin: 0px 1px 0px 0px; } #navigation li a { display: block; padding: 5px 35px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-right: 5px; background: #cc0000; color: #ffffff; text-decoration: none; }  #navigation li ul { position: absolute; left: 0px; top: 0px; display: none; padding: 0px; margin: 0px; list-style-type: none; }  #navigation li.over { top: 1px; }  #navigation li.over a { background: #009bcc; }  #navigation li.over ul { padding: 5px!important; display: block; background: #009bcc; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-right: 5px; -moz-border-radius-topright: 5px; -webkit-border-bottom-top-right: 5px; } #navigation li.over ul li { float: none; margin: 0px!important; top: 0px; } #navigation li.over ul li a { font-size: 14px!important; padding: 3px 30px; background: none; white-space: nowrap; } #navigation li.over ul li a:hover { background: #00bbf7; color: #000000; -moz-border-radius: 5px; -webkit-border-radius: 5px; } </style><br />   <br /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br /> <script type="text/javascript"> (function($){ $.fn.extend({ //plugin name - animatemenu webtoolkitMenu: function(options) { return this.each(function() {  //Assign current element to variable, in this case is UL element var obj = $(this);  $("li ul", obj).each(function(i) { $(this).css('top', $(this).parent().outerHeight()); })  $("li", obj).hover( function () { $(this).addClass('over'); }, function () { $(this).removeClass('over'); } );  }); } }); })(jQuery);  $(document).ready(function() { $('#navigation').webtoolkitMenu(); }); </script>

KETERANGAN =

Yang perlu anda perhatikan adalah pada bagian :

font-size:

background:

color:

Ubahlah sesuai dengan yang anda inginkan.

6.   Terakhir, tambahkan gadget blog anda,
    pilih HTML/JavaScript, masukkan kode
      di bawah ini dalam kontennya.

KETERANGAN =

*   Anda bisa menambahkan lagi Menu 3, Menu 4,
    dstnya. Ikuti format kode Menu sebelumnya.

*   Ganti kata Home, Menu 1, Menu 2
    dengan kata apa saja yang anda inginkan.

*   Ganti URL pada kode di atas dengan
    URL milik anda.

*   Link pada menu tabnya pun dapat anda
    tambahkan lagi, sesuai dengan kebutuhan anda
    dengan mengikuti format kode di atas.

Sekian, selamat mencoba,
Semoga berhasil, good luck!