Translate

Labels

Popular Posts

Home » » SIMPLE ROUNDED CORNER CSS NAVIGATION BAR TO BLOGGER

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.

bloggertrix
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/AVvXsEiMDdtQ94g0f8jVVzXpiDf2Zp-vmPx8D9Zi-Tm5Fvz293ugDaejCtrCHAs7-7beuE4cf50m5pI8NjeHQq70rCxvOuayqO0z28aNajeU-dnezW8SwHNU2FY9UwhUWvD7zH8fEefDwGLdrDA/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/AVvXsEi2F3_fEopduBJyluC2C_vCyzxxk2zk1dP315kGa1WPnmG6Udu_0yyeSkPw8We10bUwAe7m7Y3QuFw7wvGEuNI_R6RBNsju_cVulw3yts6yddoFvHQ0bVCPHSd5Jqx_VK66Mw0q8sqAvrU/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.
Blogger Tricks Blogger Tricks