Monday, July 18, 2011

Sebuah Menu Dropdown Simple Jquery Untuk Blogger Anda

Untuk kali ini kita akan membahas cara membuat menu dropdown simple . Kebetulan beberapa hari yang lalu ada teman blogger saya meminta sesuatu artikel yang memang kebetulan belum saya buat yaitu membuat menu dropdown .

Untuk anda yang ingin melihat demonya anda bisa klik dibawah ini .

cara mudah blogger menu dropdown


baiklah jika anda berminat untuk memasukkan menu dropdown ini kedalam blog anda maka ikuti langkah mudah dibawah ini.

Cara memasukkan dropdown menu di blog anda .

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

kode html blogger dan seo

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.

cara mudah memasukkan kode html di blog


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.

2 comments:

  1. Trimksih Sob untk tutorial menu drop down nya. sukses

    ReplyDelete
  2. Ahhh.... cara ini terlalu ribet
    biar ngak ribet liat aja di http://www.alfatgame.blogspot.com

    ReplyDelete


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam