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 */