Collapsible Multi-Tabbed Widget For Blogger Blogs

*UPDATE: 24 new skins are available for this widget. Check out Collapsible Multi Tabbed Widget – Part2 to select the best theme for your widget.
This tutorial will help you to add a multi-tabbed widget to your blog. You can use this widget to display more content in less space using the tabs.

Blogger_Tabber_Widget
Working Demo | [DEMOWidget Part 2]
To add it to your blog, your task is as simple as copy and paste. At the same time the widget is highly customizable and you can easily change its appearance to match your blogs theme.

Instrucions to follow:

STEP #1:
Log in to Blogger and go to Layout -> Edit HTML and find this code in your blog:

</head>

Immediately ABOVE/BEFORE it, paste this code:

<!–COLLAPSIBLE-MULTI-TABBED-WIDGET-STARTS–>
<link type=”text/css” href=”http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.all.css” rel=”stylesheet” />
<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>
<style>

.ui-tabs-selected a {
background-color: #fff;
color: #000;
font-weight: bold;
padding: 2px 8px 1px;
border-bottom: 1px solid #fff;
border-left: 1px solid gray;
border-right: 1px solid gray;
margin-bottom: -1px;
overflow: visible;
}
#fragment-1 {
background: #999900; //Background color of content area 1 (tab 1)
color:#FFFFFF; //Text color in content area 1 (tab 1)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-2 {
background: #CC9900; //Background color of content area 2 (tab 2)
color:#FFFFFF; //Text color in content area 2 (tab 2)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 {
background: #666666; //Background color of content area 3 (tab 3)
color:#FFFFFF; //Text color in content area 3 (tab 3)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 a {
color:#FFFFFF; //color of HYPERLINKS in content area 3 (tab 3)
}

</style>
<!–COLLAPSIBLE-MULTI-TABBED-WIDGET-STOPS-HELP-@-https://bloggerstop.net–>

The code highlighted in RED will control the appearance of the tabs. And the code highlighted in BLUE will control the appearance of the content area. To make your work easy, comments are written in front of the code above (highlighted in GREEN color).
Now save the template.

STEP #2:
Now go to Layout -> Page Elements
Click on Add a Gadget and select it as HTML/JavaScript type
And paste this code into it:

<div id=”tabs”>
<ul>
<li><a href=”#fragment-1″><span>Best Posts</span></a></li>
<li><a href=”#fragment-2″><span>My Pictures</span></a></li>
<li><a href=”#fragment-3″><span>Recent Posts</span></a></li>
</ul>
<div id=”fragment-1″>

<span style=”text-align:left;”>
<p>First tab is active by default:</p>
</span>

</div>
<div id=”fragment-2″>

<center><a href=”http://tinypic.com” target=”_blank”><img src=”http://i29.tinypic.com/29ggyu0.jpg” border=”0″ alt=”Image and video hosting by TinyPic”></a></center>

</div>
<div id=”fragment-3″>

Content of Tab #3

<br/><span style=”font-size: xx-small;”><a href=”https://bloggerstop.net” target=”_blank”>Blogger Widgets</a></span>
</div>
</div>

Now before you save the widget, change the text in RED to change the names of tabs and change the text in BLUE to change the content of the tabs.

Save the widget and enjoy more content in less space.

This post has been written to replace the previous tutorial on advanced collapsible multi-tabbed widget.

Leave a Reply

64 Comments on "Collapsible Multi-Tabbed Widget For Blogger Blogs"

Notify of
avatar
Sort by:   newest | oldest | most voted
Rabih Zein
Guest

ooooooooo!!!1 awsome!!!! finally something that works!!!!! wooow, really caant thank u enough. i will be tweaking the colors, and im ready.
thanks a million

View Comment
Anonymous
Guest

any idea how to change the headlines into:
recent posts
recent comments
(of course i want them to be automaticaly updated)

View Comment
vinoth-contests and freebies
Guest

Hey sai,when i open the working demo,it shows access is denied ๐Ÿ™

Can u see waht is the problem and rectify it.I want to see how it looks like.maybe some problem with datanest?

With regards
vinoth
Contests and freebies

View Comment
Winoath
Guest

Hey Sai,

I saw this 200 $ giveaway banner on ur blog,did u trust that site ?
I even saw that on all google ads.do u trsut that one so that i can also particiate and win,.

another thing..check the end of the page
http://www.jewelryartdesigns.com/jewelry-jad.asp?p=Win-Jewelry&xref=bloggerstop.net

We choose the winner of our yearly draw in exactly the same way. The next annual draw will occur October 1st 2010. Good luck to everyone!

I have a Contests blog ,i am awaiting your reply so that i can also tell it to my blog users.

View Comment
Ms Hetal Patil
Guest

Hello Divya,

Can we change font size, color and style of tab headings ?

View Comment
Divya Sai
Guest
@RabinYou are most welcome buddy ! @AnonymousIn STEP #2replace the RED colored headings.Then replace the blue colored code with the that of Recent Posts and Popular Posts @VinothThanks for informing me, I have now adjusted the settings. Now the demo will be displayed to you. @WinoathThat's a sponsor of mine. I have read that page, and along with that annual draw, they have monthly draws too in which any random blogger is given $200. The previous winners blogs are mentioned in that page, if you want you may confirm the reliability with these winners.Anyways the only requirement is placing a… Read more »
Divya Sai
Guest

@Hetal Patil,
In step #1
modify the code in red to adjust seleccted-tab's settings.
I saw exactly this widget with awesome modifications somewhere, I'll give the link after a few hours.

View Comment
Divya Sai
Guest

@Hetal

Check out the Part-2 of this post, I hope you'll find the tab-menu of your choice now.

View Comment
Ms Hetal Patil
Guest

Hello,

Thanks for the update Divya. I have a question off the topic – how can we put a line in a post (as you have used for update in the above post) ?

View Comment
Sai @ Blogger Help
Guest

Use this code, wherever you wish to insert a line:
<hr />

View Comment
BEBEN
Guest

๐Ÿ˜€

View Comment
Ms Hetal Patil
Guest

Thanks ๐Ÿ™‚

View Comment
Chasteยฎ
Guest

Thank You!

View Comment
Marcus Ng
Guest

THANK YOU SO MUCH for sharing.
I attempted to copy the code from "edit html" to one link list to paste it in blue area ( step 2) and it wasn't working.
My blog is at ngmarcus.blogspot.com.
As you can see I have the MultiTab on the right and I wish to Bring the contents of the Link List Inspirations, Home Mates Friends and Blog archive all into the multiTab. is it possible? thanks for your time

View Comment
Divya Sai
Guest

Hi Marcus, although it is working in your blog, but the problem is the blue area in your blog (your sidebar) is not wide enough to use long names in the tabs like "Inspirations, Home Mates Friends and Blog archive". How to resolve the issue:
1. Try some short names and it will align perfectly.
2. Or you can increase the width of the sidebar.
3. Or you can drag this widget above your posts area, where the width is sufficient to use quite longer tab names.

View Comment
Marcus Ng
Guest

cools thanks alot for your fast response!!

View Comment
kooorafs
Guest

thank's i just inserted in my blog http://www.a2zabsorbe.blogspot.com/
check it out..

View Comment
Divya Sai
Guest

Great work buddy!
the comments with a blue background looks really cool…

View Comment
Nancy
Guest

how do you get customized content in each tab? I tried opening the widgets I wanted to embed under each tab into the multi-tab code but it didn't work. I'm just setting this blog up so there's no content yet. http://www.shematters.me

View Comment
Divya Sai
Guest

Hey Nancy,

In Step #2 REPLACE the entire text highlighted in BLUE-color with any text/image you like.

View Comment
wpDiscuz