Membuat Slide Menu di SideBar Blog ~ nawayhac.

Selamat pagi sobat blogger . . . ! ! !

dikesempatan kali ini saya ingin mencoba membagi kan bagaimana cara Membuat Slide Menu di Sidebar Blog , , ,

, ,

Sudah liat Demo nya kan sob ? ? ?
Ok langsung aja sobat Copy script dibawah ini :

<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>
<style>
body{
font-size:85%;
}
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:#B25900;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:Dancing script;
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:#404040;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background:transparent;
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:150px;
}
#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="http://q-opini.blogspot.com/search/label/Annotation">Annotation</a></li>
<li><a href="http://q-opini.blogspot.com/search/label/Story%20Shared">StoryShare</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
</div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRg1U-Dr0jJyzFklykwPGKQzbZuyXLit8YgFmGUdZj19bFXi0GzFwaEVQRe27448Sk5GtB28SPxXPQeLxETUtoNL3UZseyObbuoJMyuf-Wext8Agd6WwVVwGIaz61MHL21xWEPf_A3FqM/w30-h147-no/sidebarcollapse.png" title="sideBar" /></a>
</div>

Login ke blogger dengan ID Anda
Pada halaman dashboard blogger pilih menu Layout > Add a gadget, pilih gadget typeHTML/Javascript.
Selanjutnya masukkan script Diatas ke dalam Content gadget.
Jika sudah selesai, silahkan simpan/save dan lihat hasilnya

Untuk mengganti link dan menambah menu pasti nya sobat udah tau kan ? ! !
ok,semoga bermanfaat . . ! ! !

26 comments