Floating static menu for blogger blog

Today we will add a floating menu at the side of our blog. I know you may ask me how to do that. Yes, Yes, I am explaining the tips now.

It is a very important and essential menubar tool, if you have much content to share with blog reader. If anybody has a huge blog which has many category and various things to share with other. If anybody want more visit through his blog's posts. Then this menubar will help to increase pageview count.

A reader may read an article at once. Such if that post is very long. Reader reading this post taking quite a long time and scrolling down to end up. That means the reader go at the end (downside/ footerside) of your blog. Now what do you expect from your blogger. You must want him/ her to read more post at least one post. But there is no any post link infront of him/ her. There is no any menu at the footer of your blog. In this moment a busy reader will leave your blog without reading more post.

But if you have this menubar in your blog, then a reader will be bound to see it infront of his/ her eyes. This menubar will float with his/ her scrolling at the bottom of page. So reader will see more link at the side of the blog and willing to click on an another post link. And it will give you more then one pageview. So, why do you late to get this valuable menubar for your blogger / blogspot blog? Let's start to grab it.

• First of all login into your blogger.com dashboard.
• Then go to Layout > Page elements.
• There take a HTML/ Javascript gadget.
• Add the code below there.
• 
  

  <div id="staticmenu" class="wireframemenu" style="left: 10px; top: 20px">
  <ul>
  <li><a href="YOUR LINK">LINK NO 1</a></li>
  <li><a href="YOUR LINK">LINK NO2</a></li>
  <li><a href="YOUR LINK">LINK NO 3</a></li>
  <li><a href="http://YOUR LINK">LINK NO 4</a></li>
  <li><a href="http://YOUR LINK">LINK NO 5</a></li>
  </div>

• If you changed the boldface 'Left" to right, the floating static menu will appear at the right side of blog.
• Save the gadget.
• Now go to Layout > Edit HTML
• Here find the line ]]></b:skin> and replace it with the codes below.
• 
  

  .wireframemenu{
  margin-top:20px;
  border: 1px solid #C0C0C0;
  background-color: transparent;
  width: 115px;
  position: absolute;
  }
  
  * html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
  width: 164px;
  }
  
  .wireframemenu ul{
  padding: 4px 3px;
  margin: 0;
  list-style-type: none;
  }
  
  .wireframemenu a{
  font: 14px Verdana;
  padding: 4px 3px;
  display: block;
  width: 100%; /*Define width for IE6's sake*/
  color: #ff0000;
  text-decoration: none;
  border-bottom: 1px solid #C0C0C0;
  }
  
  .wireframemenu a:visited{
  color: #595959;
  }
  
  html>body .wireframemenu a{ /*Non IE rule*/
  width: auto;
  }
  
  .wireframemenu a:hover{
  color: #0000ff;
  border-right:2px solid black;
  }
  
  ]]></b:skin>
  
  
  <script type='text/javascript'>
  //<![CDATA[
  
  
  /***********************************************
  * Static Menu script- by JavaScript Kit (www.javascriptkit.com)
  * This notice must stay intact for usage
  * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
  * Modified by: http://www.netgator.blogspot.com
  ***********************************************/
  
  //ids of menus to keep static on page (must be absolutely positioned, with left/top attribute added inline inside tag)
  //Separate multiple ids with a comma (ie: ["menu1", "menu2"]
  var staticmenuids=["staticmenu"]
  
  var staticmenuoffsetY=[]
  
  function getmenuoffsetY(){
  for (var i=0; i<staticmenuids.length; i++){
  var currentmenu=document.getElementById(staticmenuids[i])
  staticmenuoffsetY.push(isNaN(parseInt(currentmenu.style.top))? 0 : parseInt(currentmenu.style.top))
  }
  initstaticmenu()
  }
  
  function initstaticmenu(){
  var iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  var topcorner=(window.pageYOffset)? window.pageYOffset : iebody.scrollTop
  for (var i=0; i<staticmenuids.length; i++)
  document.getElementById(staticmenuids[i]).style.top=topcorner+staticmenuoffsetY[i]+"px"
  setTimeout("initstaticmenu()", 100)
  }
  
  if (window.addEventListener)
  window.addEventListener("load", getmenuoffsetY, false)
  else if (window.attachEvent)
  window.attachEvent("onload", getmenuoffsetY)
  
  //]]>
  
  </script>

• Save your template and you are done.