Multi Tab Widget For Blogger/Blogspot Blogs -Updated


Update: A more cuter and improved widget can be found here -> Advanced Multi Tabbed Widget


multi-tab-widget-for-blogge

Multi tab Widget is a must widget for every blog may that be wordpress hosted blog or Blogspot/Blogger. It helps to decrease the load time of a blog by combining three or more than three widgets into one! .You might have seen this widget on every blog and even on my blog (look at the sidebar) but the question is how do you add it? Well If you go and search in Google on how to add a multi tab widget to your blog you will land on various blogs with several tutorials but believe it or not, disappointment is what you will get in return. Now why is that?

 

This widget looks cool only if coded with CSS and JavaScript. Several blogs share different tutorials but unfortunately most of these tutorials are either very difficult to understand or they are written in a technical language that a newbie can’t understand. Moreover the codes that they offer are pretty lengthy which increase the load time of your homepage and often the widget doesn’t seem to work in browsers like Internet Explorer. And the worst part is that some bloggers who share this trick often add their blog link to the widget code and when you view that widget in your blog, at the bottom of that widget you will find this “ Widget by XYZ.com” or “Grab This Widget”. This link is surely injustice with the reader. In short give preference to anything which is easy to understand, interesting and which may give a professional look to your blog not a Grab this widget look.

Now how come my widget be very different. As I have mentioned in my About Me page that I am not an HTML or JavaScript expert but I have learnt the art of editing my template through trial and error. I read blogs day and night and when some blog catch my attention I start playing with its template via its Source File, which shows all their template coding in HTML, XML and CSS Language. Hence I have stolen many hidden and secret codes :D and thus I am ready to share those codes with you. Don’t worry I will never add a Grab this widget  link to any widget that I share.

UPDATE:-

Most of you complained that the tabs are not working/clickable. I was amazed too because this widget was working perfectly alright in all my test blogs. Then how come its not working in your blogs? Well the answer was simple than I could imagine.

This widget uses a JavaScript which is responsible for making the tabs clickable. I saved this widget in Google sites and link it to this widget. This was the mistake that I commit. Google sites offers limited bandwidth and is far slow to respond than you can imagine. Hence when you guys would add this widget to your blog, the JavaScript would not load, as a result leading to static tabs.

Fortunately I have updated this post with all necessary steps to take. You will have to add the JavaScript directly to your blogger templates. Doing this will improve the widget performance and will also reduce your page load time. This update will solve all your problems!

Follow the Steps Below,

  • Go To Blogger > Layout > Edit HTML
  • Search for  </head>              (Tip: Use Browser Search Box. Press Ctrl + F )
  • And Just above </head> paste the code below,

<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>

  • Save your template

 

Adding the code for  Multi Tab widget to HTML/JavaScript widget

The Code for Our Multi Tab Widget looks like this,

<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: #eee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #fff; 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 #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom: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="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</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>
</div>
</div></form>

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

Things To Note:

#eee : This is the background colour of the Tabs. The Default one is grey. If you want to change it to a different colour of your choice then use MBT Embeddable Colour Chart

#fff :  This is the colour of the border of your multi tab widget. The default one is white you can customize it to a colour of your choice using the same colour chart mentioned above.

#ffffff : This is the background colour of the main body of your widget. This is where you will add content to the widget. The default one is white. Use MBT Colour Chart if you wish to use a different colour.

#eee : This is the colour of the borders around those rectangular tabs. The default one is grey. Use MBT Colour Chart if you wish to use a different colour.

#000000 : This is the colour of the text/font that you will write to name your tabs. In other words, it’s the colour of your tab titles. The default one is black.

Replace these with your tab titles

Tab 1 , Tab 2  , Tab 3

Replace these with your widget codes.

Tab 1 content goes here , Tab 2 content goes here ,  Tab 3 content goes here

Here goes the codes of your content/widgets, which can be your recent comments widget, recent posts widget, any written text, a picture etc. For example, to add a recent comments widget to the first tab, name Tab 1 as Comments and replace Tab 1 content goes here with the HTML code of your recent comments widget.

Adding the Multi Tab Widget To your Blog

After you have customized the code, do the following,

  • Log into your blogger account
  • Go to Layout > Page Elements

Blogger Layout Page Elements

  •  Click on Add a Gadget

add-a-gadget

  • Then Choose HTML/JavaScript Widget from the widget list that blogger provides

htmljavascript widget blogger

Now paste your customized code into this widget by leaving the title empty. Hit Save and You are Done! Check your blog to see the new dress :)

That’s All!

Feel free to ask or suggest. Your questions and suggestions are the only favour I get in return.

Need Quick Help within 24 Hours? ASK NOW



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 »

87 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. Thank you very much friend!

    abid
    www.gamingmypassion.co.cc

    ReplyDelete
  2. hey great man! I will surely try this one.

    Why don't you write tutorials for wordpress?

    ReplyDelete
  3. @Abid I hope this works for you


    @enthy

    dude I don't write tutorials on WordPress because the language used is PHP and WordPress templates are un-editable!

    ReplyDelete
  4. Glad to see you back. I am going to try this on my blog which as you know is neither Blogspot or Word Press. Glad to hear that you don't like Word Press either. I could not get that going. Thanks for this great information.

    ReplyDelete
  5. hi Marg,

    Well unfortunately I am really not back to work! I am still busy but can't avoid to respond to comments from you guys. :D

    Marg I honestly just hate WordPress and I have reasons to define that. I am going to bring some rarely seen seo tips, blogger tricks and blogger magazine styled templates (One For you where you can Show a Slide show of You kitties and doggies :D)

    Take care

    ReplyDelete
  6. thanx man
    i`m watting you till finish to share some ideas

    ReplyDelete
  7. plz see my new update tell me ur opnion
    http://theway2makemoney-ha198000.blogspot.com/

    ReplyDelete
  8. hi ha198000
    I will read that article soon. Man I guess I will need to arrange a template for you too since you badly need it :D

    ReplyDelete
  9. yes man i need it sooooooooo much my long content make it look ugly
    plz help

    ReplyDelete
  10. Get site, I am always looking for ways to make my site/blog look more interesting.

    http://growthofblackhair.blogspot.com/
    http://passforphoto.blogspot.com/

    ReplyDelete
  11. Great!!Nice post. Thanks for the information. I read from you again.

    ReplyDelete
  12. Hey, Its really helpful, I will use for my blog..

    ReplyDelete
  13. Mohd... I want add Multi Tab widget to my blog...

    but, the problems is my blog has two column on the left sidebar. Do you know how to combine those two column in a 1 column to put ur widget without affecting the below column... jeez, its kinda hard to explain..

    mmm.. for instance, in ur sidebar.. there are MULTI TAB WIDGETS (in one column) above the WIDGETS and ADD ON & LINKS.

    plz look my blog : www.zaarz.blogspot.com

    ReplyDelete
  14. hi Zaarz,

    You are right its not easy and it would take me a complete to explain it for you. Further that multi tab widget looks good in blogs with wide sidebar area and you can surely increase the sidebar area and change those two columns to one. If you really will to do that then kindly email me your template at mustafa.stc@ hotmail.com

    I will alter your columns into one and increase the post area.

    But the best option would to choose a better looking template like MBT Church Theme

    ReplyDelete
  15. Wow! Really easy instructions. I have two questions:

    1. Where can I insert code to keep the widget the same size no matter how much content is in each tab. Like a height=200px; overflow=auto; to create a slidebar.

    2. How can I have more than one of these in my blog. As I've been experimenting with tabbed widgets, the second one on a page will not move from tab to tab but controls the first one. I don't have an example to show you, I'm experimenting in a test site.

    I'm trying to create resources with different topics.

    Any help would be awesome!

    Thanks.

    ReplyDelete
  16. @ A Cheap Chick

    Ans(1) To control the height or width of the widget, edit the following code in the above full code,

    <div style="width: 300px; height: 310px;" class="Halamans">

    You don't need to add "overflow=auto" The sidebar is added automatically when the content goes beyond the specified height.

    Ans (2)
    Plz don not add more than one tabber widget in your blog. The reasons are simple, the load time of your page will increase tremendously, the javascript code will need to be altered completely in order for it to control two widgets and the third reason is that doing such would not be seo friendly act.

    You are doing great job by collecting resources and making it available. Make sure that you stick to smaller number of topics possible for the success of your website/webblog

    ReplyDelete
  17. Mohd.... Thanks.. It was so great jobs.. Kinda feel u were good at this coding stuff... :) keep it up...!!

    but, hows about comment box ? how to make author's comment different colour with the guest comment ?

    Anyway, how to get those template ? can u send it back to me... ; i'll put ur blog link as a credit in my footer later on.. hehe... thanks again...

    Happy Ramadhan..

    p/s : Glad to be in this informative blog... ^_^

    ReplyDelete
  18. oopss.. sorry, forget to mention... there's a huge space between the multi tab widget and find entries box.. can u arrange the multi tab widget in line with the straight line shows in the posting section ? just asking....

    ReplyDelete
  19. Wow...its really good instructions. Thanks.

    ReplyDelete
  20. Your template has been emailed to you. I have also added information to hide the vacant/empty space below your tab contents. Just change things as guided to adjust the widget to suit your preferences.

    ReplyDelete
  21. This comment has been removed by a blog administrator.

    ReplyDelete
  22. Why am i not able to add more tabs?

    ReplyDelete
  23. Basically i found it! LOL

    Increased the pixels so it showed the rest of the pages. But i do not no the code i need to fill a second row of pages like:
    page1 2 3 4 etc****************************(row 1)
    page 10 11 12 etc*************************(row 2)

    i do not know how to do that please

    ReplyDelete
  24. Could you please give me the code i need to be able to add a second line of tabs under the first?
    thank you

    ReplyDelete
  25. Well if you do that than this widget will lost its meaning and will be named as a navigator. Dear you can add a maximum of 3-4 Tabs, more than that will increase page load time and will surely distort the overall purpose of this widget. A tabber is meant to reduce page time, if you add more than 3 or 4 tabs, than your widget will take long to load which is not appreciated.


    As a SEO point of view, adding more stuff inside tabber is harmful because the data is surrounded by javascript and will not get properly indexed thus not appearing on search results. Kindly stick to three tabs.

    Here is the CODE for my own customized tabber widget hanging on my sidebar,

    <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: #eee; }
    div.TabTampil div.Halamans
    { clear: both; border: 1px solid #fff; 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 #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom: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="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 300px;" class="TTs"> <a>Comments</a> <a>Featured</a> <a>Attention!</a></div>
    <div style="width: 300px; height: 300px;" class="Halamans">
    <div class="Halaman">
    <div class="Alas">
    <br/>
    ADD Comment FEED or Comment CODE here
    </div>
    </div>


    <div class="Halaman">
    <div class="Alas">
    <br/>
    ADD Popular Posts Code Here

    </div>
    </div>


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


    <br/>
    <div style="text-align: justify;">
    ADD Some Description Here
    </div>
    </div>


    </div>
    </div>

    </div></form>

    <script style="text/javascript" src="http://sites.google.com/site/tntbystc/Home/tabwidget-smart.txt?attredirects=0"></script>
    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>


    If you needed help, you are most welcome

    ReplyDelete
  26. thanks, your tutorial is very usefull. but i face some problem with it. i use it in my page, www.neno09.co.cc, but why it can't work. i mean tab 2 and tab 3 can't be opened. altough i use new one.

    i hope you can help me,

    thanks very much,

    ReplyDelete
  27. @neno,

    I just check your blog and the email that you sent me. You are not using the code i provided you. Kindly replace your current code with the code I have shared in the previous comment. Things will work immediately.
    This code works just fine on any blog.

    ReplyDelete
  28. @Neno

    I checked the code that you sent me. It is improperly coded and is tagged wrongly.. Kindly revert to the one shared in the previous comment.

    ReplyDelete
  29. i am sorry, but it still doesn't work. i left that widget as good as your code. but tab 2 and 3 still doesn't open. can you give any solution:)

    thanks you very much for your attention,

    ReplyDelete
  30. @neno


    The only problem that I am 80% sure you are facing is because of that .co.cc redirection. Most of the readers that find my widgets unworkable have either syndicated their domains to co.nr or .co.cc . Now that may seem funny for some but this is what I have observed while answering readers queries. The code in the above post and the other one in one of my comment above is working almost on any blog having the default .blogspot domain or a custom one like .net , .com but not free domain like .co.cc

    Their can be a possibility that I am wrong but this is just what I can say so far.

    ReplyDelete
  31. thanks very much, your codes is works. great job.
    love it:)

    ReplyDelete
  32. Hi. You have a wonderful site & I need to begin clearing the clutter on my blog. I hv added too many social bookmarking buttons to my HTML, and know not how to remove them carefully. Also would like to add a single row twitter/email/rss icon to my sidebar.
    Can you help.
    Thank you kindly!

    ReplyDelete
  33. @Deeba

    I visited your blog. To delete those Social bookmarking icons from your blog, follow the steps below,

    1. Go to layout > Edit HTML
    2. Back Up your template, by clicking the download link at the top
    3. Now Check the box at top-right-corner to expand widgets
    4. Search for <p class='post-footer-line post-footer-line-3'>
    or if it isn't there then find this code. Click the link to open the code in a new window
    Click the link to get the code

    YOu will find a similar code in your template, find it and delete them all. Than save your template and you are done!

    A few Advises

    Your blog is taking a lot of time while loading due to the following reasons,

    1) YOur header image is pretty big in size and dimension. Kindly reduce its size and save it in gif format.

    2) YOu are not using the Read More Link to show only post summaries. Read this post to know how to add it

    3) YOu have added too many stuff to your sidebar. Kindly reduce them

    Do these three things and you will see a tremendous boost in your load time

    I will also advise that you remove the blogger navigation bar at the top. Read this post to remove it

    ReplyDelete
  34. @deeba

    Deeba for your template you should rather search for this code <div class='post-footer-line post-footer-line-3'>

    sorry for the inconvenience

    ReplyDelete
  35. Hi, Thanks for the tutorial. But I want to put a tab section in my blog post, I placed the above code as you said but the tabs are not showing in my blog post. what should I do?

    ReplyDelete
  36. @Maxkrish

    If you want to add this widget to your blog post then you will have too add the java script and css part inside you template and the html code inside your posts.

    But I have a question, why would someone add a tabber widget inside a post?

    ReplyDelete
  37. how to add links in tab,like 1 tab for recent post,2nd for comments.just like ur tab.

    ReplyDelete
  38. @Amit

    The content that you see inside those tabs in my blog are basically widgets like Recent Comment Widget ,Recent Posts Widget and a message to readers with simple text.

    You must get separate codes for your widgets and then add them instead of Tab 1,2,3 Content Goes Here

    To Add recent posts widget read my post on Feedburner Rcenet Posts Widget

    To add Recent comments Widget you may need to burn your comments at feedburner. If you think that is time consuming then Simply paste that code below in Tab1 content area.

    <ul><script style="text/javascript">
    function showrecentcommentsundefinedjson) {
    for undefinedvar i = 0; i < 7; i++) {
    var entry = json.feed.entry[i];
    var ctlink;

    if undefinedi == json.feed.entry.length) break;
    for undefinedvar k = 0; k < entry.link.length; k++) {
    if undefinedentry.link[k].rel == 'alternate') {
    ctlink = entry.link[k].href;
    break;
    }
    }
    ctlink = ctlink.replaceundefined"#", "#comment-");
    var ptlink = ctlink.splitundefined"#");
    ptlink = ptlink[0];
    var txtlink = ptlink.splitundefined"/");
    txtlink = txtlink[5];
    txtlink = txtlink.splitundefined".html");
    txtlink = txtlink[0];
    var pttitle = txtlink.replaceundefined/-/g," ");
    pttitle = pttitle.linkundefinedptlink);
    if undefined"content" in entry) {
    var comment = entry.content.$t;}
    else
    if undefined"summary" in entry) {
    var comment = entry.summary.$t;}
    else var comment = "";
    var re = /<\S[^>]*>/g;
    comment = comment.replaceundefinedre, "");

    document.writeundefined'<li>');
    document.writeundefined'<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
    document.writeundefined' on ' + pttitle);
    document.writeundefined'<br/>');
    if undefinedcomment.length < 100) {
    document.writeundefinedcomment);
    }
    else
    {
    comment = comment.substringundefined0, 100);
    var quoteEnd = comment.lastIndexOfundefined" ");
    comment = comment.substringundefined0, quoteEnd);
    document.writeundefinedcomment + '...<a href="' + ctlink + '">undefinedmore)</a>');
    }
    }
    document.writeundefined'</li>');
    document.writeundefined'<div style="font-size:75%;text-align:center"></div>');
    }
    </script>
    <script src="Add Blog URL Here/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
    </script></ul>

    Replace Add Blog URL here with your blog link like http://xyz.blogspot.com


    Hope that would help :)

    ReplyDelete
  39. thanks for ur reply,but after add this code its not work also.

    ReplyDelete
  40. Hello,

    Thanks for answering my questions.

    What if i need to add archives or label widget to this tabber?

    ReplyDelete
  41. @Hetal

    May be this link will help you Archive Widget by Yahoo pipes

    I really don't know another way out

    ReplyDelete
  42. can you give me best blogger template

    ReplyDelete
  43. I'm in trouble. By blog is not loading in internet explorer http://tunestore.blogspot.com/

    Please help...

    ReplyDelete
  44. issue was with the colour link javascript.
    I posted it inside template instead of linking and the issue is resolved.

    ReplyDelete
  45. Thank you so much, it work fine for me.

    ReplyDelete
  46. Hello,

    I'm having trouble deleting / hiding the vacant/empty space below a horizontal menu bar I've created. In an August 24th comment post you mentioned some code to fix this.

    Would you also be able to pass this code onto me?

    Please help....I'm lost in HTML code-land.

    ReplyDelete
  47. Hello,

    Can we add two multi tab widgets in blog? I have add a second widget and i found that my first widget is not working. Please help me out.

    ReplyDelete
  48. @Ms Hetal Patil

    You can add only one widget. Though you can increase the number of tabs. Ms hatel I will publish a more advance version in few days. You might have seen my new multi tab widget. It is more efficient and is fully widgetized. I hope it will be of interest to most of you. Make sure you check back

    ReplyDelete
  49. hey mohammad can you tell me how to add blogarchive and label in the tab

    ReplyDelete
  50. How do you change the color of the tabs when you are selecting and scrolling over the tabs vs. when the tabs are static and unselected?

    ReplyDelete
  51. This is the best input of "Multi Tab view" I have found till now. Thanks Dude :-)

    ReplyDelete
  52. syukron jazaakumullahu khrn for share

    ReplyDelete
  53. nice widget...
    i already applied this tricks and 100% working... thankns admin

    ReplyDelete
  54. i found it! thanks see my blog http://nagpur-university-results.blogspot.com

    ReplyDelete
  55. Sweet widget man. Thanks!

    ReplyDelete
  56. I haven't applied your widget yet, but reading how you went about learning all these tricks, i have to say that you have a very curious, resolute, and driven personality. That is fantastic. If you apply that personality anywhere, you will be a genius in anything you do whether it is tech-related or not. Refreshing to come across an individual such as yourself.

    ReplyDelete
  57. It worked like a charm that works Mohammad:) The time I posted the comment above and the time this comment was made is the time it took - thanks to your clear instructions, and your straightforward way of implementing this feature. Thanks a lot bro! :)

    ReplyDelete
  58. Love this widget. Btw, after looking at it for a while, i thought that it would be good if the inactive tabs are a different colour to the active one. For instance, the active tab could be white and the background white, and the inactive tabs could be gray. Something like the BBC 'shared', 'read' widget. http://www.bbc.co.uk/news/

    Is there any way to do that. Right now, i can change the background of the active tab, but can't see the option to change the background of the inactive tab when it is inactive. Thanks bro.

    ReplyDelete
    Replies
    1. div.TabTampil div.TTs
      {height: 24px; overflow: hidden; }


      change to
      div.TabTampil div.TTs
      {height: 24px; overflow: hidden; background-color: #c1c1c1;}

      thats for inactive tabs

      regards,
      singachu

      Delete
  59. Hello Mohammad,

    Nice share,
    I already try to add the script in the widget, but then I confused how to replace the content of the tab with the other widget.
    Let say I want to move "Blog Archieve", "Recent Comment" and "Labels" to these three tabs.
    How can I do that ?

    Thanks in advance and regards,
    singachu

    ReplyDelete
  60. I trully support you if you wanna write this down for WP, please :)

    ReplyDelete
  61. Where do i insert the url to get the information in the tabs working?

    ReplyDelete
  62. Update
    ----------

    Humble apologies for a late reply. Was busy with exams. Friends you can now find a more imporved and better Mult Tabbed widget right here ->Advanced Multi Tabbed Widget

    All your problems will be solved using this. Enjoy :)

    ReplyDelete
  63. Hi! I would like to ask if it is possible to add two sets of multitab widget in a sidebar? If so, how?

    ReplyDelete
  64. The above comment (67) is a Spam or trying to promote his/her site.

    ReplyDelete
  65. can't a get tabbed widget in which only we have to put on mouse on other tab and open without clicking it

    ReplyDelete
  66. Brother is have just applied these codes on my blog but it is not showing tabs showing just text linked with my contents. how i can get tabs.
    Plz ans me

    ReplyDelete
  67. @Rajindra @Hasni


    Oh please don't use this I have published more advanced versions. Please try these,

    1) Wordpress style Tab Widget

    2) Multi Tabbed Widget Fully Widgetized

    3) Menu Tabbed Widget

    ReplyDelete
  68. Iam very happy for this Widget! but it is not working In Mozilla firefox Browser Please check and update it Please

    My Blog (I am implemented Here):http://a2zjntuspecial.blogspot.com/

    ReplyDelete
  69. Hi , i 'm new at this blogger thing ... i was just adding in my tabs before i add the content , then i noticed that it couldn't fit i tried using the code u provided and I think i did something wrong :(

    http://rishag-mummydiaries.blogspot.com help please ... i was gonna just delete the widget but i wanted u to see what happened

    ReplyDelete
  70. Hi all,,How do you change the color of the tabs when you are selecting and scrolling over the tabs.

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

    ReplyDelete
  72. @ ADMIN bro...don't work...in my site : www.bdraphiphop.blogspot.com i want some different tabe...i need TAGS,ARCHIVE,POPULAR POST....so admin can u give those codes...please kindly....

    ReplyDelete
  73. Hi can I use this instead of put it on side bar. Ill put it on my blogpost? I want to use tabber on everyserver of my video? can you teach me how its work?

    ReplyDelete
  74. greate its working in a post? now my question it? how to have more tabs? pls help me .thanks

    ReplyDelete
  75. Thanks for this informative post but it is bit complex for me.

    Regards,
    Admin of SEO Service Provider

    ReplyDelete
  76. Most of you complained that the tabs are not working/clickable. I was amazed too because this widget was working perfectly alright in all my test blogs. Then how come its not working in your blogs? Well the answer was simple than I could imagine.

    This widget uses a JavaScript which is responsible for making the tabs clickable. I saved this widget in Google sites and link it to this widget. This was the mistake that I commit. Google sites offers limited bandwidth and is far slow to respond than you can imagine. Hence when you guys would add this widget to your blog, the JavaScript would not load, as a result leading to static tabs.

    Fortunately I have updated this post with all necessary steps to take. You will have to add the JavaScript directly to your blogger templates. Doing this will improve the widget performance and will also reduce your page load time. This update will solve all your problems!

    ------
    THIS IS NOT WORKING WHEN THERE IS TWO SETS OR MULTI TAB WIDGET, MAYBE THEY USED IT MORE THAN 1 SET ON THE SAME WEBPAGE

    ReplyDelete
  77. @ Author
    Bro i don't understand your line "your content goes here" what we have to put there.

    ReplyDelete
  78. hi but how to get Recent comment, Recent post's html code i d't know pls help me...

    ReplyDelete
  79. Great!!Nice post. Thanks for the information,Later on i check this post again.

    ReplyDelete
  80. wait, halamaan ? alas ? Indonesian ?

    ReplyDelete
  81. The handbag, such as Hermes Birkin, Kelly Bags, Prada Handbags and Louis Vuitton Handbags, is spacious for necessities. Many brands like Gucci and, after a period of brand ebb period, before gradually returning to the international mainstream. In fact, the historical development of early Gucci, founder of Guccio Gucci back in 1898 in London was exposed to rich, celebrities, and their noble taste deeply fascinated. Each Cheap Gucci Bags come with serial number, Gucci dust cover, Gucci certificate card & care booklet. If you go with a Gucci Bag, focus of the pass by will be on you. It is a classic example of practical. Our outlet online store offer you everything you are looking for.
    Tags: Hermes Birkin, Kelly Bags, Louis Vuitton Handbags, Louis Vuitton Travel Bags, birkin bag

    ReplyDelete
  82. How i can integrate in my blog because conflict in wagon r semarang and differnt page to long load kredit apv semarang. But i think can be useful in my site apv blind van semarang

    ReplyDelete
  83. HI, I want to add blogger label widget in the tab widge. But there is no HTML for that as its a native widget. Can u help? (dnbpediatricdotcom)

    ReplyDelete