How To Create Tab View

Script code "How To Create Tab View" on Blogspot very much at all. Necessary caution and patience when we want to "Create Tab View" on Blogspot. So, after you are sure you want to "Create Tab View" on Blogspot, you should first Save the template of your blog to keep in case.




Steps:

1. As always you have to open a "Blogger Account".
2. Select the "Template".
3. Select "Edit HTML".
4. Check the "Expand Widget Templates"
5. Find the code </ head> (use CTRL + F to facilitate the search), once found, copy the javascript code below and paste it right before </ 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>
6. After the above step is completed, look for the code]]> </ b: skin> Then, copy the script code below and paste it just above the code]]> </ b: skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-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; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
7. "Save your Blog Template".
8. Switch >> select Layout.
9. Add Widget / Gadget .
10. Select the HTML / Javascript.
11. Copy the script code below and paste into a widget / gadget newly.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Menu 1.1 <br />
Menu 1.2 <br />
Menu 1.3 <br /> </div>
</div>
<div class="Page">
<div class="Pad">
Menu 2.1 <br />
Menu 2.2 <br />
Menu 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Menu 3.1 <br />
Menu 3.2 <br />
Menu 3.3 <br /> </div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
<center><text style="font-family:Coming Soon; font-size:10px" >Made By</text><br /><a href="http://adfoc.us/551051" title="GIM's BloG" target="_blank"><img style="width:100px"  src="http://dl.dropbox.com/u/70914642/Pictures/GIM's%20Blog.png"></a></center> 12. Arrange so Fine
13. After you finish editing the widget above, Keep it.
14. Save your template and see the results.

Note:

• For the color Orange, the words "Menu1, Menu 2, Menu 3," is the title tabview. change according to your wishes.
• For Menu 1.1, Menu 1.2, Menu 1.3 please insert script code that you want, if the script was just one thing, just delete Menu 1.2 and 1.3. Remember it adjust to the Menu 1.
• To menu 2.3 and menu 2.1 to 3.1 to 3.3 steps similar to Menu 1.1. Remember to adjust the menu contents.