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

    


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/AVvXsEjBLQIcqEb5w-mz7Q4n1zEJNRSCLhFdHdqc15I48SLVPQYxL84-XKMAc1HWhNfXNOMN5Fv-hjGBB3kiEQDxcGDif3Gn8bA-dCLiHLM_D5BS-dw7SH8098Bn0RAyiV7WH6z6ORHa0M8nlRo/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/AVvXsEg2dvUfh1maJEsmam7KZf9S4oiepGSltsZT8ihOu1FjcuFS16q7y7yL5IfauYIr7xf3hJGWCMdu3TDw0zybF13fcJIIT1hl-PxsIb-5Wl9GjYdYR6AqDvu3Iz54xnt-9-nQZLTbaKQuNXc/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...