Blogger Hacks: How To Add Glossy Tabs/Horizontal Navigation Labels/Pages In Blogger

Having Horizontal Tab navigation in Blogger is one thing,but having an animated Tab with multi-colored feature just like Websites can blow you away.Just by adding a few Css code into your Blogger template,even your blog can obtain the roll-over effect implemented in my blog(Click here to view it).The beautiful thing is its perfectly customizable.
Step1)First & Foremost,Download a copy of your Blogger template.Go to Design-->Edit Html-->CLick on download template.Always download a copy of your template if planning to tinker with Blogger codes.

Step2)Go to Design-->Page Element-->Click on Add gadget-->Select HTML & JavaScript Widget.

Step3)Copy the following code & Paste it into the Widget.Don't save it yet.Still somethings to be done:

<style>
.mbt-red-grey-menu{
border:5px solid #cd0000;
padding:0;
clear:both;
}
.mbt-red-grey-menu{
margin:0px;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNgdNaGEgZ5jpKwe-eUPvwtziDef09-kOc70qX4SLAraDkqfAgYe6N7V9W3I8rWSuma8r7NRm3NKDs479wbpiARooQyzfxmEHbW70ejQj75nsQoGxfeku6cTBPeUpH47lDRBL35x7XyUw/s400/blockdefault.gif) center center repeat-x;
}
.mbt-red-grey-menu li{
display: inline;
}
.mbt-red-grey-menu li a{
float: left;
color: #fff;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.mbt-red-grey-menu li a:visited{
color: #fff;
}
.mbt-red-grey-menu li a:hover, .mbt-red-grey-menu li a.selected{
color: #fff;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbDi-FUTmnQBy1Z3ZixFG7UioahbdqMSRtDai_AwDpGzka6jfm2hsKxlmGg4ukom6FZTNL3E1lcNfm2mtfs70Kn5VzLCFqewLxJ6G-fjsLyt9KuEL20pYVgj_SMPfcN60rIQMC20LtRe4/s400/blockactive.gif) center center repeat-x;
}
</style>
<ul  class="mbt-red-grey-menu">
<li><a href="#">Home</a></li>
<li><a href="#" >About Us </a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sitemap</a></li>
</ul>

The default tab config will be Red-Grey scale & incase you want a Grey-Red Cobo then exchange the codes mentioned in red vice-versa.
Step4)Now replace the "#" sign with your Blogger page Url.The more pages you want you can keep adding into the list.For instance when you create a new page like About me then add  one like following:

<li><a href="#">page-name</a></li>

Step5)Save the widget now and drag it to the Header column right below the blog title description.

                                                             And you are all done.In case you want to change the default red-grey to any other color like I did(Red/orange) feel free to approach me.In my next post I will dealing with Adding Drop down's and adding a your other blogger sites as navigational links like mine.