Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks / Other » Add Stylish Menu To Your Sidebar And A Very Easy Way To Use And Customize It.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add Stylish Menu To Your Sidebar And A Very Easy Way To Use And Customize It.

Add Stylish Menu To Your Sidebar And A Very Easy Way To Use And Customize It.

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


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.

Adding the horizontal menu to your blogger blog.

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 */

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 */

* 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 */

<div id="ddblueblockmenu">

<div class="menutitle">Browse</div>
<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.

Customize the menu colors.

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.

edit blogger vertical menu


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

Liked It ? Please Share


20 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Thanks for the code. Good to have vertical menu bar 🙂

  2. Max says:

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

  3. BEBEN says:

    i am second…hohohoho never mind…hihihihi

  4. studio 817 says:

    its very nice…thanks

  5. Julio Poveda says:

    Muchas Gracias!!!

  6. Crownbay says:

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

  7. kotsila says:

    thank you very veru much!!!

  8. Narutomania says:

    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?

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

  10. Erwan says:

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


  11. VnBlog@net says:

    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)

  12. Max says:

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

  13. ccir says:

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

  14. Natalie says:

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


  15. Ravi says:

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

  16. Kristy says:

    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?

  17. castle says:

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

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here