Join Over 10,000 Blogger !

Saturday, August 24, 2013

How to Add Multi-Tabbed Widget For Blogger

Today we provide you full tutorial about how to add Multi-Tabbed Widget For Blogger. This is another important blogger widget for those blogger who can show all tab in one widget means recent post widget, popular post widget and comments widget in one widget. If you installed multiple tabs widget than you should not installed any more widget for recent post, popular post and recent comments. It also decreases loading time of your blogger blog by combining all widgets in one widget.
How to Add Multi-Tabbed Widget For Blogger

Add Multi-Tabbed Widget For Blogger

You need to follow below steps to add Multi-Tabbed Widget For Blogger:

Step 1

Go to Blogger Dashboard.

Step 2

Go to Layout and Click on Add A Gadget as shown in below picture.

How to Add Multi-Tabbed Widget For Blogger

Step 3

Add HTML/JavaScripts as shown in below picture.

How to Add Multi-Tabbed Widget For Blogger

Step 4

Copy and Paste below code in box:
<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/2014/02/download-best-blogger-templates-of-2014.html" rel="dofollow" target="_blank" title="blogger templates"><img src="https://bitly.com/haakblog" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger widgets"><img src="https://bitly.com/haakblog" alt="blogger widgets" 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>
Tips:  1. Change your background colours with change #FFFFFF with your background colours.
2. Change Tab 1 title, Tab 2 title, Tab 3 Title as your tabs that you shown.
3. Change Width and Hight as your requirement
4. Tab 1 content goes hereTab 2 content goes here, Tab 3 content goes here with your widget code as you want to show in multiple tabbed.

Step 5

Click on Save.

If you have any question or update than you can contact with us any time at our E-mail support Haakblog@gmail.com. I am always ready for fixing your css/HTML issues, For personalized help, you can HIRE ME

If you like this post and wish to get more post like this when we add new tutorial about blogger then SUBSCRIBE TO OUR RSS FEED! At Below:

0 comments:

Post a Comment

Don't Forget To Join US Our Community
x