Cool Navigation Menu For Blogger(horizontal)

A Navigation Menu Bar(see in our blog) is a strip at the top of the blog and containing links(Home,About,Contact,Rss...) to the main pages in the blog or main tags of blog.

this is simple and single level menu if want multi level navigation menu see our blogger help page...

If u want see like this Menu in your blog just go through the following steps.....

First Download the Template

Step 1:Login to Blogger dashboard--> layout- -> Edit HTML

Find(CTRL+F) ]]></b:skin> tag.

Now copy and paste below code just before ]]></b:skin> this.

#topnavbar {
background: #000000 url(); /* Background color of Menu */
width: 100%;
height: 30px;
color: #FFF;
margin: 0;
padding-top: 0px;
}

ul#topnavmenu{list-style-type:none;width:100%;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:0 0 0 0;}
ul#topnavmenu li{display:block;float:left;margin:0 0 0 4px;height:27px;}
ul#topnavmenu li.left{margin:0;}
ul#topnavmenu li a{display:block;float:left;color:#fff;background:#484848;line-height:22px;text-decoration:none;padding:0px 17px 0 18px;height:23px; margin-top:3px}
ul#topnavmenu li a.right{padding-right:19px;}
ul#topnavmenu li a:hover{background:#0080FF; color:#ffffff}
ul#topnavmenu li a.current{color:#ffffff;background:#0080FF;}
ul#topnavmenu li a img{border: none; margin: 0 3px 2.5px 0; }

Customizing the menu by changing the following color code

#484848; (ash color)Menu default color.
#ffffff: (white) Menu font color.
#0080FF; (light Blue) Menu Over color.

Step 2:
1. If you are a Basic user or to add some where in blog(not at Below or top of the Header) just Follow these steps

Go to >> page elements

Then find the place where u want to add the Navigation Menu ...

Add Gadget >> select HTML/Javascript >>

Paste the following code in the content box.

2.If you want to add the Navigation menu top or below of header just follow these steps

2.1Go to >> Layout >> Edit HtTML >>

2.2Scroll Down of Find(CTRL+F) the following code....

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

2.3Replace above code with the following

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

2.4To change the position(Top or Below of Header) of Navigation menu find the following code(generally it is the next line of above code)

<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header' />

Change locked='true' to locked='false'

2.5Save the Template

2.6 Go To >>Layout >> Page Elements >>

you find here 'Add a Gadget' just above the Header

Add a Gadget >> HTML/JavaScript >> paste following code in the content box....

<ul id='topnavmenu'>
<li><a class='current' expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>About Us</a></li>

<li><a href='http://techtasks.blogspot.com/2009/05/contact-us_19.html'>Contact Us</a></li>

<li><a href='http://feedburner.google.com/fb/a/mailverify?uri=techtasks' target='_blanck'>eMail Feed</a></li>

<li><a href='#'>Advertise</a></li>

<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI1FUF2-ls88G-fBiEB7Tjq3Rllvm6clykCvwjfZksBjU4Nki0lJlx-I4Rzss_GXFKHSA15Pj6p2gGjD-ce9mTMmi5GQ2034QcDteVcpwaERzyevG8aKWk3u9S2P2OYX0aA3HTJ0awi3w/' style='vertical-align:middle'/>Posts</a></li>

<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'><img alt='Subscribe to Comments' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI1FUF2-ls88G-fBiEB7Tjq3Rllvm6clykCvwjfZksBjU4Nki0lJlx-I4Rzss_GXFKHSA15Pj6p2gGjD-ce9mTMmi5GQ2034QcDteVcpwaERzyevG8aKWk3u9S2P2OYX0aA3HTJ0awi3w/' style='vertical-align:middle;'/>Comments</a></li>
</ul>

</div>

Step 3:You can arrange it below the header by dragging it below the title.

Step 4:Finally save and see the blog.

Don't forget subscribe our Feed