Horizontal CSS Indent Menu

Share

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.

Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.

Similar Posts

• Smooth horizontal CSS Menu with Blog Search engine
• Check Pagerank widget
• CSS Menu Widget with RSS Feed list
• Social bookmarking Widget for Blogger(II)
• Show top labels or labels having more posts at label widget

Article by Dinesh Dhakal

Dinesh has written 311 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.