widget multi tab view

<script type="text/javascript">
//<![CDATA[
function NewBloggerLab_oom(NBLID, id)
{
  var NewBloggerLab = document.getElementById(NBLID);
  var NBLs = NewBloggerLab.firstChild;
  while (NBLs.className != "NBLs" ) NBLs = NBLs.nextSibling;
  var NBL = NBLs.firstChild;
  var i   = 0;
  do
  {
    if (NBL.tagName == "A")
    {
      i++;
      NBL.href      = "javascript:NewBloggerLab_ubah('"+NBLID+"', "+i+");";
      NBL.className = (i == id) ? "Active" : "";
      NBL.blur();
    }
  }
  while (NBL = NBL.nextSibling);
  var Halamans = NewBloggerLab.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i    = 0;
  do
  {
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Halaman = Halaman.nextSibling);
}
function NewBloggerLab_ubah(NBLID, id) { NewBloggerLab_oom(NBLID, id);
}
function NewBloggerLab_inisial(NBLID) { NewBloggerLab_oom(NBLID,  1);
document.write('');}
//]]>
</script>

<style>
div.NewBloggerLab div.NBLs {
height: 22px;
overflow: hidden;
}
div.NewBloggerLab div.NBLs a:hover, div.NewBloggerLab div.NBLs a.Active {
background-color: #eee;
}
div.NewBloggerLab div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.NewBloggerLab div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.NewBloggerLab div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.NewBloggerLab div.NBLs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBLom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>

<br />
<form action="NewBloggerLab.html" method="get">
<div class="NewBloggerLab" id="NewBloggerLab">
<div class="NBLs" style="width: 300px;">
<a href="https://www.blogger.com/null">Tab 1 Title</a> <a href="https://www.blogger.com/null">Tab 2 Title</a> <a href="https://www.blogger.com/null">Tab 3 Title</a></div>
<div class="Halamans" style="height: 420px; width: 284px;">
<div class="Halaman">
<div class="Alas">
<br />
Tab 1 Content Goes Here
</div>
<div class="Halaman">
<div class="Alas">
<br />
Tab 2 Content Goes Here
<div class="Halaman">
<div class="Alas">
<br />
Tab 3 Content Goes Here
</div>
</div>
</div>
<small><a href="https://www.blogger.com/blogger.g?blogID=2278121941307322433" style="align: right; margin-left: 10px;" target="_blank"></a><a href="https://www.blogger.com/blogger.g?blogID=2278121941307322433" target="_blank"></a></small>
</div>
</form>
<script type="text/javascript">NewBloggerLab_inisial('NewBloggerLab');</script></div>
</div>
</div>