Horizontal CSS Menu for Blogger Blogs

If your template (custom or otherwise) does not already have one, you might want to add a cool horizontal menu to your Blogger blog so that visitors can navigate the content more easily. Not long ago, I happened across an attactive horizontal CSS menu which I would like to make available to you in this post. To add it to your Blogger blog follow the steps below.
Here is a Demo

1. Login to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Search for (Ctrl + F) the </head> tag.

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

<style type='text/css'>#nav {width:100%;margin-left:-40px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5cWiEa4zeib_eNSRNt9ZBnssJq8qZwcaYqOT_41cFDqYyI6gOiDouhtDukEisqubu05Yj-Na3491GGvuppcd4DsMFvd1_PoCkmFJkXCIfH7l84oCiGLSMWBeIr4a2GAYxEXll9LRYyzg/h80/mainbg_thumb%255B1%255D.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm4ys5iQ2hHV7iVBflO68Qu8MUZkzLx1GfC2YNB0ffCzYQWJ1HyGQLRQUCr2ysV-3kZfGJVLN7i2p8-Hwqm89DxaDQXYx05MbrrOQ4DNRYkKbp1k82ZkKNIw4B4mTWcDBaGJ5WteGRGWA/h80/navi-bg_thumb%255B2%255D.jpg) no-repeat top right;color:#ffffff;}
#nav li a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm4ys5iQ2hHV7iVBflO68Qu8MUZkzLx1GfC2YNB0ffCzYQWJ1HyGQLRQUCr2ysV-3kZfGJVLN7i2p8-Hwqm89DxaDQXYx05MbrrOQ4DNRYkKbp1k82ZkKNIw4B4mTWcDBaGJ5WteGRGWA/h80/navi-bg_thumb%255B2%255D.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm4ys5iQ2hHV7iVBflO68Qu8MUZkzLx1GfC2YNB0ffCzYQWJ1HyGQLRQUCr2ysV-3kZfGJVLN7i2p8-Hwqm89DxaDQXYx05MbrrOQ4DNRYkKbp1k82ZkKNIw4B4mTWcDBaGJ5WteGRGWA/h80/navi-bg_thumb%255B2%255D.jpg) no-repeat right -80px;}
#nav li ul {display: none;}</style>  

IMPORTANT: Please host mainbg.jpg

and navi-bg.jpg











images yourself.

4. Save your template.

5. Now go to Design --> Page Elements and click on "Add a gadget".

6. Select "HTML/JavaScript", then add the code given below.


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


7. Save.

That’s all!