Nice blogging tip from http://ini-how.blogspot.com
Multi-Tabbed is very helpful if you wanted to save space on your blog. At the same time it is provide some vital information your blogs visitors are looking for. So having a multi-tabbed widget in your blog helps your visitors easily find what they are looking for like for example, the most popular post, recent post, and others.
Instructions 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="hollywoodmoviestowatch.blogspot.com" target="_blank">Hollywood Movies to Watch</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.
