Blogging Ethics

MBT Tube

December 14, 2009

Advanced Multi Tabbed Widget For Blogger – Fully Widgetized!


Click here to Add a Wordpress Style Menu Tabbed Widget
Step#6 has been updated. Repeat that step to get it working just perfect.

multi-tabbed-widget I had published a post on how to add a multi tab widget to your blogger blogs and how to customize it to suit your blog layout some months ago. The only problem with that widget is that it is not fully widgetized i.e you can not add archives, labels, author profile or other blogger official widgets to it unless you have their separate code with you. I just came across a beautiful and a more flexible and advanced tabber widget stylized by Lawny Designs and scripted by Barelyfitz. I have modified lawny’s tutorial and have made some changes to the code so to make it even more simpler to newbie bloggers. You can view this widget hanging on my sidebar.

 

To add this cute multi tab widget to your BlogSpot blogs follow these steps.

  1. Go to Blogger > Layout > Edit HTML
  2. Search For </head>
  3. And paste the code below just above it,

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
  var arg;
  this.div = null;
  this.classMain = "tabber";
  this.classMainLive = "tabberlive";
  this.classTab = "tabbertab";
  this.classTabDefault = "tabbertabdefault";
  this.classNav = "tabbernav";
  this.classTabHide = "tabbertabhide";
  this.classNavActive = "tabberactive";
  this.titleElements = ['h2','h3','h4','h5','h6'];
  this.titleElementsStripHTML = true;
  this.removeTitle = true;
  this.addLinkId = false;
  this.linkIdFormat = '<tabberid>nav<tabnumberone>';
  for (arg in argsObj) { this[arg] = argsObj[arg]; }
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
  this.tabs = new Array();
  if (this.div) {
    this.init(this.div);
    this.div = null;
  }
}

tabberObj.prototype.init = function(e)
{

  var
  childNodes,
  i, i2,
  t,
  defaultTab=0,
  DOM_ul,
  DOM_li,
  DOM_a,
  aId,
  headingElement;
  if (!document.getElementsByTagName) { return false; }
  if (e.id) {
    this.id = e.id;
  }
  this.tabs.length = 0;
  childNodes = e.childNodes;
  for(i=0; i < childNodes.length; i++) {
    if(childNodes[i].className &&
       childNodes[i].className.match(this.REclassTab)) {
      t = new Object();
      t.div = childNodes[i];
      this.tabs[this.tabs.length] = t;

      if (childNodes[i].className.match(this.REclassTabDefault)) {
    defaultTab = this.tabs.length-1;
      }
    }
  }
  DOM_ul = document.createElement("ul");
  DOM_ul.className = this.classNav;
  for (i=0; i < this.tabs.length; i++) {

    t = this.tabs[i];

    t.headingText = t.div.title;

    if (this.removeTitle) { t.div.title = ''; }

    if (!t.headingText) {

      for (i2=0; i2<this.titleElements.length; i2++) {
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) {
      t.headingText = headingElement.innerHTML;
      if (this.titleElementsStripHTML) {
        t.headingText.replace(/<br>/gi," ");
        t.headingText = t.headingText.replace(/<[^>]+>/g,"");
      }
      break;
    }
      }
    }

    if (!t.headingText) {
      t.headingText = i + 1;
    }

    DOM_li = document.createElement("li");

    t.li = DOM_li;

    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;

    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;

    if (this.addLinkId && this.linkIdFormat) {

      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/gi, this.id);
      aId = aId.replace(/<tabnumberzero>/gi, i);
      aId = aId.replace(/<tabnumberone>/gi, i+1);
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

      DOM_a.id = aId;
    }

    DOM_li.appendChild(DOM_a);

    DOM_ul.appendChild(DOM_li);
  }

  e.insertBefore(DOM_ul, e.firstChild);

  e.className = e.className.replace(this.REclassMain, this.classMainLive);

  this.tabShow(defaultTab);

  if (typeof this.onLoad == 'function') {
    this.onLoad({tabber:this});
  }

  return this;
};

tabberObj.prototype.navClick = function(event)
{

  var
  rVal,
  a,
  self,
  tabberIndex,
  onClickArgs;

  a = this;
  if (!a.tabber) { return false; }

  self = a.tabber;
  tabberIndex = a.tabberIndex;

  a.blur();

  if (typeof self.onClick == 'function') {

    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

    /* IE uses a different way to access the event object */
    if (!event) { onClickArgs.event = window.event; }

    rVal = self.onClick(onClickArgs);
    if (rVal === false) { return false; }
  }

  self.tabShow(tabberIndex);

  return false;
};

tabberObj.prototype.tabHideAll = function()
{
  var i;

  for (i = 0; i < this.tabs.length; i++) {
    this.tabHide(i);
  }
};

tabberObj.prototype.tabHide = function(tabberIndex)
{
  var div;

  if (!this.tabs[tabberIndex]) { return false; }

  div = this.tabs[tabberIndex].div;

  if (!div.className.match(this.REclassTabHide)) {
    div.className += ' ' + this.classTabHide;
  }
  this.navClearActive(tabberIndex);

  return this;
};

tabberObj.prototype.tabShow = function(tabberIndex)
{

  var div;

  if (!this.tabs[tabberIndex]) { return false; }

  this.tabHideAll();

  div = this.tabs[tabberIndex].div;

  div.className = div.className.replace(this.REclassTabHide, '');

  this.navSetActive(tabberIndex);

  if (typeof this.onTabDisplay == 'function') {
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
  }

  return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{

  this.tabs[tabberIndex].li.className = this.classNavActive;

  return this;
};

tabberObj.prototype.navClearActive = function(tabberIndex)
{

  this.tabs[tabberIndex].li.className = '';

  return this;
};

function tabberAutomatic(tabberArgs)
{
  var
    tempObj,
    divs,
    i;

  if (!tabberArgs) { tabberArgs = {}; }

  tempObj = new tabberObj(tabberArgs);

  divs = document.getElementsByTagName("div");
  for (i=0; i < divs.length; i++) {
    if (divs[i].className &&
    divs[i].className.match(tempObj.REclassMain)) {
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
    }
  }
  return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
  var oldOnLoad;

  if (!tabberArgs) { tabberArgs = {}; }

  oldOnLoad = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = function() {
      tabberAutomatic(tabberArgs);
    };
  } else {
    window.onload = function() {
      oldOnLoad();
      tabberAutomatic(tabberArgs);
    };
  }
}

/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

    tabberAutomaticOnLoad();

} else {

  if (!tabberOptions['manualStartup']) {
    tabberAutomaticOnLoad(tabberOptions);
  }

}

//]]>
</script>

 

 

4.  Now search for ]]></b:skin>  and just above it paste this code,

/*---------- Tabber Start-------- */


.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}


/*------- Tabber End--------*/

 

5.  Don’t save your template. Now search for Variable definitions and paste this code with other variable definitions,

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

 

If you can’t find Variable definitions  then search for #navbar-iframe and paste this code below #navbar-iframe { Some text here }

/* Variable definitions
   ====================

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

*/

 

UPDATED PART:

6.   Now the final part. Search for <div id='sidebar-wrapper'> and paste this code just below it,

<div style='clear:both;'/>

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>

</div>

 

7. Finally save your template and visit Layout > Page Elements to start adding widgets to the tabs! It will look something like this,

MULTI-TABBED-WIDGET

The widgets are arranged number wise. Starting from Tab-1 and ending at Tab-4. To add a gadget/widget to any tab simply click the link Add a Gadget and start adding whatever you want.

8. Finally view your template to see it hanging!:)

Customization Guide To Multi Tab Widget

Here we will discuss how to change the Look and position of this multi tabbed widget.

Changing Position:

To shift this tabber widget to the bottom section of your sidebar rather at the extreme top, do this,

  • Paste the code in Step#6 just above </div> and not just below <div id='sidebar-wrapper'> As shown in the image below,

Shift-position-of-tabber

  • Save your template and go to Layout > Page Elements  to see if it has shifted to the bottom.

Changing Look and Feel:

  • The background colours of the widget can be changed by editing the code in step#5. I am rewriting the code here with some description.

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">


<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">


<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">


<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#289728" value="#289728">

 

This code has four main sections amongst which the sections tbbxcolor1: and  tbbxcolor2: are the most important. I will describe each one in detail.

Important Sections:

tbbxcolor1: This is an important section. It defines the background colour of this multi tab widget and also the colour on mouse hover. The default colour is white i.e #ffffff

tbbxcolor2: This refers to the background colour of the tabs and the text inside the tabs. the default colour is green. You can change the value #289728 to a different colour value using our color chart

Change these only if you wish:

tbbxbgcolor: This section refers to the background colour of the tab box. By default the colour is grey. If you wish to change it to a different colour simply change the hexadecimal colour value #f8f8f8 to something different using our Color Chart

tbbxbrcolor: This refers to the border line color across the tabs and the box.

That’s All!

I hope this widget will help a lot in giving a clean and neat touch to your blogs. Any question is welcomed :>





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

188 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Hey this is cool thanks for the widget~!

    ReplyDelete
  2. Hello,

    Many thanks for this wonderful widget

    ReplyDelete
  3. This is great!! Thanks for sharing Mohd.

    ReplyDelete
  4. Mohd, how to use CSS Sprites for fast loading site??

    Coz I've added too many of ur codes and it doesn'y does normally in IE. But loads in any other browser. since more use IE, visitors r having problems. Please advice about fast loading

    ReplyDelete
  5. @Sreejesh
    For Fast loading kindly read this post 12 useful tips to reduce load time

    Any further help is welcomed. The widgets I share are often used on my blog but they work pretty fine.


    Image sprites tecnique have been used by us in this post http://www.mybloggertricks.com/2009/12/add-css-based-social-bookmarking-widget.html

    Sreejesh but this technique can not be applied in most cases because managing the alignments are a bit difficult. One needs to be pretty good in CSS to use them.

    ReplyDelete
  6. nO WORDS TO THANK YOU. WAS LIKE 1 2 3. THANKS DUDE!

    ReplyDelete
  7. Mohd, My real need is to create a CSS sprite for 3 images. as you know I don't have any knowledge about the web editing or CSS. I just want to get 3 links in one image. for the below screen shot.

    http://i46.tinypic.com/2yvjtqa.jpg

    I want those 3 icons like the the social networking icons like naeem noors which hovers on mouse over..

    ( social networking icons by naeem noor you gave me the link earlier -->> http://www.cssreflex.com/2009/08/sexybookmarks-v2-for-blogger.html )

    I created some image and code from http://css-sprit.es/ but I don't know how to implement it in blogger template.

    Here is the image-->> http://i46.tinypic.com/vrbzpu_th.png

    I'm struggling for this since I don't know CSS or web design. finally i gave up!!


    Now you are the only hope. Please help!!!

    My blogs'link is http://tunestore.blogspot.com/

    if posible please send it to :mailmesreejesh@gmail.com

    Also please advice me for the stability of the page in IE.


    By the by the "12 useful tips to reduce load time" was wonderfull I've tried to implement all them in my blog.

    ReplyDelete
  8. @Sreejesh


    Working on your image. Give me some time like 4-10 hours. And yes I will kill you if you asked off-topic questions again :D Just kidding, you are most welcomed to ask any off topic question via email else my blog will become a forum :>>

    ReplyDelete
  9. @Sreejesh


    I guess I am a bit impatient. Created your code in just 5 minutes.
    Copy paste the following code in your HTML/JavaScript widget,


    <style>

    .mbt-bookmark a {
    display:block;
    height:48px;
    width:35px;
    padding:0 8px;
    float:left;
    position:relative;
    background:urlundefinedhttp://i46.tinypic.com/vrbzpu_th.png) no-repeat;
    }

    .mbt-bookmark a.orkut {
    background-position:-99px 0px;
    }
    .mbt-bookmark a.orkut:hover {
    background-position:-99px -48px;
    }
    .mbt-bookmark a.twitter {
    background-position:-48px 0px;
    }
    .mbt-bookmark a.twitter:hover {
    background-position:-48px -48px;
    }
    .mbt-bookmark a.facebook {
    background-position:0px 0px;
    }
    .mbt-bookmark a.facebook:hover {
    background-position:0px -48px;
    }



    </style>


    <div class='mbt-bookmark'>
    <a class='facebook' href="http://tunestore.blogspot.com/ " rel='external nofollow' target='_blank' title='Share This Blog On Facebook :&gt;'/>

    <a class='twitter' href="http://tunestore.blogspot.com/ " rel='external nofollow' target='_blank' title='Share This Blog On Twitter :&gt;'/>

    <a class='orkut' href="http://tunestore.blogspot.com/ " rel='external nofollow' target='_blank' title='Share This Blog On Orkut :&gt;'/>
    </div>



    Have fun!

    ReplyDelete
  10. HELLO SIR i m having a blog at my blog there is a label or catogories named FUNNY SMS (8) having 8 posts

    http://free-mobile-sms-messages.blogspot.com

    my problem is that when i clcik on this this label {FUNNY SMS (8)}

    all 8 posts shows on whole page. is there any trick for this to show only certain no of post at a time. i mean if someone clicks on that label only one post must be visible and other will be visible when clicked on older post similar to a site on a private domain

    please find a way to solve my question

    i have searched hole web but i can't find it one of my friend suggested me to ask www.mybloggertricks.com you about this. he said you will find the solution here so please help me sir

    ReplyDelete
  11. @Eric Jones

    Your question is answered on this page -> Blogger Help

    ReplyDelete
  12. Hi Mohd,
    When we apply this widget ,it gets on the top of the page,I shifted it to the sidebar where as it has taken again the top place .How do I shift this place if I want this widget to be in between the sidebar ,more widgets above or below it and this one some where in between the sidebar but not on the top ? Hope I can do this?

    ReplyDelete
  13. Thanks I'm very delighted!!! you are superfast.. You did it in 5 minutes thats great!!!!!!!!!

    I don't know how to express my happyness!!!!!

    ReplyDelete
  14. @Sreejesh

    I am glad it worked for you. Note that I have mistakenly not enclosed the background url with brackets replace that part with this,

    background:url(http://i46.tinypic.com/vrbzpu_th.png) no-repeat;

    For off-topic questions post on this newly created page -> Blogger Help

    ReplyDelete
  15. @anonymous,


    Send me your Blog URL I will let you know the exact location to paste your code

    ReplyDelete
  16. Excellent!!! it worked great!! You made it look and understand the code simple. superb coding!! I was struggling to get this for more that 3or 4 days and you did it within 5 minutes. That's Mohd and MBT!!!!

    ReplyDelete
  17. can i add more than 4 tabs ????
    If yes pls heelp me how ??

    ReplyDelete
  18. @Anonymous

    To add another tab simple add this code above </div> in step#6

    <b:section class='tabbertab' id='tab5' maxwidgets='1'/>

    To add another add this,

    <b:section class='tabbertab' id='tab6' maxwidgets='1'/>

    and so on

    ReplyDelete
  19. Thank you i really enjo surfing your blogger!i hope i can do this.
    http://webizland.blogspot.com/

    ReplyDelete
  20. Mohd,

    Can you tell me how to adjust the height of the tabs AND allow for a title (per tab) that is two lines such as:
    Recent
    Post

    Thanks..

    ReplyDelete
  21. Mohd,

    One more thing. With these tabs at the top of my right hand sidebar, it is running into my category header- see my blog:
    http://thesavvyguy.blogspot.com/
    Can you tell me how to drop it a bit.
    Second, I seem to be getting an error since adding the above code, right when this multi-tab widget is loading- any suggestions?

    Thanks so much for all of your help..

    ReplyDelete
  22. @Savvy Guy

    You can increase the height by adding height="15px" to .tabbernav {

    But then this will look cluttered.

    For adding a space between tabs find and edit this,

    .tabbernav li {
    list-style:none;
    margin:0;
    display:inline;
    }

    Chnage margin:0; to margin:5px 0; 5px will add a space of 5px between the tabs at top and bottom. Try reducing or increasing the value 5px to suit your preferences.

    Suggestion:- Summarize your titles as Comments , Posts Archive Featured

    The widget will load after all blog content have loaded. So it normal. You can Add it a bit lower. Just like mine so that readers may not observe it while loading.

    ReplyDelete
  23. Mohd,

    Thanks for all of the suggestions. Very helpful. Two more things and I should be good to go. 1.) The line on the left boarder inside the main border won't show up for me- any suggestions? 2.) How do I move the widget down a spot or two, so it doesn't run into my menu OR how can I add a space between it and the grey menu?
    http://thesavvyguy.blogspot.com/

    Thanks again....

    ReplyDelete
  24. @savvy

    1. I can see both borders. May be you have troubleshooted your self. Use a different browser to see it.

    2. To shift the widget try reading the last of the tutorial carefully. I can not explain better than that :D

    An easy way to give a gap between this widget and other widgets in your sidebar is to remove the out border from the widget and give the out background the same colour as that of your blog. To do that find and edit this,


    .tabberlive{
    margin:0;
    padding:5px;
    clear:both;
    background:$tbbxbgcolor;
    border:1px solid $tbbxbrcolor;

    }

    To remove the border delete the border line i.e border:1px solid $tbbxbrcolor; and to change the background color replace background:$tbbxbgcolor; with this background:#DFE3E6 Use my color code generator for changing colors .


    Hope that would be helpful :>

    ReplyDelete
  25. Hello Mohammad, I'm visiting your site since last several months. Find several good tips. some hacks now using in my 2 blogs. This multi tab is really GOOD.

    http://bookscomics.blogspot.com/
    http://ijc-by-munnabhai.blogspot.com/


    Thank you very much!

    ReplyDelete
  26. Hello Mohammad

    i have not found "Variable definitions " & "#navbar-iframe { Some text here }"

    so any other option for my templet i m using ur old multitabber
    i want to replace that tab

    ReplyDelete
  27. @Prabhat's Books and Comics

    Pleasure Dear! thanks for your Feedback.


    @EasyDownloads

    Dear find this code instead,

    .navbar {
    visibility:hidden;
    display: none;
    }


    And paste the variable definition code in the above post just below this code

    ReplyDelete
  28. Thanks
    this is nice Post For me

    Thanks Mohammad

    ReplyDelete
  29. how can i move it on left with other elements as in your blog?

    ReplyDelete
  30. Hi there. Is there a way to make tabber load while the whole page is loading and not when the page has fully loaded? I'm using it on my blog (techgr.com) and it needs some seconds more the page has fully load to display tabber. Can we make tabber load while the page loads and not at the end?

    Thanks in advance and congrats on a great Blogger hack!

    DJDB

    ReplyDelete
  31. @Mary
    To move it to left search for this code in your blog,
    <div id='sidebar-wrapper-left'>
    And paste the code just below it.
    If you could not find this code then share your blog URL.


    @DJDB
    Bro unfortunately at present I haven't find any way out. The best would be to place the widget at 1/2 portion of your blog so that users may be able to see it appearing while they crawl to the bottom.

    ReplyDelete
  32. i resolve the problem after i ask..but thankyou for assured me the corectitude.
    i think i will understand these codes like you.
    lol
    just kidding

    xoxo,mary ^^

    ReplyDelete
  33. I have two questions...

    First, is it possible to make any part of this transparent, or have varying % of transparency, rather than having a solid/opaque background color?

    Second, I changed the position so that my widget is positioned at the bottom of my page. When I click on a tab it opens below the viewing area of my screen. I have to scroll down in order to see its contents. It does not automatically push the page up as it opens, to display the whole tab. Is this how it is supposed to work, or is mine not working properly?

    ReplyDelete
  34. @Mary

    Great going mary! :p

    @Anonymous

    At present we can only add opacity effect to backgrounds in CSS and I am sure the transparency effect will surely be added in new versions of CSS3 or 4 but unfortunately this effect is not possible with present available Styles on current versions of browsers.

    For your second answer I will simply say that if your multi tab is working just the way it is working on my blog then nothing is strange on your side :>

    ReplyDelete
  35. Hey Mohd!

    Thank you for all your great tutorials, I've applied quite a few to my mommy blog www.amormaternal.com

    I have a test blog, for trying out new widgets, and figuring them out properly before installing them on my actual site. I tested this multi-tabber there, and have encountered a problem: after having followed all the steps, I go to layout-> page elements, and it ALWAYS says "ready with errors" (in my browser), even after reloading a dozen times. Also when I try to click on the numbers to include widgets in each tab, it doesn't do anything (and my browser says "javascript void" in the lower left corner). I've restored the old template, and tried to install it again from scratch in case I made a copy/paste mistake, and the same happened again... What could I be doing wrong?

    This is the url of my test blog: http://loumasaderbujana.blogspot.com/ Please tell me what I can do to make the tabber work, it would save a lot of space on my mommy blog, I don't like blogs with 'forever scrolldowns', and have found a tabber to reduce page length...

    Thanks, kind regards!

    Louma

    ReplyDelete
  36. Hey Mohd,

    Forget it :) I tried again, and it finally worked! Thank you so much :D

    Kind regards,

    Louma

    ReplyDelete
  37. hi where i can add step 5 and 6??
    my blog is
    http//:aaddy.blogspot.com

    Plz help me

    ReplyDelete
  38. @Amor Maternal

    I like readers like you! =D


    @Adil Farooq

    Please read the previous comments. You will find your answer there

    ReplyDelete
  39. hello Mohammad
    first of all thanks for this widget. i have try it out at my test blog but it does not show it up. i am using a 3 column temolate and want to have this widget at the bottom of right column. Here is link for my test blog were i try this widget but its not shown so help me.
    http://learnblog9.blogspot.com/

    ReplyDelete
  40. @great99

    Dear you have successfully added the widget but it is appearing below your top search box because you have mis-positioned it. Do this now,

    1. Search for this code in your template,
    <div class='sidebar section' id='sidebar-right'>

    2. And then paste the code in step#6 just below it.
    3. That's it.

    ReplyDelete
  41. @Mohd: And I seriously love your blog, tricks and gadgets. Really clear and useful tutorials :) Keep up the good work!

    ReplyDelete
  42. Thanks Mohammad
    I have found it but the code was you said was not present.But some how i manage to get it but as i wanted it to be in right column but it is not coming there and can i change width of it.
    i have paste the code just after this section





    and it is not working when paste above
    Thanks for your fast reply.
    great99

    ReplyDelete
  43. sorry has i try to put the section code but it does not work
    1. Section

    ReplyDelete
  44. Dear Mohammad
    you can delete abovve two comments as i cannot paste the section so how do i contact you to tell the code.

    ReplyDelete
  45. That's wonderful ! Thanks for great post !

    ReplyDelete
  46. @Amor Maternal

    You are always welcome here bro! :>

    @great99
    Send me your template at mustafa.stc@ gmail.com I will do it for you and will return you the template. I believe this will be easy for you :)
    Different templates have different coding and the xml code is often not visible through the source code unless I see the main template coding.

    ReplyDelete
  47. Where can we see this widget in action. Rgds Indian-Share-Tips.Com

    ReplyDelete
  48. You can view this widget hanging on his sidebar.

    ReplyDelete
  49. how do i change tab from numbers to names?

    Thanks

    ReplyDelete
  50. This Works Completely Perfect
    Thanks Mohd.. !

    ReplyDelete
  51. dear frnd,
    You have advised for 4 or 5 tabs suppose i have 12 - 15 tabs then everything get jumbbled. i cant check which tab is showing me which info. i am using the first code!!!!

    Can you how to give atleast some gap in two rows of tab or focus/highlight on the selected tab

    Thanks in advance.

    ReplyDelete
  52. @Michelle Stanley
    Do you really feel the need? :>


    @Anonymous

    Dear 12-15 tabs would of course look bulky and complex! Do you think you really need 12 tabs? Brother the widget is a tabber widget and it is used only to give space to some important sections/widgets of a blog. Usually we dont add more than 5 tabs. If you need 12 tabs then I believe you should go for a navigation menu instead. I have written detailed posts on vertical and horizontal navigation menus.

    I hope you got the point! :>

    ReplyDelete
  53. cool tab...
    i like it...
    visit n se on http://www.senyawa.com/

    ty.... :)

    ReplyDelete
  54. This is totally brilliant and easy to install ~ THANKYOU :D
    Just two things:-
    1/ your variable defintions need a forward / at the end of each one, before the > (well at least with the newest blogger they do)

    2/ Is there any way to have the text inside the tabs a different colour to the tab background colour. I would like to have the whole thing transparent apart from the tab-text. Alternatively I don't mind having some colour on the tab itself and then having the text another colour, but I'd like to keep the backgrounds transparent. Hard to explain! Take a look at my blog and see how the tabber looks just now. I'd like to be able to see the text in the tabs before hovering, but I can't work it out. Do I just need another 'variable definition' ?
    My blog address is; www.frogacademy.blogspot.com

    And again ~ thankyou SO much :D!!

    ReplyDelete
  55. @Caroline

    I am glad it worked for you too. :) Here are my suggestions:

    1. I will look into this. Thanks for suggesting mam!

    2. Well to change and edit colours simply edit the colour codes inside the code in step#5. I visited your blog and found that the reason you want the tab to be transparent is so that it could match with your background colour. Well unfortunately this can not be achieved with the present styling.

    A short advise: If you remove your background image the load time will increase by 30%! :> The choice is upto you.

    I hope the answer would be helpful. Feel free to ask if you have any other query. :)

    ReplyDelete
  56. Thanks for your great widget. I installed your widget.
    I need your help. How can I change text font and size. Because it looks oversized. Especially in the 2,3 tab

    ReplyDelete
  57. @Help

    Dear find and edit this code,

    .tabbernav {
    margin:0;
    padding: 3px 0;
    border-bottom: 1px solid $tbbxbrcolor;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;
    }

    you can reduce the value from 12px to anything you prefer.
    Hope this was the answer of your question :>

    ReplyDelete
  58. hii,
    can u plz tell me how to place this multi tabbed widget in between the widgets present at my sidebar, just like yours.
    plz reply soon.
    I am also waiting for my off-topic question.

    plz email me the answer at: abhineetsuperb@gmail.com
    blog: http://abhicomputech.blogspot.com/

    ReplyDelete
  59. Thanks for this tuts, very helpfull.

    ReplyDelete
  60. hello admin, did not work in blog....you can seen the 1234 in page elements, but if you view your blog, nothings happen..

    ReplyDelete
  61. Good night already signed the feed from your site, I liked the template tanzanite and would like to send me the download link to my email. thanks
    concursovirtual@gmail.com

    ReplyDelete
  62. That's great! It's the widget I've been looking for . Good job.

    But I've followed your instructions several times in a blogger template, I can't get it work. In the layout -> page elements it only appears a list of 4 "add a gadget" instead the "1 2 3 4" multi tab. I don't know what I'm doing wrong.

    Any help would be appreciated.
    Regards,
    LLuís

    ReplyDelete
  63. @Lluis

    You did everything correct so no worries! Just click on the number and then on add a gadget to add a new widget to that tab. The tabs are numbered 1, 2, 3, 4 so when you click on a particular number then you are inside that tab. Hope that was clear. :>

    ReplyDelete
  64. Thanks Mohammad,

    The multi-tab widget works fine, but what it is strange is that the numbers 1,2,3,4 doesn't appear in the page elements only the four add a gadget boxes. May be I missed something but the widget it is working as you can see here:
    http://tradingdeguerrilla.blogspot.com

    Regards,
    LLuis

    ReplyDelete
  65. Thanks, I put on my blog and look great.
    Thanks again and I do not speak and write English! rsrs

    Thanks!

    ReplyDelete
  66. Look great, but it's not work on my ads theme blogger..
    So sad..

    ReplyDelete
  67. Hello Mohammad,
    I put this on my blog a few months ago and it was working fine, and now it is not. I went back over your instructions and everything still looks the same in the HTML, so can you please take a look at my blog and tell what to fix?
    My email is hopester777(at)gmail(dot)com.
    My blog is http://jacobsbeloved.blogspot.com/
    Thankyou very much!

    ReplyDelete
  68. i have a bit problem,

    step no 5- everytime i paste the code to variable defination this word will appear-Invalid variable declaration in page skin:

    ReplyDelete
  69. step no 6- i can't find---> div id='sidebar-wrapper' in my template.

    ReplyDelete
  70. @Jacobsbeloved

    I think you have removed the widget? What exactly is not looking fine? Kindly explain it a bit.

    @NEO
    Dear can you see some Variable definitions already declared in your template. Note:- Make sure to add step#5 after you have added the code in step#4

    For sidebar-wrapper kindly look for a similar code in your template or allow me to visit your template for it is restricted.

    ReplyDelete
  71. Thanks for the great tutorial! Everything worked to perfection on my blog. Not only does implementing this widget help with loading times but it also prevented a video I had embedded from auto-downloading! Sweet!

    ReplyDelete
  72. I did not remove the widget, I did not change a thing. When Blogger "updated" to a new form of doing templates, my widget stopped working. I did not even use the new stuff Blogger had put in, and I went through everything to make sure I still had all of the same HTML that you have here, and nothing has been changed.

    ReplyDelete
  73. @Rachel

    pal the only problem that I observed is that now the multi tab is rather aligned vertically due to some bug which is making it difficult to click and edit individual tabs. Blogger often play here and there and this makes our job difficult. I am looking to figure some way to solve this problem. Thanks for informing.

    ReplyDelete
  74. wow...nice entry..
    but ts so compicated for me to did it...
    too many coding...huhu
    but..
    later if i free i'll try it..huhu

    ReplyDelete
  75. I cant find your step 6 in my blog.......
    div id='sidebar-wrapper' PLEASE HELP

    ReplyDelete
  76. Also I cant find div id='sidebar-wrapper'

    ReplyDelete
  77. very helpfull post, thank you...
    But, is it possible to add two such tab widgets, one on the top of sidebar, and another to the bottom?

    ReplyDelete
  78. @Cute girl, @Gaus Rahman

    I had a simillar problem with my template, but instead of div id='sidebar-wrapper', I had a div class='rsidebar-wrapper' for right side, and div class='lside-wrapper' for left side bar...

    I hope it'll help..

    ReplyDelete
  79. hello mohammad have you seen all the blogger templates
    some templates does not follow the wrapper concept of page development
    because of that some new does not have "sidebar wrapper"
    may be they r using column technique or what ever i din't get the right word for that
    so pls give us a solution also on this.
    thanks.
    and great job and this truth you also know about your self.

    ReplyDelete
  80. I solved my problem and again thanks for the code guide.

    ReplyDelete
  81. It appears at the top of sidebar in my case after loading , how to change its postion

    ReplyDelete
  82. This comment has been removed by the author.

    ReplyDelete
  83. Work good, but i have a question. How if i want to add some description when hover at tab title, example at your is Latest News. I want when hover it suddenly popup some text, example like... Sport News or World News. By the way thanks for the code.

    ReplyDelete
  84. Hi It works!!
    It's great, Thanks for all your work.
    See it on my Blog : http://androidbuster.com

    ReplyDelete
  85. I follow your instruction step by step over 10 times but no result, i cant see the number 1,2,3,4 in Page Elements but 4 "Add a gatget" boxes, i test this trick with Blogger sample template, Minima. Here's a pic i take from my blog http://img836.imageshack.us/img836/95/headachea.jpg
    Im waiting for your help, or anyone have any idea with this bug?
    Thanks all so much!!!

    ReplyDelete
  86. Hi,
    I tried many tutorials to get this widget..all failed but this one worked perfectly at first try.Thank you.!!
    Check it out www.gugunte.blogspot.com

    ReplyDelete
  87. Thank you so much. What a fantastic and EASY tutorial to follow.

    ReplyDelete
  88. hi Please tell me what to do as in my blog template there is no {div id='sidebar-wrapper'} So what should i do?
    Here is my blog URL: stylingfashion.blogspot.com

    ReplyDelete
  89. thanks bro... Look great..
    http://webdesigntools24.blogspot.com/

    ReplyDelete
  90. thnx dude worked 4 me ::::
    gamozine.blogspot.com

    ReplyDelete
  91. Hello Mohammad,
    Your Article is too good,and its really very hrlp full but i have one problem is that when i try to find the code
    div id='sidebar-wrapper' its not in my template so i am not able to use this but i reall want to use it and i want to add it in my blog bottom right side. i also tried this code
    div class='sidebar section' id='sidebar-right' but the problem remains the same.plz do help me.
    thank you.
    My blog : http://www.cafeguitar.co.cc

    ReplyDelete
  92. Apologies for the late reply. I got free from exams some weeks ago.

    @fahad

    You can either paste the code below <div class='sidebar section' id='sidebar-right-1'> for right sidebar or below <div class='sidebar section' id='sidebar-right-1'> for left sidebar

    And thanks to everyone who found the widget worth trying.

    ReplyDelete
  93. Hello mohammad,
    your blog is so nice and its so helpful to me and really tks for that.i hv downloaded your MBT CRUNCH theme template and i was trying to add this multi tabbed widget all code correctly inserted but when navigate to page element it was showing like these...
    http://i960.photobucket.com/albums/ae87/jeetdholakia/Multitabbed.jpg

    plz help me.

    ReplyDelete
  94. i want to make this type of two tabber but i am unable to do please help me my brother

    ReplyDelete
  95. Hello Mohammad,
    i done with my previous problem but i have my blog http://www.cafeguitar.co.cc on this i have to add this multi tabbe widget but whene i insert the variable definition code its shows the error like "Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed. Input: " and also in my templare there is no code like <div id='lowerbar-wrapper'> and also not like <div id='sidebar-wrapper'> actually i want to add this widget in footer right side,so please help me out i really want to add this widget.

    look at this where i really want to add http://i960.photobucket.com/albums/ae87/jeetdholakia/footerrightside.jpg

    ReplyDelete
  96. @Shubham
    Go to Edit HTML and find the following two codes:
    [b:section class='tabbertab' id='tab3' maxwidgets='1'/]
    [b:section class='tabbertab' id='tab4' maxwidgets='1'/]

    And delete them and save template and its all done :)

    Note: Replace '[' with '<' while finding the code.

    Thank You
    Samsexy98

    ReplyDelete
  97. @Jeet Dholakia

    Thanks for the appreciation. I have updated the code. Kindly repeat step#6.

    @Shubam Kumar,

    Sam is right. kindly Do as Sam says. And yup I loved it when you called me brother :)

    @Sam
    How many times shall I thank you? :P

    ReplyDelete
  98. @Mohammad
    Come on...

    At one end you say that you loved when I told you bro and at the other end you ask how many times to say thank...

    There is no need for it when you think that what I said I mean it..

    I hope Shubham's problem is solved now.. :)

    ReplyDelete
  99. Hello Mohammad,
    Thanks for your reply but my main prolblem is that in my template there is no code like <div id='sidebar-wrapper'>
    so where do i add it and i want to add in bottom right corner of my blog.and when i add variable code it shows the error like this "Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed. Input:" so look into it.
    http://i960.photobucket.com/albums/ae87/jeetdholakia/footerrightside.jpg
    please help me out for this.

    ReplyDelete
  100. @Jeet Dholakia

    brother find this instead

    <div class='sidebar section' id='sidebar-right-1'>

    and paste your code below it and let me know if it works.

    @Sam

    I got you bro. Really appreciated that :)

    ReplyDelete
  101. Thank You Mohammad,
    for your replay, brother this <div class='sidebar section' id='sidebar-right-1'> code is also not there and what should i do about that variable problem?

    ReplyDelete
  102. @Jeet Dholakia
    That is impossible that you don't that code too..
    I checked your site and it is there..
    Did you checked "Expand Widget Templates" in Edit HTML while finding..

    If not then try finding after checking that..

    Thank You
    Samsexy98

    ReplyDelete
  103. @jeet

    Samsexy is right. please check the Expand widget templates box and look again for both codes or else look for class='sidebar section'

    ReplyDelete
  104. @Samsexy and @Mohammad,
    thanks for your advice i will look into it and let you know.

    ReplyDelete
  105. Hello Mohammad,
    I find that code but another problem is that when i try to insert variable defination code it shoes the error like this :
    Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed. Input:

    please please help me about this error.

    ReplyDelete
  106. @jeet

    Dude where are you pasting the code? Paste it just under
    /* Variable definitions
    ===================

    If it still didn't worked then leave variable definitions and paste the following CSS code instead,

    /*--------Tabber----------- */
    .tabberlive{
    margin:0;
    padding:5px;
    clear:both;
    background:#f8f8f8;
    border:1px solid #DDD;
    }
    .tabbernav {
    margin:0;
    padding: 3px 0;
    border-bottom: 1px solid #ddd;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;
    }
    .tabbernav li {
    list-style:none;
    margin:0;
    display:inline;
    }
    .tabbernav li a {
    padding:3px 0.5em;
    margin-right:1px;
    border:1px solid #DDD;
    border-bottom:none;
    background:#0084ce;
    text-decoration:none;
    color:#ffffff;
    }
    .tabbernav li a:hover {
    color:#0084ce;
    background:#ffffff;
    border:1px solid #DDD;
    text-decoration:none;
    }
    .tabbernav li.tabberactive a,
    .tabbernav li.tabberactive a:hover {
    background:#ffffff;
    color:#0084ce;
    border-bottom: 1px solid #ffffff;
    }
    .tabberlive .tabbertab {
    padding:5px;
    border:1px solid #DDD;
    border-top:0;
    background:#ffffff;
    }
    .tabberlive .tabbertab h2,
    .tabberlive .tabbertabhide {
    display:none;
    }
    .tabbertab .widget-content ul{
    list-style:none;
    margin:0 0 10px 0;
    padding:0;
    }
    .tabbertab .widget-content li {
    border-bottom:1px solid #ddd;
    margin:0 5px;
    padding:2px 0 5px 0;
    }


    If you use the above CSS code then you don't need to insert variable definitions. Let me know.

    ReplyDelete
  107. hey mohamaad,
    i have the same problem as faced by jeet:(
    2.mohd.you know that i use tanzanite templet in all my blogs and they all already have this tabber widget but it dose not accpect anything other then html/java in this case how do i add my lables,archives,tags ect????
    Mohd .pls reply SOOOOON:)
    <3 and blessings

    ReplyDelete
  108. @priyanka

    I have replied your query at Blogger Help page.

    ReplyDelete
  109. Hi! I am trying to change the font size within the part called, About" so it matches the rest of my nursing blog. Changing font-size:12px; only changes the font size for the tabbed widget titles.

    You can see this at my test blog:

    http://myaussietest.blogspot.com/

    Also because my sidebars are so narrow is there a way to drop the tabbed widget to the bottom of my blog.

    Take Care,
    Peter

    ReplyDelete
  110. I love this code!! I'm using it now on my blog to free up some sidebar space! Thanks so much, Mohammad!

    ReplyDelete
  111. Hi Again! I now understand that I have to format the text (HTML) to get it the way I want. Still, how do I move the tabbed widget down to the bottom where you see the widget I called macca?

    You can see this at my test blog:
    http://myaussietest.blogspot.com/

    Thanking you for your time,
    Peter McCartney

    ReplyDelete
  112. Hi Mohammad,
    thanks for this amazing tweak. I've just tried it on my testblog and it worked like a charm.
    I installed it on the main section, looks great both at the end and at the beginning.
    I need it on just certain pages, where I've hidden the main widget (Blog1) and I have only widgets as content.
    My question is: is it possible to show this tabbed widget only on certain pages, just like we do with individual widgets?
    Thanks in advance.

    ReplyDelete
  113. Sorry Mohammad, that from before was a stupid question; once hidden, a widget stays hidden.
    I installed it on a designer template, at first I couldn't save it "page skin not well formed", it just needed a trailing slash at the closing tag of the variables.

    It looks acceptable on my archive page where I wanted it but I have an ugly box on my other pages after the posts(without the widgets). I could blend the box with the background but the tabs are visible too.
    I know it has nothing to do with this code, it is not made to be hidden occasionally. The problem is with my template but I don't think I can fix it without your help, which I would appreciate very much.
    This is the blog in question, if you could look at it: http://macroflower-saturday.blogspot.com and the tabbed widget it on the archive page (from the main menu).

    ReplyDelete
  114. I'm trying to use it on http://anti-vigilante.blogspot.com:

    I get an error about variables in the page skin.

    And I want to put it up at the top in place of the kickstarter, chipin.

    Also can I somehow have it so it has the video part next to it.

    ReplyDelete
  115. Add these above if you are using it:

    .tabbertab {
    margin:0;
    }

    .tabbertab .widget {
    margin: 0;
    }

    ReplyDelete
  116. Mohammad,

    Seems Followers widget fails if I put it in there but works in other places, even if I drag it after it's up.

    http://anti-vigilante.blogspot.com

    ReplyDelete
  117. WOW...MOHAD. FINALLY THIS TABBER IS WORKING FINE IN MY BLOG ,I AM SOOO HAPPY BRO .U ARE THE BESTT!!!!!LOTS OF BLESSINGS TO YOU FOR PROVIDING SUCH A WONDERFUL WIDGET .
    LOADS OF LOVE :)
    PRIYANKA

    ReplyDelete
  118. hello sir... i did this job properly.. but my added gadgets did not show on tabbar when i brows my site. my web : http://akashnill.blogspot.com/

    ReplyDelete
  119. Hey Mohammad,
    I like your website very much.

    I used this widget before and it work smoothly.
    However, recently I changed my blog template with the blogger template designer (launghed by Blogger) and found that I had no idae about how to add this widget again.

    Step 1~5 are ok. But I can't find "div id='sidebar-wrapper'" and there is no code like "div class='sidebar section' id='sidebar-right-1'".

    Thanks for your help.

    Best,
    Jack

    ReplyDelete
  120. Hello Mohammad. your widget is really great but i have one question.this widget will lessen the speed of my blog?

    ReplyDelete
  121. hey brother can u help me to how to add this multitabber widget in blogger..
    please give me complete detail for how to add this widget in blogger...
    http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial
    my email address is rajendrakohinoor G mail

    ReplyDelete
  122. Hi Mohammad,

    Thanks for the tips, i really like it and really appreciated your work. Unfortunately i am having difficulty to add code at step 6. I unable to find "div id='sidebar-wrapper'". I used custom template crated with Artisteer.

    Please help me and thanks a lot.

    ReplyDelete
  123. UPDATE:
    Thank you all for finding the widget so useful. I humbly apologize for no replies. I recently recovered from an operation. Please give me a day so that I could fully reply each query.

    ReplyDelete
  124. is it possible to add this multi-tab widget to page or post ?

    ReplyDelete
  125. I am afraid no dear because the widget section tags can not be embedded inside the body of the posts. Hope this was clear :)

    ReplyDelete
  126. The best tutorial on the web. I've visited 8 sites ranked higher than you and the directions are terrible and the widget, just as bad. You have helped me tremendously. Wonderful job!

    ReplyDelete
  127. @Lauren
    I am flattered :)) Thank you Lauren and you are always welcomed here.

    ReplyDelete
  128. Thanks for this tutorial!
    I had a question about it though -- When I moved my Google Friend Connect widget into it, all of my followers disappeared. Anyway to take care of that?

    ReplyDelete
  129. This comment has been removed by the author.

    ReplyDelete
  130. Mohammed

    My widget is not showing up in Internet Explorer. It works great in Firefox. Any ideas?

    Thanks
    Site is http://www.ancientdigger.com

    ReplyDelete
  131. @Lauren
    Pal It shows up just fine upon compete page load. It doesn't work well with IE6 but works just fine with IE7 and IE8. No one uses IE6 anymore btw :>

    ReplyDelete
  132. Thank you so much!! This Widget is awesome and I've been looking for ever since I saw it on another blog.

    I have one problem and I hope you can help me... I have it testing on my test blog http://mrsvtestblog6.blogspot.com/ and as you can see I'd love to have a space between this multi-cool Widget and the next one.. I tried changing the paddings but somehow I didn't do it right.

    Would be AWESOME if you could help me with this!!!

    (P.S.: I also added the three Column footer section and I love it! You are incredible thanks so much for sharing all this)

    ReplyDelete
  133. Hello Mohammad,
    i have tried all option that u have suggested but any of them is not working,i need this widget badly and i want it in my footer left side so plz help me out.

    ReplyDelete
  134. Thanks for the widget. Is there any way to add another on the left side? My blog is http://ritareviews.blogspot.com I would love to get all those drop down menus into a tabbed widget so it looks cleaner.

    ReplyDelete
  135. Apologies Apologies for the late reply. Had exams! :(

    @Dany

    Thanks for all the feedback. Where exactly do you want to add space? Please explain a bit I checked your test blog and it looks just ok.

    @Jeet

    The other widegt it working just fine on your blog so where exactly you facing problem. Did you followed step# 6 correctly?

    @Rita

    yes sure you can. simply replace the code in step#6 with this,

    <div style='clear:both;'/>

    <div class='tabber'>
    <b:section class='tabbertab' id='tab1' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab2' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab3' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab4' maxwidgets='1'/>
    <b:section class='tabbertab' id='tab5' maxwidgets='1'/>
    </div>

    ReplyDelete
  136. Hi Mohammad

    Thank you for the wonderful tutorial. I have 2 questions I was hoping you can help me with. Please see my testing page eycslidertest.blogspot.com

    1) How do I get rid of the "inner box" that holds the tab content? How do I increase the width of the multitab "outer box"?

    2) Is there a way to have the multitab gadget in between other gadgets?

    ie:
    Gadget
    Multitab
    Gadget

    Thanks for your help!

    ReplyDelete
  137. @PRNom

    You are welcomed dude!

    1) Replace

    .tabberlive .tabbertab {
    padding:5px;
    border:1px solid $tbbxbrcolor;
    border-top:0;
    background:$tbbxcolor1;
    }

    with this

    .tabberlive .tabbertab {
    padding:5px;
    border:0px solid $tbbxbrcolor;
    border-top:0;
    background:$tbbxcolor1;
    }

    2) We are already adding it inside a HTML/JavaScript widget and further insertion is not supported by Blogger.

    I hope this helps :>

    ReplyDelete
  138. Mohammad,

    Thanks for the tutorial. I am having two problems:
    1 - I couldn't find the code div id='sidebar-wrapper' but found a position where I thought it should fit and entered your code there. Not sure if this was correct?
    2 - My major problem is that in the layout view my 'tabs' are appearing on the right side with my posts; however, I would like for the tab widgets to appear on the top of my left column. Could you advise where to place the code so that this will change.

    Thank you!

    ReplyDelete
  139. Hi Mohammad,

    Thanks for the tutorial. I am having a problem with the width of sidebar .i have send you a detailed Email.Please replay

    ReplyDelete
  140. @Megan

    Hi megan, I visited your blog and guess you figure it out yourself. Apologies for the late reply. Congtax :>

    @Vishnu
    The width is auto adjusted. No work required on your side. I will check your email too. If I didn't reply within two days kindly resend the email.

    ReplyDelete
  141. This comment has been removed by the author.

    ReplyDelete
  142. This comment has been removed by the author.

    ReplyDelete
  143. Thanks Bro for your next lesson i need that of my sitemap of webs.com, my site is www.peers2peers.webs.com, Google cannot update the sitemap after i use the seo generator

    ReplyDelete
  144. very good but i can't find theis code <div id='sidebar-wrapper'> in my blog help me.

    not also this

    <div class='sidebar section' id='sidebar-right-1'>

    i also check my EXPAND WIDGET TEMPLATE option

    this is my blog URL
    www.fblatest.in

    reply As Soon AS Possible

    thnxxxxxx

    ReplyDelete
  145. This is for those who are struggling with <div id='sidebar-wrapper'> code

    Even I struggled with this nearly 3 hours....i didnt get code <div id='sidebar-wrapper'> in my blog,,At Last i concluded that that was not there in my blogger template.Then <div id='sidebar'> and <div id='lowerbar-wrapper'> both are there.

    I installed Step#6 After <div id='sidebar'> and it is working fine on my blog
    http://mobilegk.blogspot.com/
    So finally my advice is, If <div id='sidebar-wrapper'> is not there, then search for <div id='sidebar'> and paste the code after that........

    ReplyDelete
  146. Hi. I have tried this fantastic advice, and it works fine. My problem is that every tab gets the style of the side widgets (green rounded line around), so the final aspect is not good. I've been trying to find out why this is happening, but I couldn't find a solution... does anybody know how I can eliminate the style from inside the tabs? Thank you!
    You can see it in my blog: http://www.eurowon.com/ (bottom of the right side bar).

    ReplyDelete
  147. Hey! its wonderful as always. but how to add one more section like that? i mean not another tab, the whole bunch?

    now i have a section of four tabs, i want one more section of four tabs(5,6,7& 8) below it. can you please help me? http://hsquares.blogspot.com

    ReplyDelete
  148. codes given in point no.5 ,the close end (/) is missing. this has caused problems.you may correct this. THIS IS REALLY REALLY GREAT WIDGET MAN. THANK YOU THANK YOU...i am from bangalore-India. thanks a lot.

    ReplyDelete
  149. great surprise...you have many GREAT TIPS in your site than any other ones. i have recommended to many in the last 5 hrs. thanks. one request. is there possibility for "blog post in two columns (splitted based on number of words) like in the newspapers (there it is 8 columns..but i need two columns in the blog post area. i dont find anything like this in web. there is something like splitting while writing it in the post window itself. but that is not feasible and it looks awkward...thanks Mohammad.

    ReplyDelete
  150. And in this multi tab widget i added feedjit but it does not show up. why?

    ReplyDelete
  151. and also followers widget if i add it shows zero members. have i done any mistake. thanks Mohammad

    ReplyDelete
  152. u cant any widgets underneath the tabbed widgets help????!!!

    ReplyDelete
  153. hi mohammad..nice widgets thanks but i have a little problem with it.! how can i rename the tabs? or change the names of tabs..it appears 1,2,3 and 4..how can i change it into words that i wanted to? help me pls.thanks..

    http://uastig.blogspot.com/

    ReplyDelete
  154. hello mohammad i cant find {div id='sidebar-wrapper'>
    please help me..
    http://nbalive-tv.blogspot.com/

    ReplyDelete
  155. thanx now hehehe i have a nice blog now thank u :)
    uastig.blogspot.com

    ReplyDelete
  156. there is no div id='sidebar-wrapper'> in my template
    please help me..

    ReplyDelete
  157. Thanks a lot Buddy Keep up your good work... :]

    ReplyDelete
  158. works great :)

    www.androidcop.blogspot.com

    ReplyDelete
  159. Hello I cannot find div id='sidebar-wrapper in my html text!? I followed the instructions!

    ReplyDelete
  160. Why cant you create these widgets with just one click "add to blog" type easy setup ? I have these spider web like codes to paste and search and paste it on template code. Most of them wont work if the template is customized for any other widgets or features or that.

    ReplyDelete
  161. DEAR SIR I AM UNABLE TO APPLY THIS WIDGET ON MY BLOG http://governmentandpvtnaukri.blogspot.in/ PLEASE DO NEED FULL.... ALSO PLEASE SUGGEST ME SOME GOOD TEMPLATE ACCORDING TO MY BLOG WITH ALL LATEST FEATURE

    ReplyDelete
  162. This comment has been removed by the author.

    ReplyDelete
  163. I'm unsure if this is still active or not, but I'm having difficulty in understanding how to change the tab titles from 1,2,3,4 to any sort of word. I'm hoping someone might help?

    ReplyDelete
  164. Worked like a charm! Thanks for sharing this.

    Please visit my blog http://allseotipsandtricks.blogspot.com
    And let me know what do you think about it.

    ReplyDelete
  165. This comment has been removed by the author.

    ReplyDelete
  166. wow... thanks for posting and helping
    www.yahooclear.com

    ReplyDelete
  167. i coud't find this two codes in my blog :

    #navbar-iframe
    <div id='sidebar-wrapper'>

    www.yahooclear.com
    pls help me

    ReplyDelete
  168. hi
    i am having a problem in finding this code in my template
    "div id='sidebar-wrapper"
    it not der in ma template

    ReplyDelete
  169. Assalam-O-Alaikum Brother

    I have not found "Variable definitions " & "#navbar-iframe { Some text here }"

    So Any Other Option For My Blog Templete
    syedbahadurshah4u.blogspot.com

    ReplyDelete
  170. How i Change the Name of tabs '1'2'3'4'.. Plz Help?

    ReplyDelete
  171. How Sad. (T.T) I Can't find this code <div id='sidebar-wrapper'>

    Please help me Mohammad I love this widget and I want to see this on my sidebar...

    Hoping that you will help me again please...

    Here's my Blog: www.juandelacruzblog.com

    Thank You!

    ReplyDelete
  172. This comment has been removed by the author.

    ReplyDelete
  173. Hi everyone,
    some of u faced the problem that you cant find id='sidebar-wrapper'> so now

    find this code class='column-right-inner'> and paste the code in step 6 below the above code.

    and also some of you found error while adding step 5 i.e,

    when u add variable code it shows the error like this "Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed. Input:"
    so paste the code in step below/* Variable definitions
    ====================
    but u need to add / at the end of each tag in variable name
    TricksWorld 99

    ReplyDelete
  174. Hi, I cant find the in my code. Any alternative? Thanks a lot!

    ReplyDelete
  175. Can yOu Please Help Me, I'Am Using This Multi Tab, WheN I oPEN Any Of Post On My Blog It Show My Followers 0, aND Homepage It Shows Full, What Is The Problem

    My Blog - http://www.dheeraj4uall.blogspot.com/

    ReplyDelete
  176. Hi Mohammad

    I have add this widget on my blog and it's really nice ... the only problem is i want to put it in the middle not on top or bottom ... i'm really confused in this i hope you can help me ... here is my blog bestgarage.blogspot.com

    ReplyDelete
  177. yeah.. very2 thanks for this tutorial. im done edit it with my own colour. u all can see mine http://bloggertraffichelper.blogspot.com/ ... Tq Admin

    ReplyDelete
  178. bro, is there anyway i could change the tab title like something else, say word(s) instead of 1234? i can't seems find an answer on the comments? i am trying to figure it out now but i only know basic html and my knowledge is not that advance.

    ReplyDelete
  179. not working with my blog, www.kof-all.blogspot.com

    ReplyDelete
  180. This comment has been removed by the author.

    ReplyDelete
  181. Hellooo, I have a Popular post widget in the sidebar. Now I want to add a Recent Posts Widget in tab style But don't want to change the design of the widget. So adding the html and script will do the job or not??? Or Do I have to add variable part too.

    ReplyDelete
  182. The widget appears latter than the others. And it is positioned to high. Could you help me? Thanks.

    ReplyDelete
  183. Go to Blogger > Layout > Edit HTML ( wrong )

    Go to Blogger > Template > Edit HTML ( Fix it Bro )

    ReplyDelete

Widgets + Web Designing

Workshops

SEO Mashup