Add Multi-Tabbed widget to Blogger Sidebar

Published By: Ashu Insan Published On: 9:03 PM
Yesterday we have shared Pure CSS Expanded "Social Network" Widget today we come with another important blogger widget. Multi tab Widget is a great space efficient widget for Blogger. It helps to decrease the load time of your Blogger blog by combining three or more than three widgets into one. The tabbed navigation widget features tabs and a content window; when clicking on the tabs, different content is visible in the window beneath. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like.
Lets move to tutorial just Follow below steps to add a Multi-Tabbed Widget to your Blogger blog. you can see a Multi-Tabbed widget in our sidebar.

Live Preview:

Live Demo

Add Multi-Tabbed Widget to your blogger sidebar:

  • 1. Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript. 
  • 2. Paste below code inside it.
<script type='text/javascript'>
//<![CDATA[
function NewBloggerTips_oom(NBTID, id)
{
  var NewBloggerTips = document.getElementById(NBTID);
  var NBTs = NewBloggerTips.firstChild;
  while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
  var NBT = NBTs.firstChild;
  var i   = 0;
  do
  {
    if (NBT.tagName == "A")
    {
      i++;
      NBT.href      = "javascript:NewBloggerTips_ubah('"+NBTID+"', "+i+");";
      NBT.className = (i == id) ? "Active" : "";
      NBT.blur();
    }
  }
  while (NBT = NBT.nextSibling);
  var Halamans = NewBloggerTips.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 NewBloggerTips_ubah(NBTID, id) { NewBloggerTips_oom(NBTID, id);
}
function NewBloggerTips_inisial(NBTID) { NewBloggerTips_oom(NBTID,  1);
document.write('');}
//]]>
</script>

<style>
div.NewBloggerTips div.NBTs {
height: 24px;
overflow: hidden;
}
div.NewBloggerTips div.NBTs a:hover, div.NewBloggerTips div.NBTs a.Active {
background-color: #eee;
}
div.NewBloggerTips div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.NewBloggerTips div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.NewBloggerTips div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.NewBloggerTips 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="NewBloggerTips.html" method="get">
<div id="NewBloggerTips" class="NewBloggerTips">
<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='/2013/02/add_multi_tabbed_widget_to_blogger.html' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://www.NewBloggerTips.com/' target='_blank'>NBT</a></small>
</div>
</div></form>
<script type="text/javascript">NewBloggerTips_inisial('NewBloggerTips');</script>

Customization:

  • Replace Tab 1 Title, Tab 2 Title, Tab 3 Title with you Tab Title.
  • Replace Tab 1,2,3, Content goes here with your widget code.
  • Change width: 300px; height: 300px; with your need.
  • Wanna change Background Color of Multi-Tabbed widget : Replace #ffffff with you favorite color.
Now Save & See you blog you have added this widget successfully.
Final words:-
Hope you like this widget please tell us you views & opinion. If you need any help regarding this widget please feel free to leave a comment below. Please Do not Remove the Cradit Links
Happy Blogging... :)
Share this article :

Stay Connected To Get Free Updates!

Subscribe via Email

Follow us!

 

+ comments + 8 comments

March 27, 2013 at 12:23 PM

Nice Trick Bro (Y)

April 6, 2013 at 12:54 AM

we cant make that 3 tab like 4 or 3

April 24, 2013 at 7:31 AM

If you look closely at our new urban art collection you'll see elements of design made popular by street art.

May 14, 2013 at 11:58 PM

how can i put it twice in my blog ?

May 20, 2013 at 2:44 AM

Hi, Can't find those codes to put in the widget... You wrote : "Replace Tab 1,2,3, Content goes here with your widget code." Nweed your help cause need your explanation, thanks.

Jeff

July 12, 2013 at 5:46 PM

what can i Replace Tab 1,2,3, Content goes here with your widget code.

July 14, 2013 at 10:10 PM

How the number of Tab artıralbilirim

September 17, 2013 at 5:23 PM

Thanks buddy for this widget, and how to make the 6 tabs in it ???

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.

 
Copyright © 2012-13. NewBloggerTips - All Rights Reserved
Home | About | Disclaimer | Privacy Policy
Supported by : BharatNewsPortal | IBPSExamsPaper | BharatJobsPortal
Designed by: Ashok Lothia | Proudly powered by Blogger
DMCA.com