PART-2 : Collapsible Multi-Tabbed Widget

Blogger Webmaster Tools

Yesterday I published an article on Collapsible Multi-Tabbed Widget and this post is the second part of that tutorial. You just have to copy a single line from this post to completely change the UI of that widget.

Previous Widget used to look like this:

Once you follow the simple steps of this tutorial, you can give a complete new look to that widget by selecting the perfect widget-theme out of 24 available skins. Three of the 24 new skins are displayed below [Live DEMO]:

Now to give a new look to that widget, all you have to do is, add a single code-line in the STEP #1 of the previous tutorial. After modification the EXACT code you should use looks like this:

PASTE NEW CODE-LINE HERE

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

//IMPORTANT: SOME UNECESSARY CODE FROM THIS PART IN THE PREVIOUS TUTORIAL HAS BEEN DELETED NOW

The line in BLUE is where you have to paste the new code, which is unique for every widget skin. Instead of that blue line, copy and paste the code of your interest from below.

Now go to this page: JQUERYUI - Tabs Demo
and from the drop-down menu (see the top-right region of the page), check out all the 24 available widget skins:

Then remember the name of the skin/theme of your choice and return back to this page. And now copy the appropriate code:

Theme #01: UI Lightness
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

Theme #02: UI Darkness
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />

Theme #03: Smoothness
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />

Theme #04: Start
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" rel="stylesheet" />

Theme #05: Redmond
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" rel="stylesheet" />

Theme #06: Sunny
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" rel="stylesheet" />

Theme #07: Overcast
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css" rel="stylesheet" />

Theme #08: Le Frog
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/le-frog/jquery-ui.css" rel="stylesheet" />

Theme #09: Flick (or Flicker type)
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css" rel="stylesheet" />

Theme #10: Pepper Grinder
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css" rel="stylesheet" />

Theme #11: EggPlant
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" rel="stylesheet" />

Theme #12: Dark Hive
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css" rel="stylesheet" />

Theme #13: Cupertino
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" rel="stylesheet" />

Theme #14: South Street
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/south-street/jquery-ui.css" rel="stylesheet" />

Theme #15: Blitzer
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" rel="stylesheet" />

Theme #16: Humanity
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/humanity/jquery-ui.css" rel="stylesheet" />

Theme #17: Hot Sneaks
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" />

Theme #18: Excite Bike
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/excite-bike/jquery-ui.css" rel="stylesheet" />

Theme #19: Vader
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/vader/jquery-ui.css" rel="stylesheet" />

Theme #20: Dot Luv
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dot-luv/jquery-ui.css" rel="stylesheet" />

Theme #21: Mint Choc
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/mint-choc/jquery-ui.css" rel="stylesheet" />

Theme #22: Black Tie
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" rel="stylesheet" />

Theme #23: Trontastic
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/trontastic/jquery-ui.css" rel="stylesheet" />

Theme #24: Swanky Purse
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" rel="stylesheet" />

Once you have copied the code, replace the blue line in the above code with this new code and save your template.
From the previous post, leave the code in STEP #2 as it is.
Your widget is now ready in an entirely new look...

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Google Facebook Twitter More

59 comments

Write comments

Danoxs

December 14, 2009 1:17 PM delete

Love you..
..

xD That sound/sounded/whatever gay =))

I dunno where you get all your things from :-/

Danoxs

December 14, 2009 1:40 PM delete

Hey Divya, not working

It's appearing really ugly :|

Divya Sai

December 14, 2009 1:47 PM delete

Hi Daniel,

Replace this line in the code, as it is still there in your template:
PASTE NEW CODE-LINE HERE
with any of the 24 codes (Theme #1 - Theme #24 - for those 24 skins)

Danoxs

December 14, 2009 2:01 PM delete

Yeah, you got in there just in the moment when replacing it, but did that, and even tried puting it before the "/body" tag

Any ideas ??

Danoxs

December 14, 2009 2:13 PM delete

Hey Divya, nevermind, just errased the code..

It's weird, just appeared as an unformatted text, and there wasa weird white thing below the banners :-/

Divya Sai

December 14, 2009 2:21 PM delete

Hey Daniel, I left an additional line in that code. I have just removed it, sorry for that. Try it now, hope you'll get it this time.

Martin

December 14, 2009 4:36 PM delete

Hi Divya

Slightly off topic, but I hope you can advise me re a problem I have with a drop down menu you wrote about several months ago...

I have the drop down menu installed on my site (several sites actually - all hosted on the blogger platform) - and until 12 hours ago the menus were all working perfectly.

Suddenly, they have fallen apart though...

I have the script.js and the style.css hosted at fileave.com, opendrive.com, sigmirror.com and mydatanest.com, and it DOES NOT MATTER which of these styles or scripts I use, the drop down menus STILL fail!

I hope Blogger have not tweaked something so that remotely hosted scripts cannot be used?

I would be grateful if you have any ideas on this

Regards - Martin

Danoxs

December 14, 2009 5:24 PM delete

LOL, yes it's working now

@Martin: Why don't you use this tab instead of the other one ? I don't think it's a Blogger issue 'cause I use Sigmirror and it works

@Divya: In your Social Bookmarking Images, the Digg one is not linking nowhere

Sai @ Blogger Widgets

December 15, 2009 12:16 AM delete

@Martin
Yeah I remember our conversation, I just checked your us and gb sub-domains. The drop down menu is working perfecty and the files are hosted to opendrive. So I think there's no problem now. BTW what's the bandwidth allowed by opendrive?

@Daniel
Glad to see the widget at your blog buddy

BEBEN

December 15, 2009 3:45 AM delete

nice collect, and instant metode with the ajax library and google...great :X

Anshul Dudeja

December 15, 2009 2:37 PM delete

@divya great got good collectin and all loaded on googleapis server.

Divya Sai

December 15, 2009 2:56 PM delete

Yeah, Googleapis -> I'm lovin it

Mayur

December 16, 2009 5:53 AM delete

How to increase width of that widget??

BEBEN

December 16, 2009 8:20 AM delete

i'll have review your post friend...
cek get it : http://beben-koben.blogspot.com/2009/12/collapsible-tab-view.html

Divya Sai

December 16, 2009 8:46 AM delete

@Mayur
Check out the first part (STEP #2) of this tutorial to change the width.

@Beben
Thanks for spreading the word and the linkback.

Martin

December 18, 2009 6:08 AM delete

Hi Divya

Many thanks for your response and sorry to have gone quiet on you - I managed to lose my net connection completely for a few days.

You are of course right - the drop down menus did begin working okay, and it just puzzles me why the fault occurred in the first place... (as I stated, I have the scripts hosted on four different sites - I use those hosted on Opendrive as the "default" scripts, and the scripts at FileAve.com etc as a "backup" in case OpenDrive goes offline for any reason.

FWIW Opendrive (which until recently was branded as Boxstr.com) allow 5GB storage and 1GB bandwidth per day on the free plan. As the scripts are only about 1kb, this plan could sustain maybe a million hits per day before the bandwith runs out. And I'm not quite at a million yet... ;-)

Thanks again, Divya Sai.

Respect

Martin

Divya Sai

December 18, 2009 6:58 AM delete

Thats great, I think 1 GB per day is more than enough.
Anyways, presently I am using mydatanest and sigmirror, but recenly switched to weebly, which is offering unlimited storage + bandwidth

GHz SparkZ

January 02, 2010 1:32 AM delete

Hey Divya Sai,
I don't know how to use Sigmirror..
Is is just for hosting images?
Cause I don't know where to upload the files.

Sai @ Blogger Help

January 02, 2010 1:45 AM delete

Its not just for images, you can upload any file and store it there.
BTW I would suggest Mydatanest over sigmirror
At sigmirror, in the top menu there will be link to upload page (right in the center)

GHz SparkZ

January 02, 2010 2:05 AM delete

OK..
Thanks..

yusuf

January 13, 2010 6:35 AM delete

good nite Dsai..
i try to put this widget in my blog..but it makes some error in my drop down menu..
could you tell me what's wrong with my blog?
is it because the Jquery things?
thx.

Divya Sai

January 13, 2010 6:51 AM delete

Hey Yusuf,

I found only the step #1 of this tutorial in your blog, but not the step #2 (that step is in the part 1 of this tutorial) follow that step too.

yusuf

January 13, 2010 7:24 AM delete

thx for the fast response..
but i already do the #2 step also..
i deleted it,and now i try it back..but still not working.
please check again Dsai.
Thx.

Yusuf.

Divya Sai

January 13, 2010 7:56 AM delete

I have again checked your blog yusuf,
I think 1 of these can be a problem:

1. more than 1 multi-tabbed widgets in a blog.
2. More than 1 time you are calling jquery. (we'll first try to solve this issue, read on...)

You can delete these lines from your blog (but first download and save your template).


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>

<script src='http://www.mydatanest.com/files/number10/33149_rwh6n/jquery-1.3.2.min.js' type='text/javascript'></script>

yusuf

January 13, 2010 8:20 AM delete

but the 2 first row of that script is used for the drop down menu..

and the last script you tell me to delete is used for my other multi tabbed widget..

FYI,before this i use the "Advanced Collapsible Multi tabbed widget" that you've updated into this.
But it can work along with the other multitabbed widget..

or is it because the former widget is hotlinked the jquery files to mydatanest?
hope you can figure it out,otherwise i have to use your old widget again

thx Dsai.

Regards,

Yusuf

yusuf

January 13, 2010 8:29 AM delete

As comparison..
I already reinstall the previous multi tabbed widget i've made according to your old post.

you might want to check it Dsai.
thx.

Nb.Sorry for double posting.

yusuf

January 13, 2010 10:48 PM delete

gud morning Dsai..
sorry to disturbing you..

i already done what u've suggested..but it still not working,the problem still persist..
and now my blog looks so messy

could you visit my blog and give another suggestion?

Regards,

Yusuf.

Divya Sai

January 14, 2010 1:51 AM delete

Hey yusuf,

Got the problem, there's a code conflict in your template.

If you search your template, there are two places where id='tabs' is being used (another one is id="tabs")
So that is why the widget is not taking its shape.

The previous widget (multi-tabbed) you were using, doesn't use the id tabs, so no conflict was there, you can either use it. Or make some changes in this one.
You have to rename the id. Change it from tabs to cptabs everywhere in the code (like #tabs to #cptabs or .tabs to .cptabs and .ui-tabs to .ui-cptabs) - everywhere in all steps and even the .css file (and upload it to mydatanest and link it this new file the code).

yusuf

January 14, 2010 6:13 AM delete

Hi Dsai..
Many BIG Thanks for you, it's working now...and it work along with the other multitabbed widget. I don't know how to solve without your help.

And instead of changing your code one by one, i've changed the id='tabs' in my template into id='navtab' and it really work,thx for finding this conflict code Dsai.

Btw, i wrote special thanks for you in my blog, you can read it here

Actually i still have unsolved problem in my blog, if you still remember my question a month ago about how to put 3 new widget in the bottom?i still confused about how to make the widget wrapped with the template skin,because it looks separated in my blog. If u don't mind give me some suggestion about this

Best regards,

Yusuf

Poras

January 14, 2010 11:05 AM delete

I am having a problem,In the 5th Tabbed nothing appears.

Can you help in solving this Problem.

http://tysonporas.blogspot.com

Divya Sai

January 14, 2010 12:10 PM delete

@yusuf,

Hey that's so great. I am happy for you buddy. And really really thanks a tonnn for the appreciation. I have bookmarked your post and soon you'll get a backlink from BloggerStop.

Regarding your footer widgets, we can easily bring them in to the white region where you have your copyright statements. If that is fine with you, then let me know. Or else some photoshop work is needed to create similar widget backgrounds for the footer widgets.

@Poras

In your widget, the closing div tag (</div>) for fragment-4 is misplaced, you should place it before the start of fragment-5, presently it is after the closing of fragment-5 div tag. Hope you got it, or feel free to comment back.

Poras

January 14, 2010 12:35 PM delete

Thanks Divya Sai

It's Working Properly Now

Yusuf Sinaga.dr

January 15, 2010 1:57 AM delete

Hi again Dsai..
You deserve the appreciation buddy

About the footer background,i'll try ur suggestion 1st.
So how could i bring the widget into the white region?

Regards,

Yusuf

Divya Sai

January 15, 2010 7:27 AM delete

That is quite simple Yusuf,
[Download your template as a back up]
First expand the widget templates.

According that add 3 widgets tutorial, you have to replace a red line with new code lines. Now undo that step with some modifications described below:

Cut the new code (in black - from <div id='footer-column-container'>...to...</div>) and paste it above your copyright lines.

And paste the line in RED (<b:section class='footer' id='footer'/>), where this black-code was previously present.

Divya Sai

January 15, 2010 7:28 AM delete

Once you do this, I will give you the code to chage the appearance of the headings/titles of these widgets.

yusuf

January 15, 2010 11:10 AM delete

I don't know am i doing it right, but i have done it. (hope i don't misunderstand your order sir )

Please check it Dsai..
Thx.

Nb.Sorry to made a comment out of topic here (you could delete this comment if you want to mate..)

Sai @ Blogger Widgets

January 15, 2010 11:39 AM delete

Yusuf, widgets didn' align properly. Return to your older code and mail me your template at bloggerstop.net [at] gmail [dot] com
I'll check and tell you what exactly can be done.

Poras

January 15, 2010 3:53 PM delete

Hello Divya Sai

I Want to ask that how can i use Animated Flash Tag Cloud In Tabs

yusuf

January 16, 2010 11:47 PM delete

Gud morning Sai..
I've sent you email attached with my blog template code..
Have you checked it?

@poras > if i'm not wrong,you can't insert another widget into this multitabbed..
i used to try that too.
but there is another multitabbed that work with that,you could see the example in <a href="http://earn-bucks-in.blogspot.com>my blog here</a>

Sai @ Blogger Help

January 17, 2010 12:08 PM delete

@Yusuf,

Your blog's template is based on a Background picture, so adding those widgets in the already present white region is quite difficult. I think you have to add the widget again at the bottom but then you can modify their look to match that of your blog.

@Poras
Yes that is possible, read this tutorial to tabbify your widgets (2/3/4 of your widgets) and then to one of these tabbed widgets add the code of flash-labels. Actually you'll have to add the flash widget as a separate label widget (according to the tutorial). And once the widget is live on your blog, drag it to one of those tabbed widgets area.

yusuf

January 19, 2010 9:00 AM delete

Hi..
Sry late to reply..
then how to modify the look Dsai?
Thx.

Divya Sai

January 24, 2010 3:39 AM delete

Hey Yusuf,

Add (AND EDIT) this code before the </head> tag, to change the headings/titles of the footer widgets.

<style type='text/css'>
#footer-column-container h2 {
text-align:center;
padding-left: 10px;
padding-top: 10px;
font-size: 20px;
font-weight: bold;
color: #ff0000;
}
</style>

and this one to change the widgets background/padding/border etc.

<style type='text/css'>
#footer-column-container {
clear:both;
background: #D8D0C5;
}
</style>

paan

January 25, 2010 11:19 PM delete

i have a little problem with the size..how to change it ???

Divya Sai

January 26, 2010 2:00 AM delete

size of font/widget/tabs/fragments?

yusuf

January 26, 2010 10:42 AM delete

thanks Dsai..
already try this on my blog..
i'd like to make the background wider..cover all left to right side..is it possible?
and also could i make it a lil bit closer to the bottom edge (of the original template) ?

many thanks Dsai..

Yusuf.

Divya Sai

January 31, 2010 4:48 AM delete

@Ysuf, you mean the background of the footer widgets or that of the entire blog?
You may use a background picture of resultion (934 x 434)pixels instead of simple background-color (which is #080808 presently on your blogs footer)

BTW, I have mentioned about your post here on BloggerStop

yusuf

January 31, 2010 11:35 AM delete

Hi Dsai..
Yes what i mean is the background of the footer widget.

So do you mean i should create a background with that resolution and then upload it to image hosting?

Then what should i do next?

wow..that's great,i already seen it..thanks Dsai, glad to see my blog mentioned here

Divya Sai

January 31, 2010 12:20 PM delete

yeah Yusuf, you may use any image of resolution ~ 935px x 435px as the background.
Change the code:

<style type='text/css'>
#footer-column-container {
clear:both;
background: #080808;
}
</style>

to this:

<style type='text/css'>
#footer-column-container {
clear:both;
background: url(DIRECT_LINK_TO_THE_IMAGE) no-repeat;
}
</style>

in case you use a small background image, then instead of no-repeat, use repeat.

yusuf

February 10, 2010 11:34 PM delete

hi..Dsai
long time no see..how r u?
it's me again,wanna ask u..this multitabbed widget is error in my blog,is there any other of your reader that experience the same thing?
or the problem is on my blog only?
Thx.

Sai @ Blogger Widgets

February 11, 2010 1:43 AM delete

@Yusuf, I'm absolutely fine, hope you are doing good too
a few days I have updated this post with new code, as jqueryui has removed the files being used in this widget. Simply use the new code, it will start working again.

Poker Software

February 22, 2010 5:00 AM delete

Innovative stuff can only be seen in your blog. Once again thanks for the efforts

Lina.

RhyLe

March 07, 2010 7:15 PM delete This comment has been removed by the author.

Hendra @ hendra-site.com

March 28, 2010 3:56 AM delete

Thx u very much...;)
pleaze visit my blog...
c u..

Shabach

September 26, 2010 2:24 PM delete

how to insert the tabs into content?

Rhaye

September 27, 2010 3:40 PM delete

any copies of javascripts? your javascripts are all in 404.. deleted >.< the tabs arent working anymore.. please check http://www.yonipzone.com/

Sai - BloggerStop.Net

September 27, 2010 3:44 PM delete

Hello Rhaye,

It's a temporary downtime of my host, sorry for that. Anyways, the files will be available soon ...

Rhaye

September 27, 2010 4:17 PM delete

@sai thx for the fast reply, i change the js files from http://jqueryui.com/ and copied there source link.. and change my theme also here it is:

from dot luv to dark hive
from 1.3.2 to > http://jqueryui.com/jquery-1.4.2.js
http://jqueryui.com/ui/jquery.ui.core.js
http://jqueryui.com/ui/jquery.ui.tabs.js

Added to show the tabbed http://jqueryui.com/ui/jquery.ui.widget.js

i hope this troubleshoot will help
thx for quick response again..

Sai - BloggerStop.Net

September 29, 2010 11:51 AM delete

Yeah, actually there was some temporary problem with my host (a MySQL update), now it's all working fine - and I am quite sure that this type of problem wont be there again for quite some time. The .js files went offline due to that problem, & so you were facing those problems. Hope it's all fine now.