Sliding Mootools Sidebar Menu

Dalam pertemuan kita kali ini saya akan berbagi sedikit hal yang mungkin saja bermanfaat untuk anda para blogger .
Hal yang saya bagikan disini adalah sebuah Sliding Menu dengan Efek Smooth yang pastinya menarik sekali .

Efek disini dihasilkan oleh Mootool javaScript dan saya tidak akan menjelaskan panjang lebar soal itu karena itu bukan bagian saya .

Silahkan lihat demonya sebelum kita masuk ke cara pemasangannya disebelah kiri halaman ini.

Cara pemasangannya
1. Masuk ke Dasbor anda
2. Klik menu Layout
3. Kemudian Add Gadget
4. Letakkan Script dibawah ini pada area yang tersedia

<script src="http://dl.dropboxusercontent.com/s/dxv8pj5mvc74vyw/prototype.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/wvyae56sr0hic2n/effects.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/8t6uvuz6r1xzpnz/side-bar.js" type="text/javascript"></script>
<a href="http://goblogination.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://goblogination.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<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/AVvXsEjfk45yLQR-fPCk0dGactHQWXh2EZT1t1w9lbrSLAQjlBbGdITOlTzXCaLfE1oXmiFoIzIYR9tdRPvYyr7HbiI7eKoNc6TTbyJHvkjYb2GYakmP_FlzJrEPmkCxU8ZRPbtPSxZPNUTXFjFP/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="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsm2tfyCBfkNGeze6rMpQZ8lPt-TVWzbVrSi3ugPS77D5yhGkeff1DigklPPX6UhR9PsL_H20-XVebeBPo0bIV2cpoBMQV0XLR1iIL2nCobRKWVF_WTAtwV7ohVLWt-ti1N7DE0JQ7k8T3/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>

5. Simpan

Ganti tanda "#" pada Menu1 dan seterusnya dengan URL anda .

Semoga bermanfaat .

LeftMenu

• Menu1
• Menu2
• Menu3
• Menu4