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+

65 thoughts on “Advanced Collapsible Multi-Tabbed Widget

  1. 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
  2. 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
  3. 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?

    View Comment
  4. 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
  5. 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>

    View Comment
  6. 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>)

    View Comment
  7. 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 ο£Ώ

    View Comment
  8. πŸ™‚ 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:-) 😎

    View Comment
  9. @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;
    }

    View Comment
  10. 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

    View Comment
  11. 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.

    View Comment
  12. 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

    View Comment
  13. 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!

    View Comment
  14. 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.

    View Comment
  15. 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?

    http://www.myfrugpractise.com

    View Comment
  16. 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>

    View Comment
  17. 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>

    View Comment
  18. 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?

    View Comment
  19. 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

    View Comment
  20. 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 !} :((

    View Comment

Leave a Reply

Your email address will not be published. Required fields are marked *