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.

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://xtremetipsntricks.blogspot.in/"></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 http://xtremetipsntricks.blogspot.in */

.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/AVvXsEh8955CgBbvOcFwZcTESf7s0jIlrsWXvBiRVJXknB90c_BfGtmI5P9R0YxluF_V7v3c-umBDlG4a4q0XCI0eOs4YIbebzR4f5eGQUtVj9Msy_hqo_ypFm2EIHAPjKgwCQvC8F5QX8phq2g/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 http://xtremetipsntricks.blogspot.in */

Style 2

• 
  
• 
  
• 
  
• 
  
• 
  

/*menubar by http://xtremetipsntricks.blogspot.in */

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/AVvXsEiB_N3-BzsduHMS2XNdK_vy4xoiG-SJjcJxjlbRJUOYPQZ6v1zZYTUoUrqWg3h2Yo3Xtvcw02Jm_kc08Z-OqImmMVPQHw1fU458cq1nKoAd3kiuRonUsp9-YYECjKbQM-JcYLOJfAYyrjY/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 http://xtremetipsntricks.blogspot.in */

7. Now save your template
     you are done.