Friday, March 30, 2012

How To Add Cool Css Menubar For Blogger

0 comments
This is a attractive menu bar to your blog,
This tutorial will helps you to add it to your blog.

DEMO

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

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


Cool Css Menubar For Blogger

#btrixbar {width:100%;margin-left:-40px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJPmgwmJvf4jeJV_s-TXXEAHG_cdeUc9SNtd3swXcDWriv1ZDeRp-mxghNEglKQkJKlujtz-4DIeT7Ze0z6nprJZPXrQvYq9CgpuZ6_Kx2TVnVJfzmTYsyH21UqTIv4vJMRzAeXR2p8TM/s1600/btrixmain.jpg) repeat-x;}
#btrixbar li {float: left;display: block;}
#btrixbar li a {float: left;display: block;padding: 12px 18px 12px 18px;text-transform: uppercase;text-decoration:none;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4c4IK6NAKVlPYktg4ruaA4ELizJY90mTCIjSejZFOkpvGlo4NJO7qUxFeyXGiNp07ZSgaXACd2yX09FbRDU1RT7hnimdKWCcu8t0JFjOIGKRLzwHHdSBCkHJYrJH83NfMTUXyqo-Fo-3x/s1600/brix-bg.jpg) no-repeat top right;color:#ffffff;}
#btrixbar li a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4c4IK6NAKVlPYktg4ruaA4ELizJY90mTCIjSejZFOkpvGlo4NJO7qUxFeyXGiNp07ZSgaXACd2yX09FbRDU1RT7hnimdKWCcu8t0JFjOIGKRLzwHHdSBCkHJYrJH83NfMTUXyqo-Fo-3x/s1600/brix-bg.jpg) no-repeat right -40px;color:#ffffff;text-decoration:none;}
ul#btrixbar li.current_page_item a, ul#nav li.current-cat a {color: #fff;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4c4IK6NAKVlPYktg4ruaA4ELizJY90mTCIjSejZFOkpvGlo4NJO7qUxFeyXGiNp07ZSgaXACd2yX09FbRDU1RT7hnimdKWCcu8t0JFjOIGKRLzwHHdSBCkHJYrJH83NfMTUXyqo-Fo-3x/s1600/brix-bg.jpg) no-repeat right -80px;}
#btrixbar li ul {display: none;}


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

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

<ul id="btrixbar">
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#" title="#">Blogger</a></li>
<li><a href="#" title="#">Comments</a></li>
<li><a href="#" title="#">Themes</a></li>
<li><a href="#" title="#">Forum</a></li>
<li><a href="#" title="#">Download</a></li>
<li><a href="#" title="#">Contact Us</a></li>
</ul>
<div class="clear"></div>

*Replace # With your URL
*Replace Name with your any menu name.

7. Now save your template
 you are done.

Leave a Reply

Related Posts Plugin for WordPress, Blogger...