Blogger Tips And Tricks|Latest Tips For Bloggers

This is a another nice css horizontal menu for your blogspot blog or website.To add it to your site follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>#nav {width:100%;margin-left:-40px;background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/S0b_iTEmRGI/AAAAAAAAAlc/zRdPcwzXDo4/mainbg.jpg) repeat-x;}

#nav li {float: left;display: block;}

#nav li a {float: left;display: block;padding: 12px 18px 12px 18px;text-transform: uppercase;text-decoration:none;background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/S0cJCnJveiI/AAAAAAAAAl8/7kmtn2X1s2Q/navi-bg.jpg) no-repeat top right;color:#ffffff;}

#nav li a:hover {background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/S0cJCnJveiI/AAAAAAAAAl8/7kmtn2X1s2Q/navi-bg.jpg) no-repeat right -40px;color:#ffffff;text-decoration:none;}

ul#nav li.current_page_item a, ul#nav li.current-cat a {color: #fff;background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/S0cJCnJveiI/AAAAAAAAAl8/7kmtn2X1s2Q/navi-bg.jpg) no-repeat right -80px;}

#nav li ul {display: none;}</style>

Note : Host mainbg.jpg and navi-bg.jpg images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<ul id="nav">

<li class="current_page_item"><a href="#">Home</a></li>

<li><a href="#" title="#">HTML</a></li>

<li><a href="#" title="#">CSS</a></li>

<li><a href="#" title="#">PHP</a></li>

<li><a href="#" title="#">MySQL</a></li>

<li><a href="#" title="#">About</a></li>

<li><a href="#" title="#">Contact</a></li>

</ul>

<div class="clear"></div>

You are done.

Demo

File Under : css, html