Cara memasukkan dropdown menu di blog anda .

contoh gambar di atas :


1. Masuk ke akun blog anda lalu pilih design > edit html .



2. Setelah berada pada menu edit html maka masukkan kode dibawah ini sebelum kode </head>

-------------------------------------------------------------------------------------------------

<!--start drop menu-->
<style type='text/css'>
/* menu styles */
#jsddm
{ margin: 0;
padding: 0;}
#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}
#jsddm li a
{ display: block;
background: #0033CC; /*MENU MAIN BACKGROUND COLOR*/
-moz-border-radius: 6px;-webkit-border-radius: 6px;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED; /*MENU LINK COLOR*/
white-space: nowrap}
#jsddm li a:hover
{ background: #24313C /*MENU HOVER BACKGROUND COLOR*/; -moz-border-radius: 6px;-webkit-border-radius: 6px;}
#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
z-index:100;
visibility: hidden;
border-top: 1px solid white}
#jsddm li ul li
{ float: none;
display: inline}
#jsddm li ul li a
{ width: auto;
background: #BFCFFE; /*MENU DROP DOWN BACKGROUND COLOR*/
color: #24313C /*MENU DROP DOWN LINK COLOR*/
}
#jsddm li ul li a:hover
{ background: #809FFE /*MENU DROP DOWN HOVER BACKGROUND COLOR*/}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find(&#39;ul&#39;).eq(0).css(&#39;visibility&#39;, &#39;visible&#39;);}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);
$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, jsddm_timer);});
document.onclick = jsddm_close;
</script>
<!--end menu code-->


-----------------------------------------------------------------------------------


Note : Menu dropdown ini anda bisa ganti warna sesuai keinginan anda sendiri dengan cara mengganti kode yang saya tandai warna merah. Untuk mencari kode warna nya anda bisa klik DISINI.

3. Sava template anda lalu pada menu edit html pergilah ke bagian page element dengan mengklik design.

Kode diatas adalah kode jquery dan css untuk menu dropdown anda , untuk memunculkan nya anda harus memasukkan kode html untuk memunculkannya.

Nah sekarang anda pergi kebagian design blog anda kembali, untuk penambahan kali ini , saya menyarankan anda memasukkan kode berikut ini dibawah area header atau juga bisa disebut kolom cross , berikut ini saya mempunyai gambar dimana kolom tersebut berada.




5. Setelah itu pilih add gadget > html / javascript , lalu masukkan kode berikut ini di dalam kotak html / javascript tersebut .

------------------------------------------------------------------------------------------

<ul id="jsddm">
<li><a href="/">Home</a>
<li><a href="#">Link One</a>
<ul>
<li><a href="#">Link One Sub</a></li>
<li><a href="#">Link One Sub</a></li>
<li><a href="#">Link One Sub</a></li>
</ul>
</li>
<li><a href="#">Link Two</a>
<ul>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
</ul>
</li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</li></ul>

Note : Untuk kode yang saya tandai dengan warna merah anda bisa memasukkan link anda kesana dan pada biru dan hijau anda bisa sesuaikan itu sendiri.

6. Setelah selesai anda bisa mengklik save.

Kini menu dropdown anda sudah ada di blog anda dan mungkin cukup sekian dengan pembahasan tutorial blogger kali ini.