Add Stylish Sprites Effect CSS Navigation Menu Bar

How To Add Stylish Sprites CSS Navigation Menu Bar For Blogger

1. Log in to blogger account and Go to Design,Edit HTML
2. Find this code by using Ctrl+F <div id='content-wrapper'>
3. Paste below code Before <div id='content-wrapper'>

<div class="bloggersstand-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="#"></a></li>
  </ul>
</div>

4. Now Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
*[ Style-1] For Black And White With Color Hover Effect]

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

*[Style-2] For Color Sprites With Colour Hover Effect 

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

 *Change All # With Your Links.

9. Now save your HTML/Javascript',Done!

If you have any query regarding Stylish Sprites CSS Navigation Menu Bar for blogger Feel free to ask,just drop your comment below.