|
|
If see the menu bar on the header of my blog quite interesting and good enough suitable with red and black color, may be among you also want to have a menu bar like my blog, if so,in this opportunity I will share about how to make horizontal menu bar like that, and let's enhance your blog.
First,prepare the left image and the right image like below and upload to the free image hosting of your favorite, if you lazy to do that,just use the image below by right click on the image and select copy image location.
After that,as usual follow the steps below:
1. Log in to Blogger with your account.
2. On the dashboard menu select templates.
3. On the templates menu select edit HTML.
4. Copy-paste the code below before the ]]></b:skin> code
5. On the body tag search for the code below:
And replace the maxwidgets='1' with maxwidgets='3' or more from the value, and replace the showaddelement='no' with showaddelement='yes'.
6. After that copy and paste the code below after the </b:section> above and replace the link and the link name with your's:
7. Note,if the method above doesn't work and you have got error you can parse the HTML above by clicking here.
First,prepare the left image and the right image like below and upload to the free image hosting of your favorite, if you lazy to do that,just use the image below by right click on the image and select copy image location.
Left image | Right image |
After that,as usual follow the steps below:
1. Log in to Blogger with your account.
2. On the dashboard menu select templates.
3. On the templates menu select edit HTML.
4. Copy-paste the code below before the ]]></b:skin> code
/*credits : http://nazarpunya.blogspot.com */
#tabs {
float:left;
width:100%;
background:#CC0000;
font-size:93%;
line-height:normal;
border-bottom:none;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("Left image URL") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("Right image URL") no-repeat right top;
padding:5px 15px 4px 6px;
color:#0000FF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#CC0000;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
#tabs {
float:left;
width:100%;
background:#CC0000;
font-size:93%;
line-height:normal;
border-bottom:none;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("Left image URL") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("Right image URL") no-repeat right top;
padding:5px 15px 4px 6px;
color:#0000FF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#CC0000;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
5. On the body tag search for the code below:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>
And replace the maxwidgets='1' with maxwidgets='3' or more from the value, and replace the showaddelement='no' with showaddelement='yes'.
6. After that copy and paste the code below after the </b:section> above and replace the link and the link name with your's:
<div id="tabs">
<ul>
<li><a href="link 1"><span>link name 1</span></a></li>
<li><a href="link 2"><span>link name 2</span></a></li>
<li><a href="link 3"><span>link name 3</span></a></li>
</ul>
</div>
<ul>
<li><a href="link 1"><span>link name 1</span></a></li>
<li><a href="link 2"><span>link name 2</span></a></li>
<li><a href="link 3"><span>link name 3</span></a></li>
</ul>
</div>
7. Note,if the method above doesn't work and you have got error you can parse the HTML above by clicking here.
Posts
