Wednesday, July 13, 2011

Css horizontal Menubar for Blogger

0 comments
 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.

Leave a Reply

Related Posts Plugin for WordPress, Blogger...