Some people contacted me asking about how to add a beautiful menu to a blogger blog sidebar, Today i’ll learn you in a very easy way how to add a menu to your sidebar and how to customize it’s colors to blend with your blogger template colors.

Go to your blogger account, and go to Dashboard >> Layout >> and on your Page Elements page, click Add A Gadget and choose HTML/JavaScript Add then copy the next code and paste it in the HTML/JavaScript Content area.

<style type="text/css">

/* Made By AllBlogTools.com */

#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #2175bc; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none; 
}

* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}

#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
}

#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000;  /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By AllBlogTools.com */
</style>

<div id="ddblueblockmenu">

<div class="menutitle">Browse</div>
<ul>
<a href="http://www.allblogtools.com/">Home</a>
<a href="http://www.allblogtools.com/about/">About us</a>
<a href="http://www.allblogtools.com/category/blogger-templates/">Blogger
templates</a>
<a href="http://www.allblogtools.com/category/tricks-and-hacks/">Blogger
Tricks</a>
<a href="http://www.allblogtools.com/blogger-tools/">Blogger Tools</a>
<a href="#">Edit</a></* You can copy this line each time you want to add a new element to your menu and change Edit to your text and change# to the url.*/>
</ul></div><font size="1">Menu By <a
href="http://www.allblogtools.com/">AllBlogTools.com</a></font>

Now click Save And you are done, please check your blog.
Now we’ll learn how to customize the menu colors to me it looks perfectly with your blogger template Or you can just leave it as you see it.

Now please look at the code above, you’ll see some codes are written in colors. in the above code i described what each part responsible for. All what you have to do is to go to our Html hex colors generator And get your favorite color code then paste it instead of the color code in the above code.

For example if you want to change the background color for the menu.
you’ll find a line that says

background-color: #2175bc; /*Menu background Color */

Just change 2175bc to your favorite color code that you got it from our Html hex colors generator

If you find the above code confusing or can’t understand what in the elements names in the menu, please check out the next image.

To see demo for this menu please click here, And please don’t hesitate to leave you comment if you need any support.

By Max

I'm Max, The founder and the admin of AllBlogTools.com I'm a very big van of blogging ,design and coding, I think that i'll die next to my computer.

No related posts found

• 20 responses so far!
•      Anup@Hack Tutors ( 10:39 AM on 2/22/10 )

  Thanks for the code. Good to have vertical menu bar

•      Max ( 12:08 PM on 2/22/10 )

  @ Anup, thanks for your comment, you are the first.

•      BEBEN ( 4:06 AM on 2/23/10 )

  i am second…hohohoho never mind…hihihihi

•      studio 817 ( 10:41 PM on 3/2/10 )

  its very nice…thanks

•      Julio Poveda ( 11:53 AM on 3/9/10 )

  Muchas Gracias!!!

•      Crownbay ( 9:53 AM on 3/14/10 )

  Your Comment Here …. * Cool, Thanks. u guys are great!

•      kotsila ( 4:21 AM on 3/15/10 )

  thank you very veru much!!!

•      Narutomania ( 7:58 AM on 3/18/10 )

  can you type a message @ my site about
  1)after adding the menu bar
  2)how do u put links?
  3)can we make sub pages in blog?

•      From Personal to Professional Blog - 100 Tips & Resources |Wordpress|Blogger | OrkutHeroes.com ( 9:55 AM on 3/19/10 )

  [...] to add Stylish Menu to your blog side [...]

•      Peter McCartney ( 8:38 PM on 3/25/10 )

  Hi! Thank you so much for putting this together – Well Done!

•      Erwan ( 12:03 PM on 3/30/10 )

  nice style…
  i like…
  but how to make thats navigations float on blogger?

  ty…

•      VnBlog@net ( 2:18 AM on 3/31/10 )

  Thank you, i tránlate it and post it in http://www.vnblognet.com/2010/03/tao-menu-ep-mat-at-tai-sidebar.html

  You can check and comment to me about copyrigh ( i’, glad)

•      Max ( 1:22 PM on 4/4/10 )

  @ VnBlog@net , thanks for the link.
  @ Erwan & Narutomania ,I think this is need another tutorial and i can’t explain it here in the comments area.
  @ All , Thanks for commenting, and thanks for your nice words.

•      ccir ( 10:33 AM on 5/18/10 )

  can you please help me to put a facebook comment box in my blog. I have tried all the way possible…

•      labu ( 6:00 AM on 5/26/10 )

  thanks

•      Max ( 11:04 AM on 6/3/10 )

  hi ccir, please visit our blogger tricks page.

•      Natalie ( 11:36 PM on 6/6/10 )

  Hello, i am having trouble creating my own names for the topics in the menu bar. And also putting in my own link.

  Thanks,
  Natalie.Ardyss@gmail.com

•      Ravi ( 5:56 AM on 6/22/10 )

  Thanks!!
  Its really very nice vertical menu bar..it looks good will try on my site.

•      Kristy ( 3:16 PM on 6/25/10 )

  I love your menu bar and that it is so easy to install. When I put it on my blog all my posts got chopped off and were put beneath the menu in the sidebar. Help?

•      castle ( 9:45 AM on 7/30/10 )

  i’m new here, but i’m very like it this blog, hohohoho… thank’s before