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 HTML2. Find this code by using Ctrl+F <div id='content-wrapper'>
3. Paste below code Before <div id='content-wrapper'>
<div class="bloggersstand-navi1">4. Now Find this tag by using Ctrl+F ]]></b:skin>
<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>
5. Paste below code Before ]]></b:skin>
*[ Style-1] For Black And White With Color Hover Effect]
/*menu bar by bloggersstand.blogspot.com */*[Style-2] For Color Sprites With Colour Hover Effect
.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(http://2.bp.blogspot.com/-kcIT3Tdn9XE/UBgJ2wzNYBI/AAAAAAAACk8/cDY8cPzhQd4/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 */
/*menu bar by bloggersstand.blogspot.com */*Change All # With Your Links.
.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(http://1.bp.blogspot.com/-TsNV6G2xc5U/UBf9jfk7J7I/AAAAAAAACkc/ZAiSDxQV6fM/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 */
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.
Post a Comment