Rollover Css3 Navigation Bar for Blogger

This is a rollover style navigation bar. Im gonna explain how to add  it to blogger. You can see a nice style hover in this menu.This effect work  fine with every modern internet browsers. Im using Css3 and HTML, Just check out demo.Its easy to add to blogger.Lets give a try.

Demo

How to add Rollover Css3 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 */
ul{
margin:0;
padding:0;
}

li{
display:inline;
list-type:none;
}

a.glidebutton{
display: inline-block;
position: relative;
color: #4A4A4A; /* default color */
background: #ececec; /* default bg color */
text-decoration: none;
font: bold 14px Arial; /* font settings */
letter-spacing: 2px; /* font settings */
overflow: hidden;
height: 30px; /* height of each button */
text-align: center;
border-radius: 5px; /* border radius */
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child{ /* first span inside button */
position: relative;
display: block;
height: 100%;
padding: 6px; /* padding of button */
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child:after{ /* CSS generated content */
content: attr(data-text); /* Duplicate text of span markup */
display: block;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;
position: absolute;
top:100%;
left:0;
}

a.glidebutton:hover{
color: black; /* color of button on hover */
background: #72cb47; /* bg color of button on hover */
box-shadow: 0 0 4px green inset;
}

a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}

6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<ul>
<li><a class="glidebutton" href="#"><span data-text="Home">Home</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="News">News</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Tools">Tools</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Site Map">Site Map</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Download">Download</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="About">About</span></a></li>
<li><a class="glidebutton" href="http://www.bloggertrix.com"><span data-text="Contact">Contact</span></a></li>
</ul>

Replace # with your links.

9. Now save your HTML/Javascript'.You are done.
If you have a problem related to Rollover Css3 Navigation Bar, leave a comment.

Share this post