How to make menu tab view without edit html

Menu tab view is good for your blog space especially if you have many post to share to your reader.  But, somehow many method I've read about doing menu tab view need to edit on html  or template. A bit mistake can ruin our whole blog.

Below is a simple menu tab view example ;

My tutor here is to show you how to make your own menu tab view without editing your template.

1. First, login to your blogger.

2. Click layout.

3. Click add a gadget

4. Find and choose HTML/Javascript.

5. Then add below code ;

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Main menu width */
text-align:center ; height: 30px; /* Main menu height */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Main menu border colour */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Main menu font */
font-weight:bold; color:#000; /* Main menu font colour */ -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; /* Main menu background colour */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Content box border colour  */ overflow:hidden; background-color:#E6E6E6; /* Content box border colour*/ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
  Content menu tab view 1 
</div>
</div>
<div class="Page">
<div class="Pad">
Content menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
  Content menu tab view 3 
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

6. Now save.

7. And you're done.