Hero Apps

How to Create Tab View Menu in Blogger

It's been a long time I did not write about the tutorial blog, a
few weeks I always write about the news and wonders of
nature. OK, it's time we tried to return to the tutorial blog,
and which we will discuss today is how to create a tab view
menu on the blog.
Tab view menu, very efficient, because it contains many
titles in one place. In addition to saving space, tab view
menu also looked very good. Creating tab view menu
requires a lot of HTML code, so my advice, you should
backup the template before you make the tab view menu.
To make it, please follow the steps below:
1. Login to blogger with your ID.
2. Click Layout.
3. Click Edit HTML.
4. Then look for the code ]]></b:skin>
5. Put the following code before the code ]]></b:skin>
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Width Main Menu Top */
text-align: center;
height: 30px; /* High Main Menu Top */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Top Menu border color
*/
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Main Menu Top Fonts
*/
font-weight: bold;
color: #000; /* Main Menu Top Font Colors */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px}
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs
a.Active
{
background-color: #E6E6E6; /* Background colors on
Main Menu */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Main Box border color */
overflow: hidden;
background-color: #E6E6E6; /* Main Box background
color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
6. Then place the following JavaScript code above the code </head>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i
+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height =
(Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId,
id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId,
1); }
//]]>
</script>
7. Save Template.
8. To make the tab view menu, please return to the Layout.
9. Select a Page Elements .
10. Click Add Gadget .
11. Select the HTML / Javascript, then enter the following code :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height:
250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
12. Then Save.

Sent from @jimohib....Follow on twitter.

Go to link download