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.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

37 comments

Write comments
lvs
January 24, 2009 2:17 PM delete

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

Reply
avatar
January 24, 2009 2:44 PM delete

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

Reply
avatar
June 02, 2009 4:52 AM delete

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

http://www.menusnearu.com

Reply
avatar
August 08, 2009 2:40 PM delete

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.

Reply
avatar
August 08, 2009 2:49 PM delete

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

Multi-tabbed widgets..here i come.

Reply
avatar
August 08, 2009 3:00 PM delete

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 !

Reply
avatar
January 01, 2010 9:09 AM delete

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

Reply
avatar
January 01, 2010 9:12 AM delete

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

Reply
avatar
January 02, 2010 2:00 AM delete This comment has been removed by the author.
avatar
January 02, 2010 2:01 AM delete

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

Reply
avatar
January 02, 2010 2:46 AM delete

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

Reply
avatar
January 02, 2010 2:53 AM delete

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.

Reply
avatar
January 02, 2010 3:13 AM delete

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

Reply
avatar
January 02, 2010 3:15 AM delete This comment has been removed by the author.
avatar
January 21, 2010 11:43 PM delete

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!

Reply
avatar
January 22, 2010 12:19 AM delete

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.

Reply
avatar
April 19, 2010 7:23 PM delete

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

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

Reply
avatar
April 20, 2010 9:24 AM delete

I think you have added the iwdget twice in your blog. The one in the right sidebar is working perfectly but the one in the left side isn't showin up any text on it...anyways I think the one in the left is enough to show all the links...

Reply
avatar
April 20, 2010 10:57 AM delete

no i didnot added it twice..

i removed and again copied from your post same script

but when ever i add it in html widget it shows 2 widget in left and right..

help.. i like this widget dont wanna lose it..

-Jokes For Fun

Reply
avatar
April 20, 2010 11:04 AM delete

In the entire code, WHEREVER you find the code menu, change it to menu2

like, this

#menu{

to this

#menu2{

and this,

id="menu"

to this:

id="menu2"

Reply
avatar
April 20, 2010 11:05 AM delete

even if i move that widget any where it will show that image only in left top.

i getting errors to post that script here..but i didnot do any changes only i changed links for contact and all.

and i also tested with ur real script (without changing links also)

but still same error.

does too much customization in template effects?

Jokes For Fun

Reply
avatar
April 20, 2010 11:10 AM delete

Thanks man that menu 2 worked !!!

Really thankyou and for helping faster than others...

Jokes For Fun

http://goodjokesonly.blogspot.com

Reply
avatar
April 20, 2010 11:12 AM delete

hey one question i had to ask (not related to this post)

that 1&1 domain service also keep asking about hosting..

so we need to pay every month for hosting also? even if i am gonna host it on blogger?

Reply
avatar
April 20, 2010 11:13 AM delete

You are welcome buddy.....i'll be there on your blog in a few minutes...thanks for being a part of BS forums ;)

Reply
avatar
April 20, 2010 11:15 AM delete

ya man really nice website yours ..because which i was following use to give all buggy scripts till now and never use to work (also never replied to comments)

feels like that guy was copying your content..

please tell about 1&1 service also(i mean do we need to pay for hosting also?)

i am going offline for 2hr will c your reply after that.

Jokes For Fun

http://goodjokesonly.blogspot.com

Reply
avatar
April 20, 2010 11:19 AM delete

Happy for u buddy...
No you don't have to pay for any hosting at 1and1 or at name.com
simply register a domain, and use it as a custom domain on any blogger blog. Hosting is all free provided by blogger.
The domain will cost you around $9/year at 1and1 and not a penny more than that.

Reply
avatar
April 20, 2010 1:45 PM delete

Sorry man i am new in website making.. 1 more question

how many subdomains are there?

and how they look? abc.com or abc.com/abc

for 3 blogs i need to buy 3 domain? or 1 domain and make subdomains?

how subdomain looks please give some example

thanks for answers

sorry to disturb again and again

http://goodjokesonly.blogspot.com

Reply
avatar
October 24, 2010 10:02 PM delete

I like to learn many things from the you

Reply
avatar
July 01, 2011 12:03 PM delete

hey divya!...m in a huge problem,i guess..
google hv stopped indexing my blog!...wat to do?
traffic is almost dead now! :-o :|

Reply
avatar
November 11, 2011 1:19 AM delete

Hi Divya,

I am new to creating blogs. Please help me with adding this widget to my blog.

When you say go to "Layout" and "Add a Gadget" of HTML/JavaScript type. What does that mean? and where do I need to paste the code?

Thanks in advance...

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon