Cara Membuat Menu Melayang di Sisi Kiri Blog

Cara Membuat Menu Melayang di Sisi Kiri Blog - Setelah sebelumnya BLOGNYA SI IMIN memposting mengenai Cara Membuat Menu Roliing di Blog, tutorial blog kali ini masih membahas mengenai menu di blog, tepatnya kita akan membuat menu melayang di sisi kiri blog yang BLOGNYA SI IMIN dapatkan lagi-lagi dari kumpulancara.com. Sebenarnya tutorial blog ini sering disebut dengan Floating Left Sidebar Blog. Mau lihat tampilan dari menu ini? Silahkan lihat demonya di sini.

Mau tahu cara membuat menu melayang ini? Ikuti langkah-langkah berikut ini:
1.Klik Rancangan/Tata Letak lalu Klik Tambah Gadget dan pilih HTML/JavaScript

2.Copy dan Paste Kode Berikut ini

<script src="http://sidebarmenu.googlecode.com/files/sidebarprototype.js" type="text/javascript"></script>
<script src="http://sidebarmenu.googlecode.com/files/sidebareffets.js" type="text/javascript"></script>
<script src="http://sidebarmenu.googlecode.com/files/sidebarmenu.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/AVvXsEiVAPHQn-st7gB4raJSFJwRRiU1id4hyO9F8n0-rr-dPPJrCGx55orm3v65Pb8lZ6B46LW3tH5V3hfpYm-L43SfOhHK50S9fWqwdzXRqx_2PsPettEOo6OsqY3B7DqMWXI5kd1jarrkIH4C/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="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQr1bxWeKcgrLY32FDGmLmMoHscvAxFdkfgaeP8su9wRJzoEO_FxqU6NeCmYVqtOzrAgEFPxWgPLUMnUjK94pp1pyiSZ7M-hAYWTExWk7QhXBBZ7L0-lH088l_AWdAWnFlutnv3Otgit77/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>

Silahkan ganti kode berikut sesuai dengan keinginan Anda:

<a href="#">Link One</a>
<a href="#">Link Two</a>
<a href="#">Link Three</a>
<a href="#">Link Four</a>

Keterangan:
# = Alamat Link
Link One/Two/Three/Four= Nama Link

Selamat Mencoba dan semoga bermanfaat.. ^^

sumber: kumpulancara.com