December 14, 2009

PART-2 : Collapsible Multi-Tabbed Widget


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:
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STARTS-->
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
<!--COLLAPSIBLE-MULTI-TABBED-WIDGET-STOPS-HELP-@-http://bloggerstop.net-->
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...


59 comments:

Danoxs said...

Love you..
..

xD That sound/sounded/whatever gay =))

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

Danoxs said...

Hey Divya, not working :(

It's appearing really ugly :|

Divya Sai said...

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

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

Any ideas ??

Danoxs said...

Hey Divya, nevermind, just errased the code.. :p

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

Divya Sai said...

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

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

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

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

Sai @ Blogger Widgets said...

@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 said...

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

Anshul Dudeja said...

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

Divya Sai said...

Yeah, Googleapis -> I'm lovin it :)

Mayur said...

How to increase width of that widget??

BEBEN said...

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

Divya Sai said...

@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 said...

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

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

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

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

OK..
Thanks..

yusuf said...

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

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

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

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://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 said...

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

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

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

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

Hi Dsai..
Many BIG Thanks for you, it's working now :D...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 said...

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

Can you help in solving this Problem.

http://tysonporas.blogspot.com

Divya Sai said...

@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 said...

Thanks Divya Sai

It's Working Properly Now

Yusuf Sinaga.dr said...

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

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

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

yusuf said...

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

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

Hello Divya Sai

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

yusuf said...

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

@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 said...

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

Divya Sai said...

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

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

Divya Sai said...

size of font/widget/tabs/fragments?

yusuf said...

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

@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 said...

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

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

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

@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 said...

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

Lina.

PirateLinkz said...
This comment has been removed by the author.
Hendra @ hendra-site.com said...

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

Shabach said...

how to insert the tabs into content?

Rhaye said...

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

Hello Rhaye,

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

Rhaye said...

@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 :D 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 :D
thx for quick response again..

Sai - BloggerStop.Net said...

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.

markhieu said...

Thanks for the tut, next step is how do i put Recent posts, Recent comments, and Tags in those 3 tabs ! thats the problem

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy