Membuat Sidebar Menu Javascript Dengan Mootools

Bagi kamu-kamu yang bosan dengan tampilan blog kamu yang itu2 saja, nih ada tips lagi dari saya, jika kamu ribet membuat menu horizontal atau masih bingung, lebih baik kamu menggunakan cara ini saja, lebih mudah dan hemat biaya lagi (lagian ga bayar sih hehehe). Jreng jrennggg, ini adalah sidebar menu yang bisa kamu menaruh berbagai macam link di dalamnya, dan letaknya di sebelah kiri blog kamu, jadi saat di klik dia akan terbuka dengan sendirinya jadi jangan kaget yah soalnya blognya berhantu sih bisa buka sendiri hehehe. Oke langsung saja caranya dibawah yah :

1. Masuk ke Blogger.com

2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript dan masukan kode Javascipt dibawah ini.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/prototype.js" type="text/javascript"></script>
<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/effects.js" type="text/javascript"></script>
<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/side-bar.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0SYlkTZ6xGnpOX5BB50774ij4vADj_whIn0M9pw0BGpHBebE4g1zUP2AQQsuKTXEmgOAjSLI5B8uGUPQANjZfEJRLP16eyDn_C5qU9aBL5fj0ikJbqb-P6FspW123RlwIW_1Xv3u4HQbM/s320/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="hzndi.blogspot.com"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm7M8gcHjJikEoC9jsvNR2JAwqOKvp8D5vAHNVWB7Lc0l4XfuoJKJ6vtUH5khbEMnYD33mSIOlib4PVJ-USbh9xMimEoM6k3w6BM1MfEuJ0fhrSxRp4ju_jcfsO1_Xa4K7kSvQ-SvDQTr5/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>

NOTE : 

1. Ganti tulisan LINK ONE, LINK TWO dan seterusnya dengan nama yang kamu inginkan.

2. Ganti tulisan # yang berwarna merah dengan alamat URL blog kamu, alamat URL label / URL postingan kamu, alamat FB juga boleh asal jangan alamat palsu nanti ketemu ayu ting-ting hehe

3. Ukuran bisa kamu sesuaikan pada kode height:137px; width:28px; ganti terserah abang deh.

4. Save Template dan lihat hasilnya

Postingan Terkait:

Posted in: Blogger,Widget