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

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

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

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

Demo.

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