|
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.
hi nazar, thanks for visiting in my page, it is hard for me to understand some of the codes, i want to try it to my blog lay-out, hope you can help me..thanks
ReplyDeleteTheng kyu mas. Ilmunya oks banget
ReplyDeleteNice.Thanks for Sharing....
ReplyDeleteHP Printer Offline 1-844-669-3399 USA. Getting Problem with your HP Printer it show offline issue. We are Here to help you any type of troubleshooting HP printer offline problem.
HP Printer Offline