Create harizontal tabs menu in our blog

9:04 PM

(0) Comments

Harizontal tabs menu is important in our blog. It is not easy to learning coading in a minute, so the option is we learn slowly by copy and understand it as i do.


Before start, you need to create image as below:



size:175px × 84px




size:4px × 84px

1. Login to Blogger, chose "Lay out --> Template --> Edit HTML"
2. Don't forget to backup your template first.
3. Check the "Expand Widget Templates" checkbox.
4. Try to find this code ]]>, if you found it then put the code below above it

#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://yourimagehosting/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://yourimagehosting/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

5. Next step is to put the tabs menu into your blog, but we need to create add page element at the top of you post section.

Find the below code :

<b:section class="header" id="header">
maxwidgets='1' showaddelement='no'>
<b:widget id="Header1" locked="true">
title='your blog title (Header)' type='Header'/>
</b:widget>

change the red text so that to become like this:

<b:section class="header" id="header">
maxwidgets='2' showaddelement='yes'>
<b:widget id="Header1" locked="false">
title='your blog title (Header)' type='Header'/>
</b:widget>

6. Then copy the code below


<div id="tabshori">

<ul>
<li><a href="http://yourblogname.blogspot.com/">Home</a></li>
<li><a href="http://yourblogname.blogspot.com/">Trik-Tips</a></li>
<li><a href="http://yourblogname.blogspot.com/">Free Template </a></li>
<li><a href="http://yourblogname.blogspot.com/">Blog Dictionary</a></li>
<li><a href="http://draft.blogger.com/yourblogname.blogspot.com">Profile</a></li>
</ul>
</div>


Save your setting, the go to "Page Elements" and click "Add page Element " on the header area, chose "HTML/JavaScript" then put the number five code above into "content" box, then click "save" and preview your new blog. < >

kaitor

0 Responses to "Create harizontal tabs menu in our blog"

Post a Comment