Tips Trick dan Cara Mudah buat Menu Melayang di sisi kiri Blog - Floating left sidebar menu

Tutorial buat Menu Melayang di sisi kiri Blog - Floating left sidebar menu Menu Floating ini selain mudah diterapkan juga berpenampilan ke...

Tutorial buat Menu Melayang di sisi kiri Blog - Floating left sidebar menu

Menu Floating ini selain mudah diterapkan juga berpenampilan keren dan tentunya memiliki fungsi yang tak kalah dengan menu lainnya dan bisa dijadikan juga sebagai penghias blog.

Saya yakin seorang pemulapun akan cepat menerapkan atau menambahkan menu ini di blognya.

Berikut cara pasang di blog :

Pertama
Klik RANCANGAN + TAMBAH GADGET Pilih HTML/JAVASCRIPT

Kedua
Silahkan 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/AVvXsEgmmmIrGRyvS7G16tS8J6FI0cBXKj56woxHt00d7ChSNnRIVDXY7KJzlTAV9IMYIaMQLC1UG5JILC7o_ml1dY8o5lSWFs9SMSpCGxgxpeTIVzW2UvnZBDnU_GAWsyL1lOSGBExa8ZG5rpNL/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/AVvXsEhaB7INE8ZBpKovg8TburUsJJi8og_sGyA86vSZZJOZfFOub9-1xNQYfn6hYT4NKQSifFtJnYVJ5EGo0er1xSlxIz2Stp3NmALnDq7vT3K6zfenqCzjizG7Tmt4746WAUn0D3yGVO2_p4tO/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>

Silahkan Sobat Ganti kode berikut dengan menu sesuai keinginan sobat, dan bisa juga ditambahkan sesuai kebutuhan

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

Kode # = Alamat Link dan Link One = Nama Link
contoh
Kode # saya ganti dengan http://hanyayanggratis.blogspot.com
Link One saya berikan nama = Home

Selamat mencoba dan semoga bermanfaat

sumber: kumpulancara