January 24, 2009

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.


37 comments:

lvs said...

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

Divya Sai said...

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

Menus said...

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

http://www.menusnearu.com

min HMN said...

:D thanks for share

thelittlenaga said...

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.

thelittlenaga said...

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

Multi-tabbed widgets..here i come.

Divya Sai said...

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 !

JaNicE said...

nice!!

GHz SparkZ said...

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

Sai @ Blogger Widgets said...

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

GHz SparkZ said...

Not yet..

Sai @ Blogger Widgets said...

ohk, then go ahead and try it out.

High Speed Downloads Team said...
This comment has been removed by the author.
GHz SparkZ said...

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

GHz SparkZ said...

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

Sai @ Blogger Help said...

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.

GHz SparkZ said...

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

High Speed Downloads Team said...
This comment has been removed by the author.
Kooly said...

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!

Divya Sai said...

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.

Spotlight said...

nice, thanks dear !!

Good Jokes said...

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

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

Sai - Blogger Widgets said...

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...

Good Jokes said...

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

Sai - BloggerStop.Net said...

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"

Good Jokes said...

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

Good Jokes said...

Thanks man that menu 2 worked !!!

Really thankyou and for helping faster than others...

Jokes For Fun

http://goodjokesonly.blogspot.com

Good Jokes said...

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?

Sai - Blogger Help said...

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

Good Jokes said...

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

Sai - Blogger Widgets said...

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.

Good Jokes said...

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

n66ee said...

nice for tips trick

maycatdecal said...

I like to learn many things from the you

Mon said...

Wow. Thank you! :X

Manmeet Singh Ramgarhia said...

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

Nidhi said...

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...

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy