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

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/AVvXsEjTsAxtIIgYfALlF5GwAD3TmCygOpXIotGz9Z8TXjey-lGDpBwsOhogAVGf6a7mOkJe0NrHqF6DSw2bsvb2eEhFIiZcxiMWi-ZItEIpcZZJNq4w4cm3QI6uI5eZJ_uJWSE3FZQAGS5oh8Q/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-navi2 {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
bloggertrix-navi2 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
bloggertrix-navi2 ul li {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibmtY26qH3DwMxRDug48i7ndA7bdLV8-67-I_F1sm-Rr999WM1VqQxi-dNUrf7a1u8DK5GEQweGxcXzmNkSgXWFms-oIGXcJceDJ0y3xcDcWnCWVwZBWSNwcoAIrjIVnGeqf4KZhH1ijg/s1600/bloggertrix.com-tab-2.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
bloggertrix-navi2 ul li a {
    display:block;
    height:100%;
    width:100%; }
bloggertrix-navi2 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
bloggertrix-navi2 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
bloggertrix-navi2 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
bloggertrix-navi2 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
bloggertrix-navi2 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
bloggertrix-navi2 ul li:hover {
    z-index:1000; }
bloggertrix-navi2 ul li.sm1:hover {
    background-position:0 -75px; }
bloggertrix-navi2 ul li.sm2:hover {
    background-position:-125px -75px; }
bloggertrix-navi2 ul li.sm3:hover {
    background-position:-249px -75px; }
bloggertrix-navi2 ul li.sm4:hover {
    background-position:-373px -75px; }
bloggertrix-navi2 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.