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.


Working Demo | [DEMO - Widget 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-@-http://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="http://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.