Charm CSS Horizontal Menu For Blogger/Websites

Posted by Lasantha Bandara on December 29th, 2009 File Under : css, html2 Comments

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.

Charm CSS Horizontal Menu For Blogger/Websites

<style type='text/css'>

#menu {text-align:left;height:36px;background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/SznEaEVrk3I/AAAAAAAAAkc/BNOaqEMWQjY/menu.gif) repeat-x top;padding:0px 10px 0px 10px;vertical-align: top;margin:0px 4px 0px 4px;}

#menu ul {height:36px; width:100%;overflow:hidden;}

#menu li { font: 15px Arial, Helvetica, sans-serif; display: inline; margin-right: 10px; padding:5px 0px 5px 0px; font-weight:bold; line-height:36px;height:36px;}

#menu li a { color: #494949; text-decoration: none;}

#menu li a:hover {color: #333;text-decoration: underline;}

</style>

Note : You can change height,width,... as you like.Host menu.gif 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.

<div id="menu">

<ul>

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

<li><a href="#" title="#">Blogging Tips</a></li>

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

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

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

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

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

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

</ul>

</div>

You are done.

Demo

File Under : css, html

2 Responses to “Charm CSS Horizontal Menu For Blogger/Websites”

  1. Beben says:

    you are one diligent man
    and so smart really smart...

  2. cuaryos says:

    Great blog. but i think too much scroll on your sidebar. little hard to read that. good luck

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.