--> Blogger Tricks

Friday, January 24, 2014

Widgets

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

  • <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


Comments
0 Blogger Comments

About Us


Hi! We are the vBLogger Lab Team. Freelance Blogger and an addicted Web Developer.
Thanks to all Followers and our lovely Visitors...Read More

vBloggerLab Stats

Widgets for Blogger

Followers

Don't Forget To Join US Our Community
×