Collapsible floating leftside menu on blogspot blog

Today we are going to add a crazy left collapsible sidebar menu in our blogger.com blog. This left collapse sidebar menu save space and time. It also float with page scrolling. So nothing will lost when a reader goes to the end of any blogpost. We have learned how to add a Floating static menu on our blogger.com blogspot blog. But it has a drawback. That is it takes space. So if our blog width is quite large then this menu will cover leftbar content.

Today I am presenting you an another floating static menu which does not cover much area of valuable left sidebar. It contain valuable links but normally it take very little place. Look at the image below:

This will normaly showed on blog. When you click on the tiny right arrow mark then the menu will open to a bigger size.

This is original menu. After clicking on a specific postlink you can fold it in it's normal mode by clicking on that tiny rightarrow pink icon. Here is the method to implement it in a blogger.com or blogspot.com blog.
Not much hard work to do it work. Just copy the codes below and paste in a HTML/ Javascript gadget in Layout> Page Elements area in blogger dashboard. Save it and see the activity.

<script src="http://sites.google.com/site/netgatorhost/shared/prototype.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/netgatorhost/shared/effects.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/netgatorhost/shared/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:#ffee00
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(http://sites.google.com/site/netgatorhost/shared/left.collapse.border.gif);
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>My<span>LeftMenu</span></h2>
<ul>
<li><a href="http://www.YOURLINK.com">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>
<li><a href="#">Link Five</a></li>
<li><a href="#">Link Six</a></li>
<li><a href="#">Link Seven</a></li>
<li><a href="#">Link Eaight</a></li>
<li><a href="#">Link Nine</a></li>
<li><a href="#">Link Ten</a></li>
<li><a href="#">Link Eleven</a></li>
<li><a href="#">Link Twelve</a></li>
<li><a href="#">Link Therteen</a></li>
<li><a href="#">Link Fourteen</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_BBrV1_OnOlgqCIfsObt6YQTuDRcnCZwLzBCKSgpxaY0EwfaXACbeMc2jj1oYbIumS3um_r6wogLMx5e2TD23dDqWdZTqxYhbl1vgFcf3RL4WdkESUjjl2P3Y7UeBCEesYE9t9TwQB4/s320/leftsidebar.png" title="sideBar" /></a></div>

Don't forget to change the link and anchor texts. Replace "#" marks with post link.