The easiest tabbed content widget for Blogger

Tabbed content box or tab view is a great way to maximize the usage of precious screen real estate on your blog.

There are quite a few tutorials out there that show how to create tabs with CSS and jQuery. However, most of them require you to modify your blog template codes. On top of that you also have to manually add the content of each tab. 

Fortunately, with this tutorial you don’t have to go to all that troubles. All you have to do is add our tabber code into a HTML/Javascript widget. Once added, it will transform your Blogger blog’s existing widgets into tabs, automatically!

blogger tabber tabbed view contents

See the demo here.

Below are some of the features of the tab content box:

  1. Accommodates unlimited number of widgets.
  2. Keeps the tabbed widgets’ original appearance.
  3. Fully widgetized for ease of installation and removal. If you don’t like what it does, simply remove the HTML/Javascript gadget.  

 

Installation

  1. Go to Layout and click an Add A Gadget.
  2. Select HTML/Javascript widget.
  3. Leave the title box blank.
  4. Copy the code below and paste it inside the content box.
    <style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb !important;
    }
    .tabber h2 {
     float: left;
     margin: 0 1px 0 0;
     font-size: 12px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px; /*--Pull tab down 1px--*/
     overflow: hidden;
     position: relative;
     background: #e0e0e0;
     cursor:pointer;
    }
    html .tabber h2.active {
     background: #fff;
     border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     padding: 10px;
     background: #fff;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     display:none;
    }
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $('#codeholder').bloggerTabber ({
      tabCount : 3
     });
    });
    </script>
    
    <!-- to make sure the widget works, do not alter the code below -->
    <div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>
    • Code line 34 is for loading jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. Hint: If your blog has a slider, cycler or something with fading effect running, chances are it is powered by jQuery.
    • Specify the value of  tabCount in line 39. This value equals the number of widgets (underneath the tabber widget) that you want to turn into tabs.
    • The default box background color is white (#fff). You can change it in code line 25. Apply the same color for the active tab’s background and bottom border (in line 19 and 20).
  5. Position the HTML/Javascript gadget above the gadgets that you want to tabify.
     tabbed contents view elements
  6. Click Save and view your blog.

 

Post-installation

  • Make sure you title each widget that you want to tabify. Tabber won’t work properly without widget titles.
  • Reduce tab widths so that all tabs fit into a single row. This can be achieved by using short widget titles.
  • You may need to reduce the widths of the tabified widgets to fit them into the box.
  • Don’t forget to test in Internet Explorer. This widget may cause “Operation aborted” error in IE for some non-designer templates. If that’s the case, this widget is not for you :(

Enjoy!

160 comments to "The easiest tabbed content widget for Blogger"

Anonymous,  May 28, 2011 at 5:19 PM    

Do you have a demo of this?

gamerap May 28, 2011 at 7:26 PM    

Thx for info :)

Download-mobile-apps May 28, 2011 at 11:50 PM    

Nice This post i place in my blog later,

Mary May 29, 2011 at 6:26 AM    

Cute ;-)

Cool tip though. Definitely one I might use in the future.

Greenlava May 30, 2011 at 9:58 AM    

@Anonymous
I've added the demo link.

Roberta @ Silverwalk May 31, 2011 at 5:25 AM    

I didn't get how to add the name of the gadgets to the tabber - I lined them up, the tabs showed up, they worked but it was all was whited out. Love the idea as I get tired of scrolling; my next step would be to put in "back to the top" code - somehow. Thanks.

Greenlava May 31, 2011 at 11:35 AM    

@Roberta @ Silverwalk
The tabber copies the titles of the gadgets. That's why you have to title each widget.

Roberta @ Silverwalk May 31, 2011 at 1:28 PM    

As I came back to check for an answer, I looked more carefully at the tabs and realized just what you told me; I then changed the colors from #fff to ones that better fit the current colors of my blog. THANK YOU. This is SO cool :).

Greenlava June 1, 2011 at 1:48 AM    

@Roberta @ Silverwalk
You're welcome :)

G June 1, 2011 at 4:29 AM    

Thanks for this. I like it.

Naser @ Best Tips For Blogging June 1, 2011 at 5:21 PM    

Thanks for the tutorial Green Lava, is there a WordPress plugin available for this.

Amy Sue's Place June 2, 2011 at 2:14 AM    

I am new to blogging and for the life of me could NOT get this to work! The "tabs" did not show up as tabs, but rather stacked blocks. What am I doing wrong??

Greenlava June 2, 2011 at 11:02 PM    

@Amy Sue's Place
I'm guessing the tabs are too wide?

Greenlava June 2, 2011 at 11:15 PM    

@Naser
If I'm not mistaken there is a plugin called wooTabs. But it comes with premium wooThemes.

kochou June 3, 2011 at 3:30 PM    

Hi,

That is THE widget I was looking for !! The best, easiest ! Thank U so much

Arcmond June 4, 2011 at 3:53 AM    

You have a great tutorial, this is what i waiting for :D
I have a question
There is any way to put the tabs verticaly not orizontaly (verticaly to left)?

oliver June 7, 2011 at 11:07 PM    

Hello Greenlava,

great Job, thank you! But unfortunately, the widget has a bug. When you link to a single post or you want to write a comment, the widget chrashes the layout or the comment function. Take a look at here: http://goo.gl/XWRqw and this is the Blog: http://goo.gl/anMJl

Could you fix it? Thank you!

Greenlava June 8, 2011 at 12:11 AM    

@oliver
Are you sure it's caused by the tabber?
Try removing the tabber widget and see if the layout returns to normal.

oliver June 8, 2011 at 1:46 AM    

@ greenlava

You're right, the tabber worked well, it was a problem of my own code. I fixed it. Thanks for feedback.

श्रेया June 8, 2011 at 4:22 PM    

can this be added to post ? i.e. i have posts which r very long...will this tabber accomodate in a post ? I will be able to post then as one whole post with tabs as parts of the post ?

Greenlava June 8, 2011 at 5:06 PM    

@श्रेया
I'm afraid you can't. It's specifically designed to transform widgets into tabs.

TBB June 13, 2011 at 9:59 PM    

Hi
I have a question:
Is it possible to use more than one tabber per page?

For example, like in two different sections on my right sidebar...

If this is possible, do I just copy and paste the code twice in two different locations?

Thanks

Greenlava June 14, 2011 at 10:57 AM    

@TBB
No, that's not possible.

Anonymous,  June 17, 2011 at 4:08 PM    

Thank you Thank you Thank you so much. The code worked perfectly. And best of all it was so EASY !

TruyenJava June 20, 2011 at 11:24 AM    

I like this post & will to use for my blog

Adrian June 23, 2011 at 10:30 AM    

Useful tips! LOVE :)

Hemendra Kumar Saini June 27, 2011 at 3:47 PM    

This is really helpful, makes your blogger blog wordprss like look.
In return, i advice you to get logo for your blogger blog. check out favicon in blogger blog

Kristin Youngblood July 3, 2011 at 12:02 AM    

Is there anyway you can put images in the place where the title of each tab are? Thanks!

Nimila Zamz Hiran July 3, 2011 at 4:31 PM    

Awesome, but can we change its color theme in to dark??

Greenlava July 4, 2011 at 12:08 AM    

@Kristin Youngblood
Sorry there's no option for that at the moment.

@Nimila Zamz Hiran
Yes you can change the colors, but you have to do it manually.

Rosalie July 8, 2011 at 12:13 AM    

Hi - I love this it worked fine and this morning it won't work anymore in my blog.. DO you know why??
http://purplerosy.blogspot.com

Greenlava July 8, 2011 at 8:59 PM    

@Rosalie
This is a portion the tabber code from your blog:
[script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"]
[script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"][/script]

Something is missing in the code. Can you spot it?
.
.
The first script tag is not closed. The correct code should be like this:
[script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"][/script]
[script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"][/script]

Rosalie July 9, 2011 at 12:11 AM    

Thanks - I don't know how that got changed but I fixed it. I love your site by the way. I have learned a lot from you.
Have a great day :-)

Ifinder July 9, 2011 at 2:16 PM    

Sir. Me new. Learning a lot here. Query: Any easiest way to change the number of sidebars from 1 to 2 ? With high regards.

Greenlava July 10, 2011 at 11:39 PM    

@Ifinder
You can do it easily enough in Design > Template Designer > Layout.

Kincardine July 13, 2011 at 7:50 PM    

I just wanted to say that I really enjoyed this post. You make some very informative points . Keep up the great work!

otobong July 16, 2011 at 7:34 PM    

Hi, this I can't see the demo.

Greenlava July 17, 2011 at 8:09 AM    

@otobong
Here's the demo link again.

Templatesall August 28, 2011 at 11:57 PM    

Thank you Thank you Thank you so much. The code worked perfectly. And best of all it was so EASY !

geminideal September 5, 2011 at 2:53 PM    

I like the post, I'm learning it now, helpful,thank you

Roshan Jaswal September 10, 2011 at 5:19 PM    

आभार इस सुविधा के लिए

Abhishek September 13, 2011 at 3:57 PM    

i have added this one on my blog. Earlier it was working but once i wrote in title " Category" after that its now working:-
I removed it fom there totally and again installed but now its not working . what i do?
Please tell me

my blog is
http://abhicareer.blogspot.com

Greenlava September 15, 2011 at 12:35 AM    

@Abhishek
Each widget that you want tabbed must have a title, otherwise the tabber won't work (properly).

Eu Brasil, Ele Egito September 20, 2011 at 9:47 PM    

HI dude,
thanks for this post... i burned my head many times trying to find it and many of the codes i found it was so complicated... but this works nice.

thanks

guest istiqlal September 24, 2011 at 8:30 PM    

yess , like it

Fahmi Mahat October 11, 2011 at 6:24 PM    

greenlava, ive tried renaming the tab content, and updated the total tab, but i still couldnt do it.

any ideas?

the link is fahmimahat.blogspot.com

tq in advance ya =)

Greenlava October 12, 2011 at 4:45 PM    

@Fahmi Mahat
You have double jquery library calls -one in this widget and the other one is for LazyLoad. I believe that's causing the problem.
I suggest you delete the one attached to the LazyLoad script, i.e. this line:
[script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'][/script]

chirif October 17, 2011 at 7:56 AM    

thanks brother for this very useful blog

famimahat November 2, 2011 at 10:41 AM    

tq greenlava~ :)

Glebber and Symphony November 11, 2011 at 2:03 AM    

My tabs are overlapping! Any tips? :(

Greenlava November 11, 2011 at 9:36 PM    

@Glebber and Symphony
It looks fine from here.

Glebber and Symphony November 11, 2011 at 9:41 PM    

Oh I fixed it... thanks! :)

Andry P.L November 19, 2011 at 12:01 AM    

thx u

Bloggerizqy November 20, 2011 at 11:19 AM    

can i build 4 tab..?

Greenlava November 20, 2011 at 1:31 PM    

@Bloggerizqy
Yes you can. Just set tabCount (in line 41) to 4.

WhenUC December 15, 2011 at 12:38 PM    

thanks for article, i like this widget...

Info 4 Canada December 15, 2011 at 1:51 PM    

Great tips!Looking forward to using them!

Rizqi Arifuddin December 15, 2011 at 6:05 PM    

my tabs are overlapping :( i tried to shorten the widget title but still it won't work here is the link http: rizqiarifuddin.blogspot.com

Greenlava December 16, 2011 at 9:43 PM    

@Rizqi Arifuddin
Replace the CSS portion (the one inside [style] tag) of your code with this:

.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0 !important;
font-size: 12px;
padding: 2px 3px !important;
border: 1px solid #bbb;
margin-bottom: -1px !important; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
border: 1px solid #bbb !important;
padding: 10px !important;
background: #fff;
clear:both;
margin:0 !important;
}
.codewidget, #codeholder {
display:none;
}

Rizqi Arifuddin December 19, 2011 at 10:33 AM    

Zillion thanks :) now it works cool

Best Free Blogger Templates 2012 December 28, 2011 at 5:28 PM    

Thanks for sharing the code.

WhenUC December 29, 2011 at 5:32 PM    

nice articel, and nice for my blog, ty.

Aimee - ItsOverflowing.com January 4, 2012 at 9:55 PM    

I added the code to a widget in my layout design, but totally can't figure out how and where to label the tabs. Could you help a computer challenged a bit more pretty please!!!

Greenlava January 6, 2012 at 12:18 AM    

@Aimee - ItsOverflowing.com
The labels are copied from the widget titles, so make sure you put the title on each widget.

Prendas na Net January 15, 2012 at 10:50 PM    

Hello!
This feature is working fine on firefox and chrome but doesn't work on internet explorer.
Could you please help me to solve this question?
Thanks,
Ana

Kate January 16, 2012 at 6:39 AM    

This is perfect! I had no issues adding it to my blog, however when I try to add it a second time in another location on the page, it does not work - is there a tweak I need to make to the codes to have it multiple times or do you have any suggestions?

Ozkab News January 16, 2012 at 1:41 PM    

Like this, and Like it..

tutorial komputer January 17, 2012 at 12:17 AM    

finally, i find it. without makes change html code.thanks for the code. thanks very much

Greenlava January 17, 2012 at 1:07 AM    

@Kate
At this moment the code is good for one unit only.

Andreansyah January 18, 2012 at 4:09 PM    

love this... ^__^
thanks,, easy to use, and suitable with my blog template..
may I copy this trick to my blog?

Greenlava January 18, 2012 at 5:04 PM    

@Andreansyah
Yes you may as long as you link back to this post.

campor bawor January 19, 2012 at 1:03 AM    

That is THE widget I was looking for !! The best,
easiest ..Thank

levree January 23, 2012 at 4:02 PM    

thank you!

Victor Cojocaru February 2, 2012 at 8:26 PM    

beautiful....worked like a baby!:) thank's a lot!
http://www.noutatimedicale.com

narwesh February 19, 2012 at 5:22 PM    

thank u.......

Honeybee February 22, 2012 at 1:40 PM    

love love love this! keep up the good job!

Sine February 25, 2012 at 10:58 PM    

Awesome as always but I have a question regarding what you put in those tabs. In your demo, you have "tips", I want to do something similar where I use all the posts that have "tips" as a label and put the link to those posts in there. I only know how to put the entire post in there, but not just the URL - any tips?

Cait February 28, 2012 at 2:59 PM    

Thanks for the tutorial! I'm new to blogging and this was a big help!
mscandmisse.blogspot.com

Ф дфѕдғфдғ Ф February 29, 2012 at 7:49 PM    

mantap juga nih tai di aku mah ngga pake yang ginian karena ngga ada sidebarnya :P

LZ Schneider March 6, 2012 at 2:44 PM    

Hmmmm, I will definitely use this in the future. Great widget!

Anonymous,  March 8, 2012 at 1:24 AM    

hey will you tell me after adding this what i do to make it tabular just putting other javascript box below this or any thing else please mail me dklove84@gmail.com

landofkusikusi.in April 4, 2012 at 3:33 AM    

Is there a way to put 'recent post,popular post and recently commented post'widgets in this tab widgets?

btw,nice tutorial!!

Sandy April 4, 2012 at 5:10 AM    

This was very easy to use thank-you :)

way2wallpapers April 17, 2012 at 10:51 AM    

Thank you Very Much..... thanks for publishing

Natalie April 27, 2012 at 10:59 AM    

Is there a way to center this in my sidebar?

Tech-Beever April 30, 2012 at 1:43 AM    

Hi, I already have JQuery on my blog, so deleted line 36, but it doesn't seem to work at all, any ideas?

Scarlett Rains May 2, 2012 at 11:27 PM    

Hi. I was so thrilled with your FB Like coding (worked great!) that I tried this one and the Post Titles widgets. Neither of these work for me. When I paste the code into a widget HTML/text box just the code is displayed. Thanks for your help on this.

Greenlava May 3, 2012 at 7:49 PM    

@Natalie
Try this:
1. Insert this property after line 4:
text-align:center;

2. In line 7,replace:
float: left;
with
display: inline-block;

Greenlava May 3, 2012 at 7:51 PM    

@Scarlett Rains
I don't see the widget in your source code.

Gul Chaudhry May 11, 2012 at 12:03 AM    

This is a very good widget and can save a lot of space on your blog. It is more useful where you want more and more widgets in less space.
Thanks for sharing the code for this widget. I will try it soon and let you inform the results.

Ben Jamir May 14, 2012 at 10:02 PM    

Great man, I cant find any words to express. I have been going through the comment sections, I'm really impressed by your prompt reply. Very good blog.your widget was a wonderful thing, i have already applied that.but could not figure out how to put all the 4 tabs in one row.

Greenlava May 16, 2012 at 9:09 PM    

@Ben Jamir
You just have to squeeze them in, by choosing a narrower font, smaller font size or reducing the padding.
Try this, replace code line 9 with:
font: 12px "arial narrow";

Stacey @flickerwhips June 12, 2012 at 11:10 AM    

So far so good this is working beautifully on my blog!!

Suhu PTC June 21, 2012 at 9:13 PM    

I like it and i placed in my blog. Thanks for the tutorial

Mohinee June 27, 2012 at 8:11 PM    

Thank you so much. It helped me once and when I made some changes, it didn't not appear. Please guide me what to do further.

Sarah Ugly Duckling House August 26, 2012 at 3:50 AM    

Thank you, this is great!

Gabriella Yu August 31, 2012 at 1:05 PM    

¡Espectacular! Saludos desde Argentina ^_^

Amanda September 6, 2012 at 12:21 PM    

how do you change the color? I know it needs to be done manually, but for example if I wanted purple what do i put in place of the fff? My About Me tab shows my profile picture, but nothing else can you help me with that? http://lefthandedides.com

Tony Iyke September 16, 2012 at 10:01 PM    

Hi Greenlava; i had previously set css properties in blogger template designer. I notice it doesnt allow the css in (the style section of) your tutorial to work.
I have tried all my best but it just isnt working. Pls what do i do? My blog is linked thru my name above i.e Tony Iyke. Thanks

Tony Iyke September 16, 2012 at 10:15 PM    

Hi Greenlava; i had previously set css properties in blogger template designer. I notice it doesnt allow the css in (the style section of) your tutorial to work.
The issue is the tabs are constantly highlighted; whether they are active or not. How do i give the active tab a different color from the inactive tabs?
I have tried all i know; including editing the css i added in template designer and also editing your own that i added into HTML/JAVASCRIPT gadget but none is works without affecting other gadgets on my site. So am at my wits end.
Pls what do i do? My blog is linked thru my name above i.e Tony Iyke. Thanks in advance

Iuliana September 19, 2012 at 4:35 AM    

I have tried so many different codes out there and it never worked. I am thinking maybe because none of the tutorial mentioned that the widgets need to have a title. Your tutorial worked like a charm. My only question is about the 'Get this tabber widget' at the bottom and why it is written twice. I have no problem giving credit where it is due, but having that phrase written twice It looks goofy a little goofy.

Chances are I did something wrong. Here's the link to my blog, if you wanted to take a look and see what I am talking about:
http://hip2thrift.blogspot.com/

Thank you for such a good tutorial. Sticking around to see what other cool things you have around!

Greenlava September 20, 2012 at 11:21 PM    

@Iuliana
I see two sets of tabber widget codes in your template. You need to remove the one at the bottom of the sidebar.

Bung Dwijaya September 25, 2012 at 9:07 PM    

Looks like this is great idea to implant such widget in blog.

Pint Sized Baker October 24, 2012 at 12:04 PM    

I have followed all instructions but don't know why my tabs are grey and without text. I have added Titles to my three widgets, but still no go. I've tried to change the #fff to match the green on my blog and it's still greyed out... any help would be great. A designer went in and played with the CSS when she designed the blog, so I don't know if there is something in the Template that is messing with your code. http://pintsizedbaker.blogspot.com/ Thanks

Robin October 24, 2012 at 11:46 PM    

Thank you so much for such a great widget. I am in the process of setting up my blog and this is a great addition to it. However I do have a question. I went through all of the comments hoping that I could find the answer but I didn't have any luck. The question is: how do I change the font-type? Currently it is in all caps and I wanted a font with a little more style. You can checkout what I mean @ http://flusterbuster.blogspot.com/.

Thank you again

Greenlava October 30, 2012 at 4:42 PM    

@Pint Sized Baker
The color of the titles is set to "transparent" that's why you can see them.You set the h2 text color to transparent.
To fix it just insert a color property for .tabber h2 selector ie. insert the following line anywhere between line 6 and 17.
color: #8db24e;
(replace the color code with your color of choice)

@Robin
Your changes involves .tabber h2 selector also.
To lose the caps, insert this line:
text-transform: none;

and to change the font, add this:
font-family: Verdana, Arial, sans-serif;
(replace the font names with your preferred fonts, beginning with your first choice, followed by your second choice and ...)

Amy November 6, 2012 at 6:40 AM    

Hi! this widget is great, but how do I add other widgets underneath it without them being added to the tabs? Thanks!

Greenlava November 7, 2012 at 4:59 PM    

@Amy
The tabber only transforms fixed number of widgets as specified by tabCount (in line 39). Anymore widgets added below the last widget will not turn into tabs.

Kimberly November 9, 2012 at 8:00 AM    

Help. I love this idea, but don't know how to match the tabs to the code. I am not technically. Obviously. Can you tell where I've messed up??????????? I placed the widget at the top of my sidebar. Thank you for any help!
http://kimberlys-cup.blogspot.com/

#ciksuzlin November 10, 2012 at 7:24 AM    

It doesn't work for me (+______+)

Greenlava November 13, 2012 at 11:54 AM    

@Kimberly
It looks like you forgot to put the title on your Pinterest Follow button widget.

Kimberly November 13, 2012 at 11:40 PM    

Woohoo! Thanks for your help! Works great!!!!!

Krystal Lynn November 14, 2012 at 9:51 PM    

Hello there! I tried to add this to my page, & it doesn't show up at all. Is this compatible with Dynamic View pages on Blogger?

Krys @ Keeping PLUS in a MINUS World

Iuliana@Hip2Thrift November 22, 2012 at 7:45 AM    

So, I have commented before how this had worked well for me. Well, after making a few changes to the blog and then getting tired of the mess I made, I uploaded a template I have used before I had installed this widget. Anyway, now when I try to do it, it just won't work for me at all. Any ideas? (i did name all the tabs, I made sure I have jquery library)

Greenlava November 22, 2012 at 11:21 PM    

@Iuliana@Hip2Thrift
I only see code line 44 and 45 in your template. Where are the rest?

Greenlava November 22, 2012 at 11:35 PM    

@Krystal Lynn
No, this widget does not work on Dynamic View templates.

Techonicals November 26, 2012 at 2:21 PM    

how can i add a other widget below this tabbed widget. I mean i dont want all widgets in sidebar to be tabbed some of the widgets should be seprately displayed . is this possible?

Greenlava November 26, 2012 at 4:26 PM    

@Techonicals
Yes that's possible. This widget only converts x number of widgets as specified by tabCount. The rest of the widgets are left untouched.

Cindy November 29, 2012 at 9:13 PM    

Hello, I love your blog, but more so, found this widget on another person's blog. I have no freakin' clue what I'm doing wrong. I have installed and reinstalled several times. I removed the line 34 then added it back in and it doesn't make much difference. My code is located on lower right sidebar of my blog which is attached to my name here. Help!

Greenlava November 30, 2012 at 4:23 PM    

@Cindy
I don't see code line 45 in there. You need to include that line for the widget to work.

ohcikgu December 8, 2012 at 1:40 AM    

ok. i love to try this tabbed.

Limit Post December 9, 2012 at 9:18 AM    

thanks :D

Srinath Weerasinghe December 17, 2012 at 9:48 PM    

thank you very much

Hosting Murah December 24, 2012 at 1:01 PM    

thank you very much, It's very simple and beauty..

thediynurse December 26, 2012 at 4:50 AM    

Hi... I have tried to add this element and for some reason it doesn't show up at all. I added the code, and also removed the piece for jQuery. I've done it with and without that piece of code. Am I missing something else? I see nothing.

Greenlava December 28, 2012 at 7:28 PM    

@thediynurse
Yes you're missing the original link to this tutorial in line 45. Just replace the link to the copy-paste tutorial with the original one.

itu Akhil December 29, 2012 at 3:47 AM    

hi..Nice widget!
i've tried so many time to add this widget to my blog. Follow each step you told. But it still doesn't work..
i've spent more than 2 hours just to make it work but still fail..ohh plez tell me how to fix it??

Greenlava December 29, 2012 at 9:04 PM    

@itu Akhil
I notice you put different values for script's type attribute.
You need to change them back to the correct value, which is "text/javascript".

Emily January 1, 2013 at 4:27 AM    

Would this coding work on Wordpress? or do you have a specific WP version?

Greenlava January 2, 2013 at 1:16 AM    

@Emily
This only works on Blogger. Sorry, there is no WordPress version at the moment.

Durai sankar January 25, 2013 at 2:30 PM    

It works for me:)

Durai sankar January 25, 2013 at 2:47 PM    

your blog looks simple but really rocks.I becamed a biggest fan of your blog:)

Syaifuddin Alias January 28, 2013 at 4:51 PM    

it works .. yeah thanks a lot

singa chu January 31, 2013 at 9:39 AM    

Great, it's work like a charm in

regards,
singachu

Shaina A. February 2, 2013 at 1:39 AM    

This was working well for me and then suddenly doesnt work anymore. I didn't mess with the code. I dont understand what went wrong.

Greenlava February 2, 2013 at 2:07 AM    

@Shaina A.
I notice you have two jQuery calls in your source code.
You need to remove either one (hint: Scroll To Top button).

Shaina A. February 2, 2013 at 2:15 AM    

Thanks so much, that did the trick!

Colleen February 17, 2013 at 5:01 PM    

love it! two questions:
is it possible to round the top edges of the tabs?
is is possible to have the tabs be taller and narrower to accept longer titles with text wrapping?

Many thanks for this great tool!

lulu February 19, 2013 at 9:49 AM    

Thanks so much for this, it's awesome! :D

Michele {The Scrap Shoppe} February 22, 2013 at 4:00 AM    

My tabbed widget has also stopped working. As far as I can tell I only have 1 jquery call. Not sure what happened?

Greenlava February 24, 2013 at 1:51 AM    

@Michele {The Scrap Shoppe}
Move the jQuery call from your existing location (near /body tag) into the tabber widget.

Greenlava February 24, 2013 at 2:22 AM    

@Colleen
Add these declarations to .tabber h2 selector, by inserting this after line 16:
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
width: 60px;

itu Akhil March 7, 2013 at 10:47 PM    

finally it's work..
tq a lot for this awesome widget^_^

Ahmad Lukman Nulhakim March 9, 2013 at 12:37 PM    

Nice Info.. thanks..
Visit back

Bonny @ thedomesticatedprincess.com March 9, 2013 at 2:37 PM    

I love the idea of this widget, but I can't get it to work on my blog though I've tried several times. Please let me know what I've doing wrong.

Greenlava March 10, 2013 at 7:12 PM    

@Bonny @ thedomesticatedprincess.com
You have two jQuery library calls in your blog -one for tabber and another one for pin hover button. You need to remove one, perhaps the one that came with the hover button.

siti shahirah alimin March 19, 2013 at 7:56 PM    

hi, i use blogskin, can i do like that too ?

Greenlava March 20, 2013 at 12:43 AM    

@siti shahirah alimin
You can't if it uses Classic Template. This tabber is designed for Layout Templates.

Katie Clark April 4, 2013 at 11:42 AM    

I cannot get this to work on my blog (it is in the left sidebar.) Is something missing? I'm at a loss!

Ariel Nicho April 18, 2013 at 12:02 PM    

yeah..
this is the awesome information..

thank you for the information..

Boikot CinaDAP July 1, 2013 at 9:23 PM    

Hey Greenlava...i have installed the widget and it works great...thanks for the tutorial....however,i have an issue with the dates of my postings....next to where the widget is located....i have set 4tabs....as a result the first 4 postings are sharing the same frame with only one posting date....

Is there anyhow it can be fixed?...Thanx a million man...peace!

Greenlava July 5, 2013 at 10:46 PM    

@Boikot CinaDAP
It's not caused by the tabber widget.
Your latest 4 postings were posted on the same date (July 5th), that's why they share the same date frame. That's how the date header works. The same goes to the 4 older posts (July 3rd).
Only on the next older posts will you see different date frames (July 3rd and 2nd):
http://bbcdrasmi.blogspot.com/search?updated-max=2013-07-03T03:40:00%2B08:00&max-results=5&start=5&by-date=false#sthash.PsbU6f0E.dpbs

Irma Yante July 25, 2013 at 1:48 AM    

"Make sure you title each widget that you want to tabify. Tabber won’t work properly without widget titles." I dont understand about this. Can you explain or give some sample. I already try many time, but still not appear at my blog. http://nurshahmina.blogspot.com/

Greenlava July 27, 2013 at 12:26 AM    

@Irma Yante
It looks like all your widgets have a title, so that is not the cause of your problem.
The reason the tabs don't appear is this: You place the tabber widget (the HTML/Javascript widget that contains the code) underneath your widgets. What you should do is place it above the widgets you want to tabify. Read step 5 of the tutorial.

Blogger tutorials August 20, 2013 at 4:28 PM    

@Greenlava Thanks for this awesome widget. I am using it on my blog and it is doing well.

Jennifer {The Craft Patch} September 7, 2013 at 12:11 AM    

I have used stuff from your site before with success. THanks so much for all the awesome work you do!

However, I have tried over and over to get this to work without success. I made sure each widget had a title, changed the number of tabs to the correct amount, and tried it with and without the jquery part of the code. No success. What am I doing wrong?

http://thecraftpatch.blogspot.com/

Jennifer {The Craft Patch} September 7, 2013 at 4:33 AM    

Okay, you are going to think I am an idiot. I've got all my problems solved. Both the tabs and the pinterest hover buttons are working perfectly. THanks so much for your awesome website!

Financial Planner December 13, 2013 at 11:32 AM    

This is one cool tabbed view widget.

Jackie Weidelich January 5, 2014 at 10:31 AM    

After reading through all the comments above, I found the source of the troubles and all is well. This is exactly what I was looking for and it works beautifully! Thank-you!!

Click to go to top Click to comment