Cara Pasang Menu Dropdown Cantik Terbaru Di Blogger

Cara pasang menu dropdown cantik terbaru di blogger, Baru-baru ini banyak pengunjung setia saya bertanya kepada saya tentang kemampuan untuk menambahkan menu drop-down yang mudah dan indah untuk blogger, tidak ribet dan juga keren.





Jadi hari ini kita akan belajar bagaimana menambahkan sebuah drop down menu untuk blogger dan cara yang sangat mudah, Menu ini kompatibel dengan sebagian besar browser modern dan klasik, dan dapat ditambahkan untuk template hanya dalam 3 langkah mudah, tapi tolong diingat, simpan dulu template lama anda, buat jaga-jaga kalau terjadi kecelakaan, Oke. Lanjut gan!!


1. Tambahkan CSS Menu


Buka akun blogger Anda,
Arahkan ke Dashboard>> Desain>> Edit> Html
Dan cari kode berikut,

]]></b:skin>

Dan sebelum itu, tambahkan kode css berikut,

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}


#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}


#jsddm 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;
}


#jsddm li a:hover {
background: #C8C8C8;
}


#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}


#jsddm li ul li {
float: none;
display: inline;
}


#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}


#jsddm li ul li a:hover {
background: #A3CEE5;
}

2. Menambahkan kode Java


Pada halaman yang sama, menemukan kode berikutnya,

</head>

Kemudian tambahkan kode ini persis sebelum itu,

<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 jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}


function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}


function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}


function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}


$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});


document.onclick = jsddm_close;
//]]>
</script>

Kemudian klik save template


3. Menambahkan Menu ini Untuk Blog Anda


Sekarang Pergi ke Dashboard>> Desain>>
Dan pada halaman elemen halaman Anda, klik Add A Gadget dimana saja di layar,
Dan pilih "HTML / JavaScript", Biarkan judul kosong, semut di area konten, paste kode berikut,

<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>


<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>


<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>


<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">AllBlogTools</a></li>
</li></ul>

Simpan, dan lihat hasilnya