How To Add Simple CSS Menubar For Blogger

Blogger Tips » blogger-tips-tricks , CSS , Menu-bar » How To Add Simple CSS Menubar For Blogger

How To Add Simple CSS Menubar For Blogger

Posted by: .: Admin :. on 10:15 PM

0 comments

This is simple CSS menu bar for your blog.
You can add it easily.From this post I will
explain tutorial for new blogger interface.
because now we cant get back old interface.
Hope you can understand it well.Other menu
bars here.

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

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

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

#demo-container{padding:25px 15px 0 15px;background:#67A897;}

ul#simple-menu{list-style-type:none;width:100%;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:11px 0 0 0;}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;background:#4A6867;line-height:27px;text-decoration:none;padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#2E4560;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}

4. Go to blogger Design > Page Element.

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<!--MenuBar Starts-->
<div id="demo-container">
<ul id="simple-menu">
<li><a class="current" href="http://www.bloggertrix.com/" title="Home">Home</a></li>
<li><a href="http://www.bloggertrix.com/" title="Home">Resources</a></li>
<li><a href="http://www.bloggertrix.com/" title="Home">Inspiration</a></li>
<li><a href="http://www.bloggertrix.com/" title="Home">Community Forums</a></li>
<li><a href="http://www.bloggertrix.com/" title="Home">About Us</a></li>
<li><a href="http://www.bloggertrix.com/" title="Home">Contact Us</a></li>
</ul>
</div>
<!--MenuBar Ends--

Replace with your links.

7. Now save your HTML/Javascript'.

You are done...