Header Ads

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:
left collapse sidebar menu
This will normaly showed on blog. When you click on the tiny right arrow mark then the menu will open to a bigger size.
left collapse sidebar menu for blogger blogspot blog
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="http://2.bp.blogspot.com/-1Qj-S9Cr9_I/TxhjAq9tSsI/AAAAAAAABMM/HPJ3wtIo1Ys/s320/leftsidebar.png" title="sideBar" /></a></div>
Don't forget to change the link and anchor texts. Replace "#" marks with post link.

3 comments:

  1. Thank you SO much for this! It is exactly what I was looking for.

    Would you be able to help me with some troubleshooting? I got it up on my blog and it was working fine, but then about an hour later it just stopped sliding open when clicked. I tried re-entering the code without my links and such, but I'm still not having any luck. Any ideas? Thank you!

    ReplyDelete
  2. Sorry for late reply, I must help you about the left sliding menu. I think you have done some error on pasting code. Do you please do the same thing (copy and paste code) again?

    Thanks

    ReplyDelete
  3. i have a problem here..why is everytime i click on the side bar to expand the menu, my blog will automatically back to the top..it's like i have clicked on a "to the top" button..can i know why?and where is the element i need to alter in order to make things the way i want?

    ReplyDelete

Please help me to improve my English. Please Email me or comment below. Thanks...

Powered by Blogger.