Create a Customized Side Menu In Your Blogger / BlogSpot Blog

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(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXsev4OJbTI/AAAAAAAACBc/0EEtXs7ckkg/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(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseueLX9TI/AAAAAAAACBM/BQCk16wweRQ/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(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/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(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/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.

Leave a Reply

35 Comments on "Create a Customized Side Menu In Your Blogger / BlogSpot Blog"

Notify of
avatar
Sort by:   newest | oldest | most voted
lvs
Guest

have you done a phd in blog design. Very nice. If it is copyrighted does it mean we cannot use it?

View Comment
Divya Sai
Guest

Wow…….this is the best comment on this blog 🙂

I wish there’s a phd in blogging too, I would have definitely tried to get it 😉
—–

And regarding the copyright content…
although the author is allowing to use the widget freely, but IN CASE you are using the widget for commercial purpose (if u sell the widget), then you have to tell others that the creation has been done by ‘Styled Menus’
—–
So being a blogger, u can simply ignore that word “copyright”, and use it wherever you want in your blog

Regards
Sai

View Comment
Menus
Guest

Hi…Great information…
I am going to try this in my blog..

http://www.menusnearu.com

View Comment
min HMN
Guest

😀 thanks for share

View Comment
thelittlenaga
Guest

Hi! Just started a blog few days ago.

This is a nice widget, looks really nice and cool. Skimmed a lot of tutorials on blogging and customizing 'em.

Won't say this has been the best tip in its category, but i think i'll be sticking with this widget :D.

/*Dang this greedy heart ;;) */ A tabbed-horizontal widget would be great.

View Comment
thelittlenaga
Guest

Uh ah! seems like i've missed some of your other posts 8-}

Multi-tabbed widgets..here i come.

View Comment
Divya Sai
Guest

Hey 'littlenaga'…great to have you here, keep checking the pictorial-related posts widget in every post, to find all the widgets you need…Happy Blogging !

View Comment
JaNicE
Guest
GHz SparkZ
Guest

Hello Sai, will this work on wordpress as well??:-/

View Comment
Sai @ Blogger Widgets
Guest

Yeah it should work…have you tried it on any WP blog?

View Comment
GHz SparkZ
Guest

Not yet..

View Comment
Sai @ Blogger Widgets
Guest

ohk, then go ahead and try it out.

View Comment
GHz SparkZ
Guest

Anyway,your post:
Collapsible Multi-Tabbed Widget was awesome!
I tried it on my blog.
I was searching for it everywhere..:)

View Comment
GHz SparkZ
Guest

No,it doesn't work on wordpress.:((
It ruined my template but I restored it.=((

View Comment
Sai @ Blogger Help
Guest

I havn't worked much on WP themes, so I cannot help you much on this, but if you know any WP theme designer/troubleshooter I would advice you to take his help in this.

Anyways, the exact code placement goes like this:
The code in red should be pasted in a text widget/box.

And the code in black whould be pasted in the <head> region of your template. I hope you have done this way only.

View Comment
GHz SparkZ
Guest

ooh..
No wonder..
I simply pasted the whole code into a text widget/box.
=))=))
Thanks!

View Comment
Kooly
Guest

why the links takes me out side my blog? do you know acode that would only add menus on the same blog? thank you though, it looks good, i'll just have to edit a little to fit my blog theme!

View Comment
Divya Sai
Guest

Hi Kooly,

Check the code highlighted in RED color. You have to edit the links in this part of the code. Replace links like about.com or google.com to some of your own posts/articles.

View Comment
Spotlight
Guest

nice, thanks dear !!

View Comment
Good Jokes
Guest

hey its showing left side image and on right side everything..

please check my blog and help to fix it http://goodjokesonly.blogspot.com

View Comment
wpDiscuz