How To Add Rollover CSS3 Navigation Bar To Blogger Blog

After a long time I'm going to share about new navigation bar for your blogger blog. Adding a attractive horizontal navigation menu bar in the top header part of your blog will let your visitors know about unique categories. It will not only give a professional look to your blogger blog but also your readers navigate through your blog easily.

In this short tutorial I'm going to tell "How To Add Rollover CSS3 Navigation Bar To Blogger Blog". Let's start the tutorial:

Rollover Navigation Bar

• Go To Your Blogger Dashboard >> Now Select & Open Your Blog
• See Sidebar and Click On Template Button
• Now Click Edit HTML >> Now Find ]]></b:skin> By Using CTRL + F
• After Finding Copy Below Code & Paste Before ]]></b:skin> Tag

/* The CSS Code for the menu starts here blogsdaddy.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%);

}

• Now Click Save Template Button & Wait For Few Seconds.
• Open "Layout" >> Now Click "Add A Gadget" >> HTML/Javascript Gadget
• Copy Below Code and Paste In It.

<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.blogsdaddy.com"><span data-text="Contact">Contact</span></a></li>

</ul>

• Now Replace All Above URL And Title With Your Own
• After Replacing Click Save Button.
• Its All Done, Visit Your Blog Now :)

I hope this short tutorial helped to add rollover CSS3 navigation bar to your blogger blog. If you need any kind of help from us then ask via comments below. Stay Blessed :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddy. You can also follow him on Google+.