Horizontal CSS Indent Menu

Now the use of CSS Menus has been increased in blogs. People Use vertical or CSS menus in their blog to make the Blog attractive and easy to use.So Bloganol brings you the indent CSS menu. Although the real developer of this Indent CSS menu is dynamicdrive Bloganol has modified it a little therefore bloganol can be also said as the side developer of the modified indent CSS menu .You can also see dyanmic drive demo and Tutorial Page.. Now let's start the installation of this CSS Menu.

Step 1
Copy the following code and Paste it to the head section of your blog Template just before ]]></b:skin> Tag.

/* horizontal Indent CSS menu
------------------------------------------- */
/*Credits: www.dynamicdrive.com */
/*Modified and Promoted by bloganol.blogspot.com */


<style type="text/css">

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 80%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(http://i306.photobucket.com/albums/nn241/deineshd/indentbg1.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(http://i306.photobucket.com/albums/nn241/deineshd/indentbg2.gif) center center repeat-x;
}

</style>

Step 2
Now the second step is to Copy the Following Code and paste it to Your Blog.To keep it in your blog Goto blogger Layout -> Add a new Page Element -> Html/Javacript , paste the code and Click save changes.

<div class="indentmenu">
<ul>
<li><a href="http://www.bloganol.blogspot.com/" target="_blank">Bloganol</a></li>
<li><a href="http://bloganol.blogspot.com/search/label/Blogger%20templates" target="_blank">Blogger templates</a></li>
<li><a href="http://bloganol.blogspot.com/search/label/blogger%20hacks" target="_blank">Blogger hacks</a></li>
<li><a href="http://bloganol.blogspot.com/search/label/blogger%20tools" target="_blank">Blogger Tools</a></li>
<li><a href="http://bloganol.blogspot.com/search/label/blog%20widgets" target="_blank">Blog Widgets</a></li>
<li><a href="http://bloganol.blogspot.com/search/label/blogger%20tricks" target="_blank">Blogger Tricks</a></li>
</ul>
<br style="clear: left" />
</div>

After you complete the above process your CSS Menu is Ready.