Multi Tab Widget using html/javascript only

Views:

Multi Tab widget is one way to organize your sidebar. You are placing all other widget in on straight line but in different tab.

The demo for this tutorial can seen on the sidebar of this blog.

Here's the code.

Installation:

• Add gadget
• Select HTML/JavaScripts
• paste the code below
Click Here to see the Code




<script type='text/javascript'>
//<![CDATA[
function haakblog_oom(NBTID, id)
{
  var haakblog = document.getElementById(NBTID);
  var NBTs = haakblog.firstChild;
  while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
  var NBT = NBTs.firstChild;
  var i   = 0;
  do
  {
    if (NBT.tagName == "A")
    {
      i++;
      NBT.href      = "javascript:haakblog_ubah('"+NBTID+"', "+i+");";
      NBT.className = (i == id) ? "Active" : "";
      NBT.blur();
    }
  }
  while (NBT = NBT.nextSibling);
  var Halamans = haakblog.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 haakblog_ubah(NBTID, id) { haakblog_oom(NBTID, id);
}
function haakblog_inisial(NBTID) { haakblog_oom(NBTID,  1);
document.write('');}
//]]>
</script>
<style>
div.haakblog div.NBTs {
height: 24px;
overflow: hidden;
}
div.haakblog div.NBTs a:hover, div.haakblog div.NBTs a.Active {
background-color: #eee;
}
div.haakblog div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.haakblog div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.haakblog div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.haakblog div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom: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>
<form action="haakblog.html" method="get">
<div id="haakblog" class="haakblog">
<div style="width: 300px;" class="NBTs"> <a>Tab 1 Title</a> <a>Tab 2  Title</a> <a>Tab 3  Title</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
<small>
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a style='margin-left:10px;align:right;' href='http://www.haakblog.com/2013/08/how-to-add-multi-tabbed-widget-for-blogger.html' target='_blank'>Multi Tabbed Widget</a> | <a href='http://www.haakblog.com/' target='_blank'>Blogger</a></small>
</div>
</div></form>
<script type="text/javascript">haakblog_inisial('haakblog');</script>

Configuration:
- Change Tab 1, 2 and 3 Title of your own.
- Change Tab 1, 2 and 3 content goes here of your own.

Save it and your done.

Credit: haakblog.com

Comments

Share

https://vbloggerlab.blogspot.com/2014/01/multi-tab-widget.html