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
5. Now Find this code by using Ctrl+F <div id='content-wrapper'>
6. Paste below code Before <div id='content-wrapper'> code
*Replace # With your URL
*Replace Name with as your like.
7. Now save your template
you are done.
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/AVvXsEiIZMlivzMNCK_msph2r8FpK2Qp3f1_Uh19X4_CfRqXY3ngHC9ojA3HAp5Kn3vsgPLrOw64JsuCZzSdkzAZhiZxte3pcthN0GJbfwQXy7jj0Ofjh_iVwficI3U5iQNgfZG2snXxnbPO500/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/AVvXsEiIZMlivzMNCK_msph2r8FpK2Qp3f1_Uh19X4_CfRqXY3ngHC9ojA3HAp5Kn3vsgPLrOw64JsuCZzSdkzAZhiZxte3pcthN0GJbfwQXy7jj0Ofjh_iVwficI3U5iQNgfZG2snXxnbPO500/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.
I like the demo that you have shown.Really like the step by step process. I feel that adding a good menu bar to a blogger makes it look good.Thanks for the share!!
ReplyDeleteHi! I just want to ask how can I remove the " > " and " < " on left and right of my menu bar? Please help? Thank you.
ReplyDelete~genzelkisses.blogspot.com
@gen-zel
ReplyDeletecontact me via contact us page.i can
explain it with few lines.
Really awesone
ReplyDelete