Static side menu on Blogger

Navigation in our blog or website is an important matter to take care of, and menus are very important to do this. Here we’ll show your how to set a static side menu in your website or blog, which means, when you scroll down the menu will be in the same position.

The menu we’re talking about is very popular on blogs, and will see like this:

1. Go to “Layout” tab, and then to “Edit HTML”.
2. Search for the following code:

]]></b:skin>

For other CMS or web system, find the place for styles or your CCS file.

3. Just before that write the following:

#sidemenu{
   position:fixed;
   text-align:left;

/*If the menu location is not ok, modify the next values */
         margin-top:100px;
   margin-left:-28px;
}

* html #sidemenu{  /*for IE*/
 position:absolute;
 }

#sidemenu a img{
 opacity:1;
 -moz-opacity:1;
 filter:alpha(Opacity=100);
}

#sidemenu a:hover img{
 opacity:0.8;
 -moz-opacity:0.8;
 filter:alpha(Opacity=80);
 position:relative;top:0px;left:2px;
}

* html #sidemenu a img{
 filter:alpha(Opacity=100);
 }

#sidemenu img{
 margin-bottom: -5px;
 }

* html .sidemenu{
 margin-bottom: -3px;
}

4. Now search for the following code:

<div id='content-wrapper'>

For other templates coul be better to find “<div id=’outer-wrapper’><div id=’wrap2′>”. Fo other CMS find the main div.

5. Right after that code write the following:

<div id='menulateral'>
 <span>
 <a href='http://YOURBLOG.blogspot.com/' style='border:0;' title='Beggining'><img alt='Beggining' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya1AI/AAAAAAAABoI/6EXVwJ-0xxc/s1600/menu-lateral-inicio.png'/></a>
 <br/><a href='#BlogArchive1' style='border:0;' title='File'><img alt='File' src='http://bp2.blogger.com/_Zuzii37VUO4/RlpT2Jya08I/AAAAAAAABno/fEetH56Ftgw/s1600/menu-lateral-archivo.png'/></a>
 <br/><a href='mailto:YOUR-MAIL@server.com' style='border:0;' title='Contact'><img alt='Contact' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0-I/AAAAAAAABn4/F5Ax7A_8rLA/s1600/menu-lateral-contacto.png'/></a>
 <br/><a href='http://YOURBLOG.blogspot.com/feeds/posts/default' style='border:0;' title='Subscribe our Feed'><img alt='Subscribe our Feed' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0_I/AAAAAAAABoA/HgSHFryV6kc/s1600/menu-lateral-feed.png'/></a>
 <br/><a href='#' style='border:0;' title='Up'><img alt='Up"' class='sidemenu' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya09I/AAAAAAAABnw/38HqImjH21E/s1600/menu-lateral-arriba.png'/></a>
 </span>
</div>

In that code, make the next substitutions:

“http://YOURBLOG.blogspot.com/” – Your blog’s address.
“YOUR-MAIL@servidor.com” – Your e-mail address.
“http://YOURBLOG.blogspot.com/feeds/posts/default” – Replace “YOURBLOG” for that part of your blog’s address.

6. Save the changes, and that’s it.

Lee este artículo en español: Menú lateral fijo en Blogger.