Create a Customized Side Menu In Your Blogger / BlogSpot Blog

 

.

Once you have seen the picture above [working demo here], I hope there's nothing more to explain what exactly are you going to add to your blog, after you implement this hack.

The process is quite easy, and the overall widget is completely editable, so that you can tweak it even more. But remember this has been created and copyrighted by STYLED MENUS

Simply log in to Blogger, go to "Layout" and "Add a Gadget" of HTML/JavaScript type.

Then in the content, paste this code:

<center><div id="menu">

<ul>

<li><a class="current" href="http://bloggerstop.net">home</a></li>

<li><a href="http://about.com">about us</a></li>

<li><a href="http://google.com">Google</a></li>

<li><a href="http://wikipedia.com">Wikipedia</a></li>

<li><a href="http://bloggerstop.net/2008/09/contact-us.html">contact us</a></li>

</ul>

</div></center>

<style>
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://bloggerstop.Net
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfuWCocm0m-Rheoh32MVPT0KZmEFLy6zFkuaPnavyMH4BOBTcW-n9W74B_-fB0Ne7sbCcJ5jJnp3r2i5kPn-k0NUzYCIeSobZV-A_favlU7RFWcY3J_x6KuQBpG1PQnB9T0Q9rxJ3mndI/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSEBroQGQhLo6PqGgnQqDnK91B5jK7MaA6Wudrx9JFHSia4TJNno3WUTe7L_GzmBYxYQ9NsSRumnm82axQldGHGcrEyDcnyBV8YHxodoSbCia4j7z8jfBR-LmdguOlEiBXw8PD0xuP3P4/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVaUpmVV05V7OGMn4kIx1hzzn_sdo0bUdTgkDQGMtvrQ_j750f0DfopjqUFVq2bDV7zrCL6nKG4M8Wi_WNq4-jg5WdXoDpFiMRdQGgEeec-r9WloLVyFidc3I9We4HXRLXQeaXr5-qFko/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVaUpmVV05V7OGMn4kIx1hzzn_sdo0bUdTgkDQGMtvrQ_j750f0DfopjqUFVq2bDV7zrCL6nKG4M8Wi_WNq4-jg5WdXoDpFiMRdQGgEeec-r9WloLVyFidc3I9We4HXRLXQeaXr5-qFko/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVaUpmVV05V7OGMn4kIx1hzzn_sdo0bUdTgkDQGMtvrQ_j750f0DfopjqUFVq2bDV7zrCL6nKG4M8Wi_WNq4-jg5WdXoDpFiMRdQGgEeec-r9WloLVyFidc3I9We4HXRLXQeaXr5-qFko/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>

The code in red color, is what you have to edit. And the code lines in blue color are the images being used in this widget, so you can use some other background image too (of similar dimensions) in case the above image is not looking good with your template.