How to add fancy menu to blogg

Pin It Now!

Their are many ways to enhance the look of your blogg.one of the most important part of your blogg is your menu bar it plays an important part in enhancing the look of your blogg here way2bloggerz giving you a menu bar which can be added to your blogg by taking simple steps







PREVIEW

Steps

1. backup your templet before making any change to your css code
2. Now go to layout-->add a gadget -->chosse HTML/Javascript leave title blank now paste the below code in it

<div>

<ul id="w2bz">
<li><a href="#" >Home</a></li>
<li><a href="#" >Way2bloggerz</a></li>
<li><a href="#" >Contact</a></li>
<li><a href="#" >Blogg</a></li>
<li><a href="#" >Links</a></li>
</ul>
</div>

NOTE::
Replace '#' with your link url
you can add more tabs by adding   <li><a href="#">tab name</a></li>   before </ul> in line 9

3. Now go to Templet -->Edit HTML

    and find the code  

    ]]></bskin>

   Now paste the code given below before ]]></bskin>

ul#w2bz
{
 margin:0;
 padding:0;
 list-style-type:none;
 width:auto;
 position:relative;
 display:block;
 height:36px;
 font-size:12px;
 font-weight:bold;
 text-transform:lowercase;
 background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE_uDzRfoupl8fd_5b5RgnJTm95JprZMN_FhAcYFrWLu4uTir19-XVhAHHf1FKGSh9O3YCHpmxux_QHXkjQyqHxCdNQMnDN_dti6gDAuZh6mKMi0P7UO5mfT9xjnn1DqJm4B7pkPeR-IE/h120/bg.jpg") repeat-x top left;
 font-family:"Trebuchet MS",Helvetica,Arial,Verdana,sans-serif;
 border-bottom:1px solid #000000;
 border-top:1px solid #000000;
}

ul#w2bz li
{
 display:block;
 float:left;
 margin:0;
 pading:0;
}
 
ul#w2bz li a
{
 display:block;
 float:left;
 color:#999999;
 text-decoration:none;
 font-weight:bold;
 padding:12px 20px 0 20px;
 height:24px;

}
 
ul#w2bz li a:hover
{ 
 color:#FFFFFF;
 background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLHHgpGop0Kg-6k0TAXYPwT0bbZblJU1I05REWyluVm_Sr91eRtkcg-Tz976JbpRVyGnd3lWkhio-ujJFI1pqMpE3i5vammD8gh8Pbx7ptaElOpsJ6B7MPhD-nS4cJimnSGdFS4aRQba0/h120/over.jpg") no-repeat top right; 
}

4. now find /*tabs and delete the code below it

you are done now

Pin It Now!