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:

Advanced Collapsible Multi-Tabbed Widget

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+

Leave a Reply

65 Comments on "Advanced Collapsible Multi-Tabbed Widget"

Notify of
avatar
Sort by:   newest | oldest | most voted
Mohammad Mustafa Ahmedzai
Guest

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__

View Comment
all softwares
Guest

very nice dude i am surely try it on my blog

View Comment
Divya Sai
Guest

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

View Comment
Mohammad Mustafa Ahmedzai
Guest

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!

View Comment
Divya Sai
Guest

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 !

View Comment
Ankit
Guest

Thanks !!

View Comment
maboroshine
Guest
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.htmlthe demo http://bizmax-template-hive.blogspot.com/ but i just can make this happen with only… Read more »
Divya Sai
Guest

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

View Comment
Anonymous
Guest

this is not working even in your demo.

View Comment
Divya Sai
Guest

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.

View Comment
...
Guest

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

View Comment
Anonymous
Guest

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

View Comment
Sai
Guest

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

View Comment
Anonymous
Guest

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

View Comment
Divya Sai
Guest

Your blog address ?

View Comment
Anonymous
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
Anonymous
Guest

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

View Comment
Ezri Isa
Guest

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

View Comment
Divya Sai
Guest
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… Read more »
wpDiscuz