The Round Hover Effect Css Menubar For Blogger

Simple css menu bar for blogger.Its include nice  hover style.You can add this to simple blogs and can link with main pages.menu bars, you ca do with easy steps. Follow these steps to add it your blog.

1. Log in to blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

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

/*menubar by http://xtremetipsntricks.blogspot.in/ */

#bloggertrixmenu{

display:block;

width:100%;

overflow:hidden;

background:url("") repeat-x scroll 0 -357px #E3E3E3;

border-bottom:1px solid #FFFFFF;

border-top:1px solid #FFFFFF;

height:35px;

position:relative;

}

#btrixmenu1{

margin: 0px 10px;

padding: 0px;

width:940px;

height:88px;

}

#btrixmenu1 ul {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#btrixmenu1 li {

float: left;

list-style: none;

margin: 5px 0px;

padding: 0px 5px;

line-height:20px;

border-left:1px solid #FFFFFF;

border-right:1px solid #CCCCCC;

}

#btrixmenu1 li a, #btrixmenu1 li a:link, #btrixmenu1 li a:visited {

color:#FFFFFF;

display:block;

display: block;

margin: 0px;

padding: 0px 10px ;

color:#4E4E4E;

font:bold 120%/20px 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif;

text-align:center;

text-decoration:none;

text-shadow:1px 1px 1px #FFFFFF;height:23px;

}

#btrixmenu1 li a:hover {

background:#282828;

color: #fff;

margin: 0px;

padding: 0px 10px ;

text-decoration: none;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

text-shadow: none;

}

#btrixmenu1 li.current_page_item a{

background:#7a8c12;

color: #fff;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

text-shadow: 1px 1px 1px #535F0C;

}

/*menubar by http://xtremetipsntricks.blogspot.in/ */

5. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

6.  Paste below code Before <div id='content-wrapper'> code

<div class='clear'></div>

<div id='xtremetipsntricksmenu'>

<div class='btrixmenu1' id='btrixmenu1'><ul>

<li><a class='home' href='YOUR BLOG ADDRESS HERE'>Home</a></li>

<li><a href='URL'>TITLE 1</a></li>

<li><a href='URL'>TITLE 2</a></li>

<li><a href='URL'>TITLE 3</a></li>

<li><a href='URL'>TITLE 4</a></li>

<li><a href='URL'>TITLE 5</a></li>

<li><a href='http://xtremetipsntricks.blogspot.in/'>Add This</a></li>

</ul></div></div>

*Replace Url With your URL
*Replace Title with as your like.

7. Now save your template
 you are done.