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 include
with 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
*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
Style 2
you are done.
If you cant change menu names yourself, Leave a comment with your names. ill do it for you.
Read More
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 include
with demo.
Menubar Collection
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/AVvXsEiEaHX8b5b3TBNYcvza1j3MVvf9e9TIHuRD-1jBMRwrJC5AoJXmwWKd6Q7WEjjkSMPNlyvGKLPmesquvRps2BJmMOmq0YL4uT_kHH8JnWGgjbQM5J_9k1qhoUHJHFOCXNkxSFrKZEhhniA/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-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/AVvXsEgBuq9GLlTR8Fos2U4-zxL9OFyTGFa-3R_6dk8g5YTqzmcjOlETyft_c4n99pGJhXxuZ3hHIaCYSDsewEkm607AUrw6Qx0sgZkkOh5Vxp0LiLQkgk5cm9Djvhcf2E8XDiGKf5By8uLuWpI/s1600/tab-2.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 */
7. Now save your templateyou are done.
If you cant change menu names yourself, Leave a comment with your names. ill do it for you.
