Make Tab View Menu Without Edit HTML in Blogspot

Previously I've been discussing about how to create a multi-tab view menu (the menu with tabs), but in making the tab view menu we have to edit the HTML templates. Maybe a lot of bloggers are afraid to fail so that it can damage the template, but unlikely to be broken if before editing the blogger template already backing up first. On this occasion Labston will share a tutorial to make multi-tab menu without the "Edit HTML". Read : Popular Posts Widget With Circle Image Style

If you are interested, please see, please log in first to bloggers, then the Layout, click Add Gadgets, and select HTML / Javascript. After that add the script code tab view its menu as shown below:

<style type="text/css">

div.TabView div.Tabs a

{

float: left;

display: block;

width: 80px;

height: 22px;

text-align: center;

margin: 5px 0px 0px 3px; 

background-color: #000;

padding-top: 2px; 

border: 1px solid #ffffff;

border-bottom: 1px solid #ccc; 

font-family: "Arial, Helvetica, sans-serif", Arial;

font-weight: 900;

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #736F6E;  }

div.TabView div.Pages

{

clear: both;

border: 1px solid #cccccc; 

overflow: hidden;

background-color: #ffffff; 

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 5px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

</style>

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 300px;" class="Tabs">

<a><span style="color: #fff">Tab 1</span></a>

<a><span style="color: #fff">Tab 2</span></a>

<a><span style="color: #fff">Tab 3</span></a>

</div>

<div style="width: 300px; height: 200px;" class="Pages">

<div class="Page">

<div class="Pad">

Code Tab 1 Here

</div>

</div>

<div class="Page">

<div class="Pad">

Code Tab 2 Here

</div>

</div>

<div class="Page">

<div class="Pad">

Code Tab 3 Here

</div>

</div>

</div></div></form>

<script type='text/javascript'>

//<![CDATA[function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);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);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)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}

//]]>

</script>

<script type="text/javascript">

tabview_initialize('TabView');

</script></div>

Description:

The word ORANGE is the color of the title Tab
The word RED is the title Tab
300 in the 'Width' denotes the length of the box and 200 in the 'height' shows the height of the box. Please change the values in the size of your template.
Words in bold are the contents of a tab view. Please replace with text, links, banners or widget.

Read Also : Best Blogger Templates, Free and Premium