Tutorial Dropdown Menu-Sub Menu Blogger
Tutorial Dropdown Menu Blogger
Pada kesempatan ini saya bagikan Cara Tutorial Dropdown Menu Blogger. Dengan ini anda bisa menambahkan menu dan sub menu untuk kategori di blogger.
Caranya adalah:
1. Buka dashboard blogger
2. Buka Edit template
3. Centang expand widget template
4. Cari kode dibawah ini (agar mudah mencarinya tekan CTRL+F )
5. copy paste kode dibawah ini sebelum kode diatas.
6. Kemudian cari kode dibawah ini (agar mudah mencarinya tekan CTRL+F )
7. Lalu copy paste kode ini diatas kode point no. 6
8. Lalu klik Save/simpan template.
9. Buka Tata letak.
10. Tambahkan gadget terserah dimana. kemudia pilih HTML/java script kemudia masukkan kode dibawah ini.
11. Ganti tulisan Drop 1-2 dan seterusnya dengan nama kategori blog anda.
12. Ganti juga tanda # dengan link kategori blog anda.
13. Save/simpan.
Pada kesempatan ini saya bagikan Cara Tutorial Dropdown Menu Blogger. Dengan ini anda bisa menambahkan menu dan sub menu untuk kategori di blogger.
Caranya adalah:
1. Buka dashboard blogger
2. Buka Edit template
3. Centang expand widget template
4. Cari kode dibawah ini (agar mudah mencarinya tekan CTRL+F )
]]></b:skin>
#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;
}
6. Kemudian cari kode dibawah ini (agar mudah mencarinya tekan CTRL+F )
</head>
7. Lalu copy paste kode ini diatas kode point no. 6
<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>
8. Lalu klik Save/simpan template.
9. Buka Tata letak.
10. Tambahkan gadget terserah dimana. kemudia pilih HTML/java script kemudia masukkan kode dibawah ini.
<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>
11. Ganti tulisan Drop 1-2 dan seterusnya dengan nama kategori blog anda.
12. Ganti juga tanda # dengan link kategori blog anda.
13. Save/simpan.
met kerja gan ,,,,, thnks infonya
ReplyDelete