TutorialWebForBlogger

TW4B It's about a blog that talking about blogging widgets, blogger template tutorials, search engine optimization SEO and other useful blogging tips

Let's review a topic about how to create horizontal tabs menu on your blog. Like this below : Click Here to See the Example How t... nopict

How to Create Horizontal Tabs Menu in Blogger

Let's review a topic about how to create horizontal tabs menu on your blog.

Like this below :

Click Here to See the Example

How to create horizontal tabs menu ?

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:

]]></b:skin>
     you can use (Ctrl+F) to find easily

3. Right Before ]]></b:skin> - place code of HTML below:

<!--Horizontal-Tabs-BEGIN-->
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}

.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(http://4.bp.blogspot.com/_5yyQgf23Pco/S3HSwpU-xNI/AAAAAAAABdg/Vdkjbv3OG0w/s320/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(http://3.bp.blogspot.com/_5yyQgf23Pco/S3HS0jX5ZkI/AAAAAAAABdo/9PmCN6mZfmw/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */

.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
<!--Horizontal-Tabs-END-http://tutorialwebforblogger.blogspot.com-->

4. Find code of HTML below:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title' type='Header'/>
</b:section>
</div>
     you can use (Ctrl+F) to find easily

5. Right after it - place code of HTML below:

<div class='animatedtabs'>
<ul>
<li><a href='http://tutorialwebforblogger.blogspot.com/' title='Home'><span>Home</span></a></li>
<li><a href='http://tutorialwebforblogger.blogspot.com/search/label/Widgets' title='Blogfuel Widgets'><span>Widgets</span></a></li>
<li><a href='http://tutorialwebforblogger.blogspot.com/search/label/SEO' title='Blogfuel SEO'><span>SEO</span></a></li>
<li><a href='http://tutorialwebforblogger.blogspot.com/search/label/Miscellaneous' title='Blogfuel Miscellaneous'><span>Miscellaneous</span></a></li>
<li><a href='http://' title='Blogfuel Template'><span>Free Template</span></a></li>
<li><a href='http://' title='Blogfuel Contact'><span>Contact</span></a></li>
</ul>
</div>

Notes:
You can change:
http://tutorialwebforblogger.blogspot.com/search/label/Widgets
#  Blogfuel Widgets
Widgets

6. Click Save Template and Done.

Now, you've already created horizontal tabs menu on your blog.

There are no comments yet for 'How to Create Horizontal Tabs Menu in Blogger'