Cara membuat menu bar dengan javascript

Share on :

bagi agan yang punya blog, rasanya ga bagus ya. kalau ga dikasih menu bar.
di-sini saya mau kasih agan menu bar blog. gampang & ga usah pake edit HTML segala.
Disini, menu bar yang saya pake dari widget java script dan menu bar ini saya buat sendiri.

Silakan copas script dibawah ini
----------------------------------------------------------------------------------------------------------------

<style type="text/css">
#WadahMenu{background: transparent;height:68px;margin-left:24px… padding:0; font:bold 8px Arial,Tahoma,Verdana; text-decoration:none}
#Menu{background: transparent; margin:0; padding-top:13px; padding-left:3px}
#Menu ul{float:left; list-style:none; margin:0; padding:0; text-decoration:none}
#Menu li{list-style:none; margin:0; padding:0; text-decoration:none}
#Menu li a,
#Menu li a:link,
#Menu li a:visited{color:gray;background:none; display:block;text-decoration:none;font-… Helvetica,
Sans-serif;text-shadow:0 1px 0
black;margin:0 0px 0 0;padding:9px 3px 9px;border-radius:6px 6px 6px
6px;width:115px;text-align:center;bord… solid black;}
#Menu li a:hover,
#Menu li a:active{background:#666666; color: white; border:1px
solid black; text-decoration:none}
#Menu li li a,
#Menu li li a:link,
#Menu li li a:visited{background:#999999; width:115px; color:white;text-transform:lowercase; float:none; margin:0; padding:7px 10px; border-bottom:1px solid #585858;border-left:1px solid #585858;
border-right:1px solid #585858; font:normal 14px Georgia,Times New Roman; text-
decoration:none}
#Menu li li a:hover,
#Menu li li a:active{background:#333366; color:white;
padding:7px 10px; text-decoration:none}
#Menu li{float:left; padding:0; text-decoration:none}
#Menu li ul{z-index:9999; position:absolute; left:-999em; height:auto;
width:150px;
margin:0; padding:0; text-decoration:none}
#Menu li ul a{width:140px; text-decoration:none}
#Menu li ul ul{margin:-32px 0 0 171px}
#Menu li:hover ul ul,
#Menu li:hover ul ul ul,
#Menu li.sfhover ul ul,
#Menu
li.sfhover ul ul ul{left:-999em}
#Menu li:hover ul,
#Menu li li:hover ul,
#Menu li li li:hover ul, #Menu
li.sfhover ul,
#Menu li li.sfhover ul,
#Menu li li li.sfhover ul{left:auto}
#Menu li:hover,
#Menu li.sfhover{position:static}
</style>

<div id="WadahMenu">
<script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<ul id="Menu">

<li><a href="http://cyser.blogspot.com/">HOME</a></li>

<li><a href="http://cyser.blogspot.com/search/label/action">ACTION</a></li>

<li><a href="http://cyser.blogspot.com/search/label/strategy">STRATEGY</a>

<li><a href="http://cyser.blogspot.com/search/label/sport">SPORT</a>

<li><a href="http://cyser.blogspot.com/search/label/simulator">SIMULATOR</a>

<li><a href="http://cyser.blogspot.com/search/label/Racing">RACING</a></li>

</li></li></li></li></ul></div>

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

GANTI LINK BERWARNA MERAH DENGAN LINK LABEL BLOG ANDA.

GANTI TEXT BERWARNA KUNING DENGAN TEXT YANG AKAN DI-TAMPILKAN DI BLOG

ANDA!

Cara memasang menu bar.

1. login ke blogger anda.
2.masuk ke-rancangan
3.masuk ke-tata letak
4.tambah widget di bawah header. ( Seperti gambar diatas )
5. pilih java script.
6.copas script di-atas ( pastikan link udah di-ganti dengan link label blog anda )
7. selesai