Advanced Collapsible Multi-Tabbed Widget

UPDATE: This widget is no longer working. A new tutorial has been written on "How to Add Collapsible Multi-Tabbed Widget"

I have already two tutorials in this blog on 'how to add multi-tabbed widgets' - Post 1 and Post 2, but this one is very different and more professional too.
Requested by maboroshine, this widget is capable of auto-adjusting the height of different tabs according to their content.

The widget looks like this:

But when you select tab 2 or tab 3, the height of the widget will adjust itself according to the content in tab 2 or tab 3.

To see this widget in action see this blog: Club-Vista Template
Or see it live here: Demo 2

Instructions to add this widget to your blog:

Step1:
Download these two files:
jquery-ui-personalized-1.5.2.packed.js
sprinkle.js

from NetTutsPlus | (Download the Source.zip file)

NOTE: Delete extra files (index.html, jquery-1.2.6.min.js, star.png, style.css) included in the downloaded zipped file.

Also download
new-tabber-Style.rar
from Here - Ziddu.com
Extract and save the file as new-tabber-Style.css

Step2:
Now go to MyDataNest.com and upload all those 3 files. And copy all the DIRECT LINKS to these files.
NOTE: In your MyDataNest account, edit and save the properties of the folder as "hidden" and NOT as "private" where you just uploaded the files.

Step3:
Log in to Blogger
Go to "Layout" -> Edit HTML
and find (CTRL+F) this in the template code :
</head>

And immediately BEFORE/ABOVE it, paste this code:
<!--MULTI-TABBED-WIDGET-STARTS-->
<link href='http://mydatanest.com...../new-tabber_style.css' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://mydatanest.com...../new-tabber_jquery-ui-personalized-1.5.js' type='text/javascript'/>
<script src='http://mydatanest.com...../new-tabber_sprinkle.js' type='text/javascript'/>
<!--MULTI-TABBED-WIDGET-STOPS-->

Before pasting the code in to your template, replace the links in RED to the DIRECT LINKS of the files you got from step 2.

Step4:
Now save the template.

Step5:
Go to "Layout" -> Page Elements and Add a Gadget (HTML/JavaScript type)

Step6:
And finally copy and paste this code in to the new widget:
<div id="tabvanilla" class="widgettab">

<ul class="tabnav">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</ul>

<div id="popular" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div><!--/popular-->

<div id="recent" class="tabdiv">
<p>Your recent posts widget here</p>
</div><!--/recent-->

<div id="featured" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div><!--featured-->

</div>

Of course change the colored code as per your requirement.

NOTE: To adjust the width of the widget or margin around the widget or to replace the silver star with any other image, you have to EDIT the .css file (new-tabber_style.css) before uploading it to HotLinkFiles.com

So add this professional widet to your blog ASAP !

Credits for the widget: Dan Harper and NetTuts+

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

67 comments

Write comments
March 11, 2009 5:55 PM delete

Wow! dsai,
You always come with innovative tips and tricks.

Dsai I need your help!
I am trying to add marquee effect to my text at This Blog but the code isn't working here. Why whats wrong. How can I solve this problem , plz help.

Regards,
MOHD__

Reply
avatar
March 12, 2009 1:11 AM delete

very nice dude i am surely try it on my blog

Reply
avatar
March 13, 2009 3:58 PM delete

Dsai that post is of no use to my problem. I know how to add Marquee effect.but i guess there is a problem with two church template. Did you visited my blog if not plzz do , only then can you help me. I guess may be a script in my template is not allowing text scrolling. Plz help!

Reply
avatar
March 13, 2009 4:25 PM delete

Mohd, I have chekd your blog, and that is why I have given you that link....just add those additional tags(direction etc.) along with marquee, and put some more content (new lines) in between the tags.....and tell me if it's working or not !

Reply
avatar
April 10, 2009 2:39 AM delete

hey many thanks for this post!
just what i was looking for.
actually i found a nice template that has this widget included. but i will no use it cause i love width templates and is a pain to change it.

the thing with this widget is that i can´t make a tab with label (im not talking about a manual task) ,, actually if you watch this temaplte by falcon hive you find that you can make thuis widget to works with label just adding a wisget of labels.
http://www.falconhive.com/2009/03/blogger-template-bizmax.html
the demo
http://bizmax-template-hive.blogspot.com/

but i just can make this happen with only installing the widget of this guide. i think Falcon Hive tweak some things in the template but i cant find it.. no clue.

you know how can this make possible?

Reply
avatar
April 10, 2009 8:03 AM delete

Hi Maboroshine,

This widget explained here, is simple a single widget with some tabs, but the one being used at Bizmax, is actually a mix of multi-tabbed widget and 3 different widgets from Blogger, and hence you can easily add any content in the usual process, as that method is of course more tedious than this, so I can only advice you to take the manual way of adding tags etc :|
Or of course Alvaris for the code of that widget, He can better help you in this case...

Regards
Sai

Reply
avatar
Anonymous
June 21, 2009 2:08 AM delete

this is not working even in your demo.

Reply
avatar
June 21, 2009 2:41 AM delete

Don't worry, that's just some bandwidth problems,...the files uploaded by me have crossed the bandwidth limit.
You can chk this in the second demo. That's the actual author's website.

Reply
avatar
...
June 21, 2009 12:21 PM delete

Can you help? I installed this but it is not giving a tabbed effect only a single drop down?

Reply
avatar
Anonymous
June 26, 2009 2:45 AM delete

I just get a single drop down menu too. Please help!!!

Reply
avatar
Sai
June 26, 2009 8:19 AM delete

I couldn't get your points guys....drop down menu ??

Reply
avatar
Anonymous
June 26, 2009 1:04 PM delete

Yes only Drop Down Menu!...
The tab doesn't appear...
only the text does appear..
Please help!

Reply
avatar
Anonymous
June 26, 2009 1:34 PM delete

http://teknopublic.blogspot.com..
i've just uploaded the files to mediafire.com..

Reply
avatar
June 26, 2009 3:05 PM delete

Dude....do not upload it to mediafire...it doesn't give you hot links (direct links)

Only upload files to any of these websites:
BOXSTr.com
HotLinkFiles.com
SigMirror.com

Reply
avatar
Anonymous
June 26, 2009 3:22 PM delete

ok i'll fix it then..by the way buddy, thanks for the nice posts you have..i've just bookmarked you site..Thanks!

Reply
avatar
June 27, 2009 11:53 AM delete

can i just copy the whole J script & paste it to
blogger Layout>Edit HTML page, to make the second collapsible multi-tabbed widget?

Reply
avatar
June 27, 2009 12:41 PM delete

Hello Ezri,
to add the same widget second time, simply change the id's, like this:

<div id="tabvanilla2" class="widgettab">

<ul class="tabnav">
<li><a href="#popular2">Popular</a></li>
<li><a href="#recent2">Recent</a></li>
<li><a href="#featured2">Featured</a></li>
</ul>

<div id="popular2" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div><!--/popular-->

<div id="recent2" class="tabdiv">
<p>Your recent posts widget here</p>
</div><!--/recent-->

<div id="featured2" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div><!--featured-->

</div>

Reply
avatar
June 27, 2009 12:43 PM delete

@ Ezri
No need to go to the "Edit HTML" page again....you just have to go to the "Page Elements" page and add a gadget with the new code (new ids)

Reply
avatar
June 27, 2009 1:50 PM delete

Thanks a lot Sai...but i think you should see the result..http://teknopublic.blogspot.com....

Sai, could you please show me how to make double columns into my single sidebar? (two page elements into single sidebar)..

Reply
avatar
June 27, 2009 2:29 PM delete

oops sorry....forgot to mention this:
In the third file (new-tabber_sprinkle.js)

Replace the word "tabvanilla" with "tabvanilla2" and save this as a new .js file (tabvanilla2.js)
upload this file to hotlinkfiles.com
and then add 1 more line to your "Edit HTML" page:

<script src='http://.......HotLinkFiles.com............/new-tabber_sprinkle2.js' type='text/javascript'/>

(before the tag </head>)

Reply
avatar
June 27, 2009 3:42 PM delete

Many thanks to you Sai..it works well ;;)

Reply
avatar
Mia
July 30, 2009 11:35 PM delete

Hi, Divya ,
The reason the widget may not be working for many users ( on the Blogger platform ) is due to the fact that the CSS file should NOT be linked along with the .js files above the /head> element. The CSS file should be copied ( fully ) as it is once it is uploaded and then inserted as it is into & ABOVE the ]]> /b:skin> tag . The div elements of course should be applied as a widget. The widget is fully functional if applied like this ,( it works for me ) , however : if a user includes the CSS above the body> tag as a link it will NOT work . Hope this helps out :) Smile , Mootools & Jquery love you 

Reply
avatar
August 10, 2009 4:41 AM delete

Which file do you edit to change the name of the tabs?

Reply
avatar
Frankenstein Creative Inc.
August 18, 2009 2:48 PM delete

:) My question is about the other widget you have added from LinkWithin "you might also like".I too have added it but can I make this widget not appear from home page like yours.Plz help visit at http://tashiwangdi.blogspot.com/ for better glimpse.Your help will be commendable for me.I anxiously wait for your reply. O:-) 8-)

Reply
avatar
Divya Sai
August 19, 2009 10:25 AM delete

Here's the tutorial which will help you. Use the second hack, and paste the code of "LinkWithin" in between those RED lines:
http://bloggerstop.net/2008/12/show-widgets-in-only-specific-pages-or.html

Reply
avatar
September 07, 2009 1:22 PM delete This comment has been removed by the author.
avatar
September 07, 2009 1:22 PM delete

I finally was able to add the widget to my side, but now my slideshwo is not working. When I remove this widget code from the CSS, the slideshow starts working agan. Can you please tell me what to do?

Reply
avatar
September 27, 2009 2:31 AM delete

hi Divya

This tab is work ,but it has effect with my Theme! How to solve .
Thank.

Reply
avatar
September 29, 2009 12:00 PM delete

Thanks so much for this, sadly when I tried it the widget worked but it changed the theme, all the blog posts, title etc were almost halved. Do you know what I could do to stop this from happening? I have this theme...
http://thebeautifulandglammed.blogspot.com

thanks xx

Reply
avatar
September 29, 2009 8:26 PM delete

same thing happened to me, my layout was messed up

Reply
avatar
September 30, 2009 9:16 AM delete

@The Beautiful and Glammed
and
@Kenyorazzi

In the .css file (style.css)
delete these code lines before you upload it to hotlinkfiles:

body {
font-size: 75%;
color: #222;
background: #ffffff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.6em;
}

Reply
avatar
October 02, 2009 4:47 PM delete

Thanks so much for getting back to me! I tried this but it didn't work :( Anything else you can think of?

Reply
avatar
October 05, 2009 5:51 AM delete

Hi Divya, Can you add totle file in one zip file .

I am Confuse with your filename.

Thank you.

Reply
avatar
October 05, 2009 6:58 AM delete

sorry for the confusion buddy....I have just updated the post, i hope it is clear now. I cannot give a separate download link to all the files, because they are copyrighted to nettutsplus.

Reply
avatar
October 06, 2009 4:19 PM delete This comment has been removed by a blog administrator.
avatar
October 26, 2009 5:57 AM delete

hey divya,
Iam not able to get
jquery-ui-personalized-1.5.2.packed.js
sprinkle.js
files
how can we use labels,3D tag cloud and archive widgets in single multi tabbed widget

Reply
avatar
October 26, 2009 8:38 AM delete

Hello vishwanath,
download those two files from this link:
http://nettuts.s3.amazonaws.com/042_jQueryUITabs/source.zip

and the tutorial for such a tabbed-widget is here:
http://www.bloggertuts.com/2009/10/tabbed-sidebar-for-blogger.html

Regards
Sai

Reply
avatar
October 26, 2009 2:53 PM delete

I would love to have this on my blog, however, it isn't working. I saw the following comment above and believe this is the issue with my blog. How do I copy the css file as it is? I can't seem to find anything but the link on DataNest and when I try to view it in word pad etc it isn't correct. Any help would be appreciated. My blog: myfrugpractise.blogspot.com


Hi, Divya ,
The reason the widget may not be working for many users ( on the Blogger platform ) is due to the fact that the CSS file should NOT be linked along with the .js files above the /head> element. The CSS file should be copied ( fully ) as it is once it is uploaded and then inserted as it is into & ABOVE the ]]> /b:skin> tag . The div elements of course should be applied as a widget. The widget is fully functional if applied like this ,( it works for me ) , however : if a user includes the CSS above the body> tag as a link it will NOT work . Hope this helps out Smile , Mootools & Jquery love you

Reply
avatar
October 26, 2009 3:14 PM delete

Don't worry, CSS files can be linked externally, it's your wish whether to place it on your server or an external...both ways it will work.

In your blog, the file:
http://www.mydatanest.com/files/mdmarsh/17269_wqmbz/tabview.js
has been placed in a folder (at your mydatanest account) marked as "Private", please edit and save it as "hidden". Otherwise your widget will not work for anyone.

I have made a change in the code too, I hope it will work for you now.

Reply
avatar
October 26, 2009 4:06 PM delete

Wow. That was quick!

I set the folder to public and re-did the entire tutorial above (including the change in the code, I believe), but it still isn't working. Should I try placing the CSS file on my server? If so, how can I find it? If not, what else?

THanks again for your quick help!

Misty

Reply
avatar
October 26, 2009 4:18 PM delete

A small error is still there, you have uploaded the .rar file, please first extract it as a .css file, then upload it to mydatanest.com
so this link has to be changed in the code:
http://www.mydatanest.com/files/mdmarsh/18755_um2zm/new-tabber_style.rar

it should be something like this:
http://www.mydatanest.com/files/mdmarsh/........../new-tabber_style.css

Reply
avatar
October 26, 2009 4:28 PM delete

I wondered about that, but it downloads as a .rar file, I don't see anyway to change it. It doesn't come zipped. On my desktop, it has the Microsoft word icon and the words "new-tabber_style" When I click on it, it opens in word and looks crazy (not like code).

I'm sorry I'm making this so difficult. Thanks for you time!

Reply
avatar
October 27, 2009 9:01 AM delete

Yeah sorry, I mentioned it to be a zipped file, actually it is an archived file but the format is .rar
you can either download and install winrar.exe (it's much better than winzip)

or else wait for a few minutes, and I'll update the link...to a .zip file.

Reply
avatar
Misty
October 27, 2009 10:55 AM delete

Thanks so much for all your help. I figured out your "Bounce & SHare" yesterday and I love it. THanks!

This on is getting better. However, it still looks like it is all stacked on top of each other instead of being multi-tabbed. My sidebar is 300 px wide, and it looks like the widget is 280. What else could cause that?

www.myfrugpractise.com

Reply
avatar
October 27, 2009 11:08 AM delete

sorry, that is www.myfrugpractise.blogspot.com

Reply
avatar
October 27, 2009 11:31 AM delete

Add these bold lines to your code (In Step #6) to reduce the font size of tabs, it will then align in a single line:

<ul class="tabnav">
<span style="font-size: 10px">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</span>
</ul>

Reply
avatar
October 27, 2009 11:33 AM delete

Instead of 10px (10 pixels), you may also try 8px or 12px (just bring them in a single line while making sure that they are clearly visible), you may also make them bold/italics by using the tags <b>popular> or <i>popular>

Reply
avatar
October 27, 2009 11:49 AM delete

You are being so helpful...But, they are still stacking...I added the code & changed them to 8px. I even tried going as small as 4px (obviously, I couldn't read them) just to make sure, but they were still stacked. Any other ideas?

Reply
avatar
October 31, 2009 10:59 PM delete

this is viswanath
thnq very much divya
u r helping lot of people
nt only by posts but even responding by comments hatsoff 2 u
keep rocking with this blog
all the best for ur future.

Reply
avatar
November 01, 2009 3:40 AM delete

Thanks for your comment Viswanath, I'm glad you were here!

Reply
avatar
November 01, 2009 3:43 AM delete

@Misty, I am planning to change the code for this widget, I'll inform you as soon as I do this.

Reply
avatar
November 02, 2009 6:12 PM delete

Thanks. I've been looking all over for something that works. Yours is the only thing that comes close!

Reply
avatar
November 10, 2009 10:07 PM delete

this is viswanath again
i tried dat multitabbed widget but no result
they even nt responding lik u
iam requesting u dat,
can u post that article( labels,3D tag cloud and archive widgets in single multi tabbed widget) in ur own way plz

Reply
avatar
November 13, 2009 4:58 PM delete

Hello Divya! I love this tabbed widget, but I have the same problem as Misty above with my widget displaying all three tabs on top of each other. When i click on a tab it scrols down to the info it relates to. I tried to change the font size on the labels like you mentioned, but no help.

My blog is: http://jamesfoshee.blogspot.com.

Thanks in advance for your time on this. Keep up the good work.

James

Reply
avatar
December 13, 2009 1:17 PM delete

@Misty and James

I don't know whether you are still looking for an alternative of this widget, but as I have recently written an article on collapsible multi-tabbed widget, so you can refer to it.

Regards
Sai

Reply
avatar
February 22, 2010 4:49 AM delete

Thanks for your wonderful article, yes I am going to check the new innovated post by you and not this one ;)

Reply
avatar
August 17, 2010 10:40 AM delete

hey Divya! i realy cant get the hot links (direct links) from
http://www.mdn.fm/ . I tryed all the things i can do :|

i realy need your help.Cya

Reply
avatar
August 17, 2010 10:43 AM delete

nevermind! i did it!!! oh yessssss!
ty anyway ! :D

Reply
avatar
August 21, 2010 3:12 PM delete

i did the same but i failed .plz help me out

u can find your widgets in my blog and i am enjoying them a lot

http://java-galaxy.blogspot.com/#
Awaiting for ur answer

Reply
avatar
March 04, 2011 3:20 AM delete

Umm... Sir.. i stopped on the step 2:

{Also download
new-tabber-Style.rar
from Here - Ziddu.com
Extract and save the file as new-tabber-Style.css}

i got this message: :((
{File not found
The file You are looking for... may be deleted by the user or by the Adminstrator !} :((

Reply
avatar
April 29, 2011 8:10 AM delete

didnt worked..on this blog http://techiotaku.blogspot.com/
every time i try it says html could not be parsed :(

Reply
avatar
Anonymous
May 19, 2012 7:09 AM delete

3rd file is missing...what to do now...?

Reply
avatar
Anonymous
May 19, 2012 7:11 AM delete

new-tabber-Style.rar
from Here - Ziddu.com

the file mentioned above is deleted, from where I can download it...?

Reply
avatar

Comments are moderated on this blog

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

Comment Like This! and Optimize your blog EmoticonEmoticon