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