This tutorial will help you to add a multi-tabbed widget to your blog. You can use this widget to display more content in less space using the tabs.

Working Demo | [DEMO - Widget Part 2]
To add it to your blog, your task is as simple as copy and paste. At the same time the widget is highly customizable and you can easily change its appearance to match your blogs theme.
Instrucions to follow:
STEP #1:
Log in to Blogger and go to Layout -> Edit HTML and find this code in your blog:
</head>Immediately ABOVE/BEFORE it, paste this code:
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STARTS-->
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/ui.core.js"></script>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });
</script>
<style>
.ui-tabs-selected a {
background-color: #fff;
color: #000;
font-weight: bold;
padding: 2px 8px 1px;
border-bottom: 1px solid #fff;
border-left: 1px solid gray;
border-right: 1px solid gray;
margin-bottom: -1px;
overflow: visible;
}
#fragment-1 {</style>
background: #999900; //Background color of content area 1 (tab 1)
color:#FFFFFF; //Text color in content area 1 (tab 1)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-2 {
background: #CC9900; //Background color of content area 2 (tab 2)
color:#FFFFFF; //Text color in content area 2 (tab 2)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 {
background: #666666; //Background color of content area 3 (tab 3)
color:#FFFFFF; //Text color in content area 3 (tab 3)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 a {
color:#FFFFFF; //color of HYPERLINKS in content area 3 (tab 3)
}
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STOPS-HELP-@-http://bloggerstop.net-->
The code highlighted in RED will control the appearance of the tabs. And the code highlighted in BLUE will control the appearance of the content area. To make your work easy, comments are written in front of the code above (highlighted in GREEN color).
Now save the template.
STEP #2:
Now go to Layout -> Page Elements
Click on Add a Gadget and select it as HTML/JavaScript type
And paste this code into it:
<div id="tabs">Now before you save the widget, change the text in RED to change the names of tabs and change the text in BLUE to change the content of the tabs.
<ul>
<li><a href="#fragment-1"><span>Best Posts</span></a></li>
<li><a href="#fragment-2"><span>My Pictures</span></a></li>
<li><a href="#fragment-3"><span>Recent Posts</span></a></li>
</ul>
<div id="fragment-1">
<span style="text-align:left;">
<p>First tab is active by default:</p>
</span></div>
<div id="fragment-2">
<center><a href="http://tinypic.com" target="_blank"><img src="http://i29.tinypic.com/29ggyu0.jpg" border="0" alt="Image and video hosting by TinyPic"></a></center></div>
<div id="fragment-3">
Content of Tab #3<br/><span style="font-size: xx-small;"><a href="http://bloggerstop.net" target="_blank">Blogger Widgets</a></span>
</div>
</div>
Save the widget and enjoy more content in less space.
This post has been written to replace the previous tutorial on advanced collapsible multi-tabbed widget.
64 comments
Write commentsooooooooo!!!1 awsome!!!! finally something that works!!!!! wooow, really caant thank u enough. i will be tweaking the colors, and im ready.
Replythanks a million
any idea how to change the headlines into:
Replyrecent posts
recent comments
(of course i want them to be automaticaly updated)
Hey sai,when i open the working demo,it shows access is denied :(
ReplyCan u see waht is the problem and rectify it.I want to see how it looks like.maybe some problem with datanest?
With regards
vinoth
Contests and freebies
Hey Sai,
ReplyI saw this 200 $ giveaway banner on ur blog,did u trust that site ?
I even saw that on all google ads.do u trsut that one so that i can also particiate and win,.
another thing..check the end of the page
http://www.jewelryartdesigns.com/jewelry-jad.asp?p=Win-Jewelry&xref=bloggerstop.net
We choose the winner of our yearly draw in exactly the same way. The next annual draw will occur October 1st 2010. Good luck to everyone!
I have a Contests blog ,i am awaiting your reply so that i can also tell it to my blog users.
Hello Divya,
ReplyCan we change font size, color and style of tab headings ?
@Rabin
ReplyYou are most welcome buddy !
@Anonymous
In STEP #2
replace the RED colored headings.
Then replace the blue colored code with the that of Recent Posts and Popular Posts
@Vinoth
Thanks for informing me, I have now adjusted the settings. Now the demo will be displayed to you.
@Winoath
That's a sponsor of mine. I have read that page, and along with that annual draw, they have monthly draws too in which any random blogger is given $200. The previous winners blogs are mentioned in that page, if you want you may confirm the reliability with these winners.
Anyways the only requirement is placing a banner on the blog, no review etc. so if you want you may participate, I have checked their homepage pagerank which is 5, so they are definitely not in Google-blacklisted group.
@Hetal Patil,
ReplyIn step #1
modify the code in red to adjust seleccted-tab's settings.
I saw exactly this widget with awesome modifications somewhere, I'll give the link after a few hours.
@Hetal
ReplyCheck out the Part-2 of this post, I hope you'll find the tab-menu of your choice now.
Hello,
ReplyThanks for the update Divya. I have a question off the topic - how can we put a line in a post (as you have used for update in the above post) ?
Use this code, wherever you wish to insert a line:
Reply<hr />
Thanks :)
ReplyThank You!
ReplyTHANK YOU SO MUCH for sharing.
ReplyI attempted to copy the code from "edit html" to one link list to paste it in blue area ( step 2) and it wasn't working.
My blog is at ngmarcus.blogspot.com.
As you can see I have the MultiTab on the right and I wish to Bring the contents of the Link List Inspirations, Home Mates Friends and Blog archive all into the multiTab. is it possible? thanks for your time
Hi Marcus, although it is working in your blog, but the problem is the blue area in your blog (your sidebar) is not wide enough to use long names in the tabs like "Inspirations, Home Mates Friends and Blog archive". How to resolve the issue:
Reply1. Try some short names and it will align perfectly.
2. Or you can increase the width of the sidebar.
3. Or you can drag this widget above your posts area, where the width is sufficient to use quite longer tab names.
cools thanks alot for your fast response!!
Replythank's i just inserted in my blog http://www.a2zabsorbe.blogspot.com/...
Replycheck it out..
Great work buddy!
Replythe comments with a blue background looks really cool...
how do you get customized content in each tab? I tried opening the widgets I wanted to embed under each tab into the multi-tab code but it didn't work. I'm just setting this blog up so there's no content yet. www.shematters.me
ReplyHey Nancy,
ReplyIn Step #2 REPLACE the entire text highlighted in BLUE-color with any text/image you like.
What do I replace the blue code with if I want to use a widget (recent comments, archives, etc.) rather than an image? (Sorry to be so dull - just learning . . . )
ReplyHey Nancy,
ReplySimply replace the code in blue, with the code from this page - if you want a recent posts widget in one of the tabs: Blogger Recent Posts Widget
and this one for recent comments widget: Recent comments widget
similarly copy the code for popular posts widget from here:
Popular posts widget
and get codes for other widgets from the sidebar of this blog.
Holy cow Sai, this is getting complicated. I read your comments to Nancy. I think I'm going to have to enlist my techie brother for help, I'm going over to see him right now anyway so I'll be in touch. Thanks again, You're awesome! --Kelly
ReplyBTW, Does the above advice apply to my case. I want to put my little "about me" section in the "Author" tab, and the links to my favorite websites under the "trees" tab, and possibly a link to my photobucket and you tube stuff in the "pictures" tab. I guess I'm just wondering if I can make it all automatic, or do I have to deal with all the HTML stuff every time I add an entry, or want to edit or update the blog. Sorry I'm so technologically challenged. --Kelly
ReplySai, Also, I forgot to mention that the picture of the orchid flower in the tabs (up on top of this page) still comes up on my site before it loads up the newer tabs that I did afterward. Any suggestions? Sorry to be so high maintenance. --Kelly Juell
ReplyI love the idea of the tabs, but am trying to figure out the best way to use them for my classroom blog.
Replywww.rochaclass.blogspot.com
This is what I'm thinking:
1. Subscribe
2. Calendar from Google with current curriculum we are studying -- I put the code in for the calendar and left it at the bottom of my blog as well, because I couldn't get it to show up on the blog itself under the calendar tab. What did I do wrong here?
3. Resources - with a links list... (Is this possible? I couldn't find a gadget for it, if so.)
Thanks so much!
@ Kelly,
ReplyDon't worry about the content in the tabs, just tell me what you want to add in them, and I'll give the code that you have to add.
For now, as you have mentioned for your author tab,
replace this code entirely:
<p>And this one is your 4th tab</p>
with this one:
<span style="text-align:left;">
<b>Kelly Mugar Juell</b>
<a href="http://www.blogger.com/profile/16306414687298797032" style="clear: left; float: left;"><img src="http://3.bp.blogspot.com/_09bezb5hVoA/S1u2-wnKuwI/AAAAAAAAAAM/K2X7B8a8Dxk/S220/meagain.jpg"/></a> Mommy, wife, daughter, sister, aunt, and friend. I love my peeps, I love my life!
</span>
@Nancy
ReplyI suggest the same to you, mail me the content you want to display in the tabs, and I will tell you where and what to edit.
@Tara,
ReplyYou have pasted the code correctly for your tabs, but by mistake you have deleted the closing div tag "</div>" for tab 1.
i.e. between these lines;
FeedBurner</a></p></form>
<div id="fragment-2">
add a closing div tag, like this:
FeedBurner</a></p></form>
</div>
<div id="fragment-2">
and delete an extra closing div tag at the end.
i.e. this code at the end:
</div>
</div></div>
will become:
</div>
</div>
Sai, I did that, thank you. I added 3 or 4 more posts. 2 are recipes of mine that I want in my "gourmet" tab, and 1 is a story about my husband and kids that I want in my "stories" tab. Is there a way to organize my posts into different categories when I write them so that they automatically go into the correct tab? That actually the whole reason why I am doing the tabs because I want to organize my posts. Also, under "trees" I was hoping to put all my website links. Those websites are all my family trees that I am working on. What do you think? am I too high maintenance (-: --Kelly
ReplyThanks Again!
Sai, for some reason I couldn't post my comment as "Kelly Mugar Juell" through my google account, it wouldn't take it. Anyway, I just wanted to clarify that last comment was me. --Kelly Mugar Juell
Replywww.juellsjewel.blogspot.com
oh, and P.S. how do I delete the script that is loading the first tabs that I added and then changed to these better ones. It keeps loading on my page and then I have to wait before it loads correctly with my newer better tabs.
None of your questions will ever bother me Kelly...I do try to answer all the comments as soon as possible, but just in case any of your comments do not get replies from me within 4/5 days, then do not hesitate to comment again to remind me.
ReplyAnyways, you can of course organize the posts in those tabs, but for that you have to assign some labels to your posts, like add a label "gourmet" to your posts on recipes and a label called "life" or "stories" to your personal stories.
Edit your previous posts and add these labels (at the bottom of the post-editor - you can add multiple labels to a single post separated by commas).
Once you do this, let me check and then we'll proceed further.
2. You can speed up the loading of the widget a little bit, by shifting this code:
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STARTS-->
..
..
..
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STOPS-HELP-@-http://bloggerstop.net-->
you presently have this code JUST above this tag:
</head>
now transfer it JUST BELOW this code:
<head>
notice the missing "/" in the two tags.
Hey Sai, Ok, so I added the labels, I'm so glad you told me about that. It's a great way to organize my posts. So now what should I do?
ReplyAlso, I put the post truncation thing on my 1st post, the one about "When my husband got sick...really scary sick" and it won't work when I look at it, it also won't work on the "Tuscan Vegetable Stew" post. www.juellsjewel.blogspot.com
I just tried to shift the code but I screwed up, I think I got confused and did it wrong because it won't let me save it, this is what it's saying: "We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "head" must be terminated by the matching end-tag "".
--Kelly Juell
Hi Sai, I forgot to ask you...Is there any way to delete the column on the left or do you think I need that column. I just thought I would organize it all in the tabs and I wouldn't need it. I've been putting pictures in my posts, I think it's looking better. I'm looking forward to getting it all done. There are some things you've suggested that I haven't had a chance to do yet, but I will get around to it. Thanks Again! --Kelly
Reply@Kelly,
ReplyI just checked your blog, and found all three posts truncated...
While shifting that code, make sure you are shifting the entire code, i.e.
from
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STARTS-->
to
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STOPS-HELP-@-http://bloggerstop.net-->
& paste it just BELOW this code: <head>
I won't suggest you to delete your sidebar. Once you find so many widgets and friends on the internet, you may actually feel the need of adding a new sidebar :)
PS: Give me your mail-id where I can send the content of your tabs, I'll mail you the code using which you can show recent posts organised, according to your labels.
My tabs were working fine and now they aren't working... Will you check out my coding to see where my mistake is? I'm not sure what happened. They were working just fine and I loved them.
ReplyThanks so much for your help,
Tara
www.rochaclass.blogspot.com
Hey Tara,
ReplyYou have pasted the code from STEP #1 at the wrong place. It is presently above the tag
<head>
Shift it to either BELOW
<head>
or ABOVE this tag:
</head>
Notice the "/" in the code above.
Sai,
ReplyOkay... I shifted that whole code to beneath the head like you said and it is still not working.
Could there be another problem somewhere?
Thanks!
I just copied and pasted the html codes for step #1 again and it is still not working. It's making me a little crazy.
ReplyThank you so much for helping me.
Hey Sai! Do you know what happened to my tabs? I haven't even done any of the things yet that you told me to do last time. I was just going to do it now and I wanted to view my blog first and it's not loading the tabs. It looks really bad now. --Kelly
Replywww.juellsjewel.blogspot.com
@Tara & Kelly,
ReplyThe problem was with the jquery-ui team. They have removed the files which we were using in this hack.
Anyways I have updated the code with new links. Please change the code (STEP #1)
I hope it'll work perfectly.
It worked!!!
ReplyThanks! I LOVE IT!!! Never thought I would learn HTML codes. Thanks for helping me. You are the best!
Okay... I don't want to mess up my template by trying to trade it out with a pretty ready made one that includes a banner and graphics for fear that I'll mess up what I already have. How can I add a picture to the left or right side of the heading/title. I don't want it in the side bar. I want to put it in the middle section. Is this possible?
ReplyThanks.
Tara,
ReplyYou can in fact add a complete new header image (right in the center) Give me the image (link or mail it to me). I'll give you the code to add, in your template.
BTW, in your tabbed widget, the selected tab is completely white...so to avoid this problem, delete this code entirely:
.ui-tabs-selected a {
background-color: #fff;
color: #C18844;
font-weight: bold;
padding: 2px 8px 1px;
border-bottom: 1px solid #fff;
border-left: 1px solid gray;
border-right: 1px solid gray;
margin-bottom: -1px;
overflow: visible;
}
Thanks for the tip on the tabs... I was trying to figure that out.
ReplyOkay... I have a header... The direct link is:
http://i786.photobucket.com/albums/yy147/rubtar/RochaBlogHeader-1.jpg
If you could tell me how to put it in my template (where to insert it in the html code that would be great. I tried to insert it using the html code from photobucket, but couldn't figure it out.
Sai, Thanks for all your help, I agree with you about the sidebar thing, I am going to leave it up there. In fact, i think i am just going to pass on using the tabs afterall. I don't my blogs appearance dependent on someone else and if they decide to remove the files I am using for my blog. No big deal though. Do you know how I can just organize my side bar based on the "labels" you suggested I use. Instead of by Months like January, February etc... I would like it to be: Life Stories, Gourmet, etc... What do you think? --Kelly
ReplySai, I went ahead and reset my blog to the default and I lost my internet links and some other stuff. No worries, I can re do it. But I can't find the layout part on my dashboard, it's gone now, what should I do? I want to fix my side bar up now. Thanks, --Kelly
Replyworked for some days now not working.... help me out
Reply@koorafs,
ReplyI have updated the code in step #1, of this tutorial. Please use the new code. It'll definitely fix your problem.
@Tara,
ReplyThis is the exact code you are having in your template:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #333333;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
#header {
margin: 5px;
border: 1px solid #333333;
text-align: center;
color:#804000;
}
now replace it with this one:
#header-wrapper {
background: url(http://i786.photobucket.com/albums/yy147/rubtar/RochaBlogHeader-1.jpg) no-repeat;
width:660px;
height:175px;
margin:0 auto 10px;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}
#header {
margin: 5px;
text-align: center;
color:#804000;
}
If your Blog-Title overlaps your header image, then we can either make it small, or hide it completely or adjust it at the bottom/top of the header image. Let me know what do you want to do...
Sai...
ReplyThat looks great. I love it. How do I hide the old header?
Thanks again for all your help!
There are two methods to do this, one is against SEO so I won't suggest you that (which is simply hiding the header text using CSS).
ReplyAnother method (suggested by Blogger.com) is this one:
Go to Layout -> Edit HTML
and delete only this line from the code:
background: url(http://i786.photobucket.com/albums/yy147/rubtar/RochaBlogHeader-1.jpg) no-repeat;
Now go to Layout -> Page Elements
and click he "Edit" link of your header widget (right at the top, just below the navbar)
1. Now, browse the same header-image from your PC.
2. Select "Instead of title and description" under "placement"
And save the widget.
@Kelly,
ReplyIs the "Layout" tab still missing from your dashboard? Try some other browser too, like IE, Firefox or Opera..
Sidebar is of course important, but you may have a multi-tabbed widget too, there's no need to completely remove it. In my blog too, as you can see, I have a sidebar and two rather than 1 multi-tabbed widgets (one in the sidebar and 1 below the posts)
Don't worry about those uploaded files, now I have hosted them myself and you can also save a copy of those files yourself on your PC as a backup.
I need your mail-id to send you the code, for recent posts specific to your categories like "Life stories", "Gourmet" etc.
@Kelly,
ReplyIf by mistake, you have switched to "classic template", then you have to revert/upgrade to "Layout"
If this is the menu, you can see in your dashboard, then you have to click on "upgrade your template":
http://1.bp.blogspot.com/_pzC_7PLtN-0/SKc8_TyycPI/AAAAAAAABME/AsYhinKLZDw/s1600-h/Upgrade+Template+1.JPG
Thanks so much Sai!!! You are wonderful!!!
ReplyI never thought of such an innovative stuff can be done in blogger blogs. Hats off to you Divya... The more and more I am reading your posts, I am admiring you more ;)
ReplyLina.
Hi Sai,
ReplyI'd like to change my theme and now I like to add Collapssibe multi-tabbed widget into my blog but after I did it, it doesn't look right. Please take a look at my blog and show me what to do. I've tried and tried many times but the problem's still there.
http://triallinda.blogspot.com/
Sorry, this is the testing blog and I like to make it perfectly before I can move/change into my old blog.
Thanks again Sai. You helped me a lots with my other blog :)
Linda
Hi Sai,
ReplyOK, after I read & followed Part 2 of this post, I can made it successfully.
Thanks Sai again for this post :)
hi sai . i am again back to ur posts. i did as u said but the tabs aren't appearing like tabs rather they are like list.
ReplyThe same is the problem with the 'working demo' u provided. plz help me out with this. looking forward for ur solution
:) :) :)
@Java, thanks for reporting the error, I have upodated the post.
ReplyYou just have to change one link in the code, i.e.
change this code:
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/ui.all.css" rel="stylesheet" />
to this:
<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
hi sai even that was not working .please help me out :)
ReplyI would like to use these for link lists ( I have too many links i think and this would be perfect for that.) How do I do that?
Replyfirst I paste the code before /head then just after <head but both didn't work for me.
Replyhttp://defencedog.blogspot.com/
see the picture:
http://imageupload.org/?d=4D8C98DB1
:))
ReplyComments are moderated on this blog
Allowed HTML tags: <b>, <i> and <a>
Comment Like This! and Optimize your blog EmoticonEmoticon