You Are Here : Home » , » How To Add Multi-Tabbed Widget In Blogger Sidebar

How To Add Multi-Tabbed Widget In Blogger Sidebar

Hello! H&T users. In my previous post I explained you How To Add Pinterest Image Hover Button In Blogger. In this post I will explain you to insert multi-tabbed widget in Blogger sidebar. It will keep your Blog clean. It will give your Blog more professional look. It doesn't require any coding knowledge. You will just have to copy/paste the code I have provided below. Let's start the tutorial.

Add Multi Tab Widget In Blogger
Add Multi-Tab Widget In Blogger

Adding Multi-tabbed Widget In Blogger

First of all backup your template. It will help you to keep your template safe.
  • Go to blogger Home.
  • Than you have to go to Layout.
  • Than click on Add a Gadget.
  • Than click/choose Html/Javascript.
  • After that paste the code given below:
<script type='text/javascript'>
//<![CDATA[
function hackersthiefs_oom(NBTID, id)
{
  var hackersthiefs = document.getElementById(NBTID);
  var NBTs = hackersthiefs.firstChild;
  while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
  var NBT = NBTs.firstChild;
  var i   = 0;
  do
  {
    if (NBT.tagName == "A")
    {
      i++;
      NBT.href      = "javascript:hackersthiefs_ubah('"+NBTID+"', "+i+");";
      NBT.className = (i == id) ? "Active" : "";
      NBT.blur();
    }
  }
  while (NBT = NBT.nextSibling);
  var Halamans = hackersthiefs.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 hackersthiefs_ubah(NBTID, id) { hackersthiefs_oom(NBTID, id);
}
function hackersthiefs_inisial(NBTID) { hackersthiefs_oom(NBTID,  1);
document.write('');}
//]]>
</script>
<style>
div.hackersthiefs div.NBTs {
height: 24px;
overflow: hidden;
}
div.hackersthiefs div.NBTs a:hover, div.hackersthiefs div.NBTs a.Active {
background-color: #eee;
}
div.hackersthiefs div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.hackersthiefs div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.hackersthiefs div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.hackersthiefs 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="hackersthiefs.html" method="get">
<div id="hackersthiefs" class="hackersthiefs">
<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 style='margin-left:10px;align:right;' href='#' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://hackersthiefs.blogspot.com' target='_blank'>Blogger</a></small>
</div>
</form>
<script type="text/javascript">hackersthiefs_inisial('Hackers &amp; Thieves');</script>

  • Save. 
That's It! You Have Created Multi-Tabbed Widget In Your Blogger Blog.

Further Customizations


  1. Replace Tab 1 Title, Tab 2 Title, Tab 3 Title with you Tab Title.
  2. Replace Tab1,2,3 Content goes here with your widget code.
  3. Change 'width: 300px; height: 300px;' with your need.
  4. Change Background Color of Multi-Tabbed widget : Replace '#ffffff' with you favorite color.
Hope You Like It!
Are You facing Any Problem Than Do Comment.

You May Also Like

Ads by Google
If you enjoyed reading this article then please leave a comment or subscribe to our newsletter to get all the future posts delivered to your feed reader or you email desk.

No comments:

Leave a Reply

Welcome to SpicyTweaks.

Copyright © 2013-17 SpicyTweaks. All Rights Reserved.

Scroll to top