Monday 16 July 2012

Add Attractive Ding-Dong Menu Bar To Blogger

This is a simple menu-bar. It include nice hover
style.Those who like simple menu-bar,you can
use this to your blog and can link with main pages.
menu bars,Check it here you ca do with easy
steps. Follow these steps to add it your blog.
DEMO

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

#bloggertrix-navigation  {
height : 27.5%;
margin-top : 0;
font-size : 12px;
}
#bloggertrix-navigation ul, #navigation li {
list-style-type : none;
display : inline;
margin : 0;
padding : 0;
}
#bloggertrix-navigation a:link, #navigation a:visited {
float : left;
display : block;
height : 33px;
line-height : 33px;
text-decoration : none;
background-image : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhihII5SFkitd_HVkyqiRTV3kG94JEQPt3F6eqygtmbESkEl2wlZbTMvkolOStoJ4w7vDKSlKZ0szx5MXgmjkFoE6-bETPxmxJhVZY9dogwmyEewADDTB0xhwORN4K99OI5J7F_GLYlnYc/s1600/bloggertrix.com-topmenu.jpg);
text-align : center;
width : 113px;
text-transform : none;
background-repeat : no-repeat;
overflow : hidden;
margin : 0 3px 0 0;
}
#bloggertrix-navigation a:hover, #navigation li#current a {
font-weight : 700;
padding-left : 0;
background-image : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhihII5SFkitd_HVkyqiRTV3kG94JEQPt3F6eqygtmbESkEl2wlZbTMvkolOStoJ4w7vDKSlKZ0szx5MXgmjkFoE6-bETPxmxJhVZY9dogwmyEewADDTB0xhwORN4K99OI5J7F_GLYlnYc/s1600/bloggertrix.com-topmenu.jpg);
background-repeat : no-repeat;
margin-top : 5px;
}
}

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

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

<table><tbody>
<tr><td width="56"></td> <td width="740"><div id="bloggertrix-navigation">
<div class="moduletable">
<ul id="mainlevel-nav">
<li><a href="#">Home</a></li>
<li><a class="mainlevel-nav" href="#">Downloads</a></li>
<li><a class="mainlevel-nav" href="#">Categories</a></li>
<li><a class="mainlevel-nav" href="#">About</a></li>
<li><a class="mainlevel-nav" href="http://www.bloggertrix.com/">Add This</a></li>
<li>
</li>
</ul>
</div>

</div>
</td></tr>
</tbody></table>

*Replace # With your URL
*Replace Name with as your like.

7. Now save your template
 you are done.

No comments:

Post a Comment