Create a Multi-tabbed Widget for Blogger

You may have found some similar multi-tab widget on many blogger blog , but the problem is that, the process involved in implementing most of this widget is very difficult and lengthy, and most of this widgets doesn't seems to display in most browser like internet explorer and more, but today i will be sharing with you, how you can add a simple multi-tabbed widget to your blog sidebar with easy and short step.
The basic function of this widget is that, it reduces the load time of your blog by grouping some of your sidebar widget into one widget, but note that you wouldn't be able to add blogger default widget like archive, about me, labels and other official widget except if you have created an html code for it, now follow the few steps below.

Multi Tabbed Widgets

Create a multi tabbed widget for blogger - Style 01

Advance multi tabbed widget for blogger - Style 02

New advance multi tabbed widget for blogger blog - Style 03

Creating Multi-Tab Widget

STEP 1

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML"
• Use ctrl F to find </head> and paste the following code above </head>

    <script type='text/javascript'>

    //<![CDATA[

    function tabtampil_oom(TPID, id)
    {
      var Tabtampil = document.getElementById(TPID);
      var TTs = Tabtampil.firstChild;
      while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
      var TT = TTs.firstChild;
      var i   = 0;
      do
      {
        if (TT.tagName == "A")
        {
          i++;
          TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
          TT.className = (i == id) ? "Active" : "";
          TT.blur();
        }
      }
      while (TT = TT.nextSibling);
      var Halamans = Tabtampil.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 tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
    }
    function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);
    document.write('');}

    //]]>

    </script>

• Click "SAVE TEMPLATE"

STEP 2

• Go to "Page Elements" > "Add a Gadget"
• Choose "HTML/JavaScript" from the options and paste the code below in the content box, leaving the title blank

    <style type="text/css">
    div.TabTampil div.TTs
    {height: 24px; overflow: hidden; }
    div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
    { background-color: #c33cbc; }
    div.TabTampil div.Halamans
    { clear: both; border: 1px solid #c3c1c1; overflow: hidden; background-color: #ffffff;}
    div.TabTampil div.Halamans div.Halaman
    { height: 100%; padding: 0px; overflow: hidden; }
    div.TabTampil div.Halamans div.Halaman div.Alas
    { padding: 3px 5px; }
    div.TabTampil div.TTs a
    { border-left:1px solid #c3c1c1; border-right:1px solid #c3c1c1; border-top:1px solid #c3c1c1; border-bottom:0px solid #c3c1c1; 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: 13px; font-weight: 930; color: #000000}
    </style>
    <form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 300px;" class="TTs"> <a>Tab  title</a> <a>Tab title</a> <a>Tab title</a></div>
    <div style="width: 300px; height: 300px;" class="Halamans">
    <div class="Halaman">
    <div class="Alas">
    <br/>


    Enter your tab code here


    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>


    Enter your tab code here


    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>


    Enter your tab code here


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

    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

• Click "Save"

Customization

• To change the background color of the tab title, simply edit #c33cbc
• Edit #ffffff if you wish to change the background color of the widget
• Replace Tab title with each title of your widget
• Replace Enter your tab code here with the code of each widget you want to display on each tab when clicked.

That's all
In my next post, i will be discussing on how you can add more advance multi-tabbed widget to your blog with different style, we like to hear your feedback and feel free to ask any question. stay blessed till my next post.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz