How To Add Simple CSS Menubar For Blogger

Oleh Unknown

20 Eylül 2012 Perşembe

Bagikan :

Tweet

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

Tag : CSS, HTML, Menu bar