Tuesday, July 31, 2012

Add Cool Css Sprites Menu For Blogger

This is cool sprite menu style. It work with
Firefox 3.5, IE 7, Chrome 3.0 & Opera 9.02
Its look very attractive.I include 4 style menu.
You can make attractive your blog. Its easy to
add it to your blog.Follow below simple steps.
Earlier i created more horizontal menubars,
click below links to view all. most of are include
with demo.

Menubar Collection
sprite-menu
1. Log in to blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

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

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

<div class="bloggertrix-navi1">
  <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="http://www.bloggertrix.com/"></a></li>
  </ul>
</div>

*Replace # With your URL

5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below one of code Before ]]></b:skin> tag (choose a style as your like.)

Style 1

/*menubar by bloggertrix.com */
.bloggertrix-navi1 {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bloggertrix-navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bloggertrix-navi1 ul li {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEaHX8b5b3TBNYcvza1j3MVvf9e9TIHuRD-1jBMRwrJC5AoJXmwWKd6Q7WEjjkSMPNlyvGKLPmesquvRps2BJmMOmq0YL4uT_kHH8JnWGgjbQM5J_9k1qhoUHJHFOCXNkxSFrKZEhhniA/s1600/bloggertrix.com-tab-1.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bloggertrix-navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.bloggertrix-navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bloggertrix-navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bloggertrix-navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bloggertrix-navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bloggertrix-navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bloggertrix-navi1 ul li:hover {
    z-index:1000; }
.bloggertrix-navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.bloggertrix-navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.bloggertrix-navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.bloggertrix-navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.bloggertrix-navi1 ul li.sm5:hover {
    background-position:-498px -75px; }
/*menubar by bloggertrix.com */

Style 2

/*menubar by bloggertrix.com */
.bloggertrix-navi1 {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bloggertrix-navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bloggertrix-navi1 ul li {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBuq9GLlTR8Fos2U4-zxL9OFyTGFa-3R_6dk8g5YTqzmcjOlETyft_c4n99pGJhXxuZ3hHIaCYSDsewEkm607AUrw6Qx0sgZkkOh5Vxp0LiLQkgk5cm9Djvhcf2E8XDiGKf5By8uLuWpI/s1600/tab-2.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bloggertrix-navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.bloggertrix-navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bloggertrix-navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bloggertrix-navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bloggertrix-navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bloggertrix-navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bloggertrix-navi1 ul li:hover {
    z-index:1000; }
.bloggertrix-navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.bloggertrix-navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.bloggertrix-navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.bloggertrix-navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.bloggertrix-navi1 ul li.sm5:hover {
    background-position:-498px -75px; }
/*menubar by bloggertrix.com */
7. Now save your template
     you are done.
If you cant change menu names yourself, Leave a comment with your names. ill do it for you.

12 comments:

  1. div id content-wrapper can not found this code

    ReplyDelete
  2. @Bangladeshi Entertainment
    Whats is your blog URL?
    If you want, you can add it as gadget
    (1.Log in to blogger Design > Page Element.
    2. Click Add Gadget and select 'HTML/Javascript
    3. paste that step 4 code
    4. save your HTML/Javascript')

    ReplyDelete
  3. can i use this menu bar for new template?? if yes, how?

    ReplyDelete
  4. style 1 works, style 2 doesnt works plz fix!!

    ReplyDelete
  5. style 2 is not working in my blog big dots are appearing. plz see this snapshot 'http://i1263.photobucket.com/albums/ii628/lonleynesss/Capture_zps7b245c71.png'

    ReplyDelete
  6. Its updated now, you can try it :)

    ReplyDelete
  7. thanks alot..your site is awesome :)

    ReplyDelete
  8. Hey,

    this is my blog http://www.nixonok.com/ please take a look at this blog and i can't change menu names myself so please do this for me and i would be more than happy if you add me as a fb friend.

    ReplyDelete
  9. @Nixon ok
    I checked your site, but i didn't get any sprite menu in your blogger. Anyway, let me know your menu names & email address to send it.
    thanks you..

    ReplyDelete
  10. how can i add my own name into this menu bar.tell me please
    @http://crazymedia24.blogspot.com

    ReplyDelete