Simple Rounded Corner Css Navigation Bar to Blogger

In this tutorial im gonna  explain how to add simple rounded corner Css Navigation Bar to blogger.
This menu work fine with every modern internet browsers.You can link with your main pages by using this navigation bar. Im using Css3 and HTML Just check  out demo.Its  easy  to add to blogger

    

Demo

You may like these articles
     Underline Hover Effect Css Navigation Bar
     Rollover Css3 Navigation Bar
     Beautiful Bouncing jQuery Menu Bar

How to add Rounded Corner Css Navigation Bar

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. Find this tag by using Ctrl+F    ]]></b:skin>

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

/* The CSS Code for the menu starts here bloggertrix.com */
#roundbar_btrix {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxpTELAOYYL9eq2V3_f-Ifa8pmRMGxhRD3B7r6l1wjcQQVeam4rswj4tr-p9I0pgdqqqhXYu-zR9aUutm2H5CA9KPo2zoBOvS7oCJDz6uftmC2CGYYwD3zMewfjjBIxu_u-NB8uZyRYw/s1600/round_menu.png);
background-repeat:no-repeat;
margin-left:14px;
padding-left:10px;
height:46px;
}

#round_btrix {
float:left;
height:27px;
margin-bottom:0;
font-size:100%;
width:1000px;
line-height:normal;
margin-top:0
}
#round_btrix ul {
list-style:none;
margin:0;
padding:0
}
#round_btrix li {
display:inline;
margin:0;
padding:0
}
#round_btrix a {
float:left;
padding-right:1px;
font-weight:bold;
text-decoration:none
}
#round_btrix a span {
display:block;
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-weight:bold;
height:27px;
color:#FFF;
font-size:100%;
border-left:0 solid #dcdcdc;
margin-right:0;
float:none
}
#round_btrix a:hover span {
color:blue;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSQFvxw1xlswUwcK9CFJ3_hW2zZRkXfOp9VclTcRgJZIoy3-XCC9a4c_tjDAIwVtUnLBqdd1cWHbAOcY8mhhzSj224KA-ooWDyE7gIJyfOPW_xKLqksMl31NWBJm80Pjs3IIJiZrJgK04/s1600/round_hover.png);
background-color:maroon;
background-repeat:repeat-x;
height:27px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-weight:bold;
font-size:100%;
background-position:0 0
}

6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<div id="roundbar_btrix">
<div id="round_btrix">
<ul>
<li id="current"><a href="#" title="home"><span>Home</span></a></li>
<li><a href="#"><span>Albums</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
<li><a href="#"><span>Lyrics</span></a></li>
<li><a href="#"><span>Music</span></a></li>
<li><a href="#"><span>Videos</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul></div></div>

Replace # with your links.

9. Now save your HTML/Javascript'. You are done.

Hope this Rounded Corner Css Navigation Bar helps to make your blog attractive.

Share this post