Wednesday, July 13, 2011

Css horizontal Menubar for Blogger

 This is cool thin menu for your blogger.
Follow below step to  add it to your blog.




1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

#pagemenucontainer{height:20px;padding:0 0;margin:5px 0 0 0}
#pagemenu{height:26px;float:left}
#pagemenu,#pagemenu ul{padding:0;margin:0;list-style:none;line-height:1}
#pagemenu{margin-bottom:1px}
#pagemenu ul{float:left;list-style:none;margin:0 0 0 0;padding:0}
#pagemenu li{float:left;list-style:none;margin:0;padding:0}
#pagemenu ul li{list-style:none;margin:0;padding:0}
#pagemenu li a,#pagemenu li a:link{color:#000;display:block;margin:0 2px 0 0;padding:2px 16px;text-decoration:none;text-transform:uppercase;font:normal 11px Arial,Helvetica,sans-serif;background:#ededed;}
#pagemenu li a:hover,#pagemenu li a:active{color:#FFF;display:block;text-decoration:none;background:#c00;}
#pagemenu li.current_page_item a{color:#FFF;text-decoration:none;background:#c00;    }
#pagemenu li:hover,#pagemenu li.sfhover{position:static}

5. Now Go to Design >>page Element

6.Click Add gadget (under your header)  and Select HTML/JavaScript 

7. Now paste paste below code

<div class="widget PageList" id="PageList1">
<div class="widget-content">
<ul id="pagemenu">
<li class="current_page_item"><a href="URL">Home</a></li>
<li><a href="URL">Downlaod</a></li>
<li><a href="URL">Contact</a></li>
<li><a href="URL">FAQ</a></li>
<li><a href="URL">Login</a></li>
<li><a href="URL">Live</a></li>

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

Replace URL With your URL
Replace Blue color words with any names you want to put as menu name.

8. Now save  HTML/JavaScript  
You are done.

4 comments:

  1. it works!.. thx a lot.. really appreciate it! hehehe..

    ReplyDelete
  2. Hi,
    Can you help me align for the word center with border ?
    I did it step by step but the word on top the border
    http://i.imgur.com/4URnLLx.png

    ReplyDelete