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 includewith 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/AVvXsEhXbBWw7rf_8jZS05fHVHa-G0lB9xNHghytDZqpRTrj0kqt8UPUW0k3qgMAM6LxwHOgJ_g8x1Mwcvw59wEj776kfDY6PcUwJ969Aq6hzTCe7hgKcdR8lqyWefoU-1Qy0zuyNNR8C_KfQa4/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/AVvXsEhNUwNmcqKgUtDJrRH1CUygk_-dvVqcpvzcIjmIMAKtFdsv5UU4vaRQtFd5rrBSlUMs3js7VnZK9MRTqlVjY4mQJM19SvfgY27FOCvosAOJIqVZ2TaYLr9XIPt3dZm78QeYqvFNNgiibm4/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.

Related Posts : blog, Blogging