Thursday, September 20, 2012

How To Add Simple CSS Menubar For Blogger

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.


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="" title="Home">Home</a></li>
<li><a href="" title="Home">Resources</a></li>
<li><a href="" title="Home">Inspiration</a></li>
<li><a href="" title="Home">Community Forums</a></li>
<li><a href="" title="Home">About Us</a></li>
<li><a href="" title="Home">Contact Us</a></li>
<!--MenuBar Ends--

Replace with your links.

7. Now save your HTML/Javascript'.

    You are done...


  1. As I can see altering look and feel in Blogger is way more complicated than in Worldpress, Isn't it?

  2. I've followed your tutorial and it works for me, the only problem is that when the menu bar is there, the sidebar ,containing tags etc.,moves from the right of the page to the bottom. What can I do to solve this problem?

    1. It should be problem with width of the menubar. Reduce width and try.
      If it doesn't work.Let me know your blog URL i will help.