March 11, 2009

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+


67 comments:

Mohammad Mustafa Ahmedzai said...

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__

all softwares said...

very nice dude i am surely try it on my blog

Divya Sai said...

Hi Mohd,
You can read this tutorial on:
Auto-Scrolling Text And Images

Mohammad Mustafa Ahmedzai said...

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!

Divya Sai said...

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 !

Ankit said...

Thanks !!

maboroshine said...

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?

Divya Sai said...

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

Anonymous said...

this is not working even in your demo.

Divya Sai said...

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.

... said...

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

Anonymous said...

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

Sai said...

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

Anonymous said...

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

Divya Sai said...

Your blog address ?

Anonymous said...

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

Divya Sai said...

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

Anonymous said...

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

Ezri Isa said...

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

Divya Sai said...

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>

Divya Sai said...

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

Ezri Isa said...

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

Divya Sai said...

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

Ezri Isa said...

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

Mia said...

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 

snam said...

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

Frankenstein Creative Inc. said...

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

Divya Sai said...

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

Africa said...
This comment has been removed by the author.
Africa said...

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?

Admin said...

hi Divya

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

The Beautiful and Glammed said...

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

kenyorazzi said...

same thing happened to me, my layout was messed up

Divya Sai said...

@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;
}

The Beautiful and Glammed said...

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

Admin said...

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

I am Confuse with your filename.

Thank you.

Divya Sai said...

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.

Arafin said...
This comment has been removed by a blog administrator.
viswanath said...

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

Divya Sai said...

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

Misty said...

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

Divya Sai said...

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.

Misty said...

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

Divya Sai said...

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

Misty said...

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!

Sai @ BloggerStop said...

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.

Misty said...

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

Misty said...

sorry, that is www.myfrugpractise.blogspot.com

Divya Sai said...

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>

Divya Sai said...

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>

Misty said...

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?

free downloads@ nanoguns9 said...

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.

Divya Sai said...

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

Divya Sai said...

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

Misty said...

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

free downloads @ naoguns9 said...

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

free downloads @ naoguns9 said...

thnq in advance sai

James Foshee said...

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

Divya Sai said...

@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

Poker Blog said...

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

♫ mary ♪ said...

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

♫ mary ♪ said...

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

java said...

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

MUXLIMO said...

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 !} :((

TechiOtaku said...

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

Anonymous said...

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

Anonymous said...

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

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

:)) ;)) ;;) :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