Saturday, February 4, 2012 | By: Goutham Baratam

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.

6 comments:

obat kuat pria said...

postingan yang bagus tentang"Css horizontal Menubar for Blogger "

windows 7 home premium activation key said...

The touch-enabled interface delivers an amazing user encounter, enabling windows 7 professional activation key audio lovers to customize their Deezer property web page close to their favorite artists and tracks. It appears superior as windows anytime upgrade keywell - Deezer is designed to suit seamlessly to the rapid and fluid user interface in Windows 8.

WOW gold said...

I want to extend my greatest appreciation with the article you post me really love to read it

cat videos said...

I like reading posts with such a fresh point of view on this interesting topic. Thank you so much.

Nissan car leasing said...

I hope you this website are very popular for providing the great info in this blog. I am very much satisfied by the info in this blog. Thanks a lot for visiting the great website and helpful info in this blog.

Carlos said...

I am impressed with this internet site , very online-essay-writer.org I am a big fan .

Post a Comment