Tuesday, July 17, 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/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.

4 comments:

  1. 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!!

    ReplyDelete
  2. Hi! I just want to ask how can I remove the " > " and " < " on left and right of my menu bar? Please help? Thank you.


    ~genzelkisses.blogspot.com

    ReplyDelete
  3. @gen-zel
    contact me via contact us page.i can
    explain it with few lines.

    ReplyDelete