Tabbed Widget For Recent Posts, Labels & Archives

About this Tutorial:-
This Great Tutorial is Originally written by Amanda and is available on here blog "www.bloggerbuster.com" through this >Link<. (Thanx Amanda for such a useful Tutorial)
I have used another method to apply this hack. Although the procedure is few steps lengthy but its error free (I Hope So) because the code in the Step 4 is very short. So the chances of error are very very less.

Changes made:-
In the original Tutorial blogger feed was used for Recent Posts. Which is restricted to 5 Recent Posts only. If you follow this Tutorial then you can use your FeedBurner feed also instead of blogger feed. In which u can have as many Recent Posts as u want.

Benefits Of Using This Widget:-
This tabbed widget includes integrated Tabs for recent posts, labels and archives. This customization will organize your blog's widgets and will reduce the space used in your sidebar. And it looks very stylish too.

It is very easy to install and use tabbed sidebar navigation, but may be much more complicated to make this match the style of your own template.For this reason, the style code used for the tabbed widgets, along with methods you could use to change the appearance for your own blog are also explained

Now Lets Start

Step One: Backup Your Template!

When customizing your Blogger template, it is standard practice to back up your existing template first! This ensures you can revert back to your working template if you make a mistake. It is especially important with this customization as you may not notice such mistakes when previewing your design.

To back-up your Blogger template, go to Layout>Edit HTML and click on the "Download full template" link near the top of the page.

You will be prompted to save a copy of your blog template as an XML file to your computer. Be sure to save this to a location where you can easily find it if required.

Step Two: Adding CSS Code

For this initial step of installing tabbed sidebar navigation, we will add the relevant style code. With this in place, it will be easier to see how your tabs will work.

To add this style code, find the closing </b:skin> tag in your template's HTML code.

Just BEFORE this line, paste the following section of code:
Note: Before pasting the below code make the following change.

search for color:$linkcolor;

and replace the "$linkcolor" with the color that u want the link to the recent post should have.
For example if u want that the link to the post in the widget should be be black then simply replace "$linkcolor" with "#000000" with out quotes.

div.domtab
{
padding:0;
width:100%;
font-size:90%;
}
ul.domtabs
{
float:left;
width:100%;
margin:0;
list-style:none;
padding-left: 0;
}
ul.domtabs li
{
float:left;
padding:0 5px 0 0;
text-align: center;
width: 110px;
}
ul.domtabs a:link,
ul.domtabs a:visited,
ul.domtabs a:active,
ul.domtabs a:hover
{
padding:.5em 1em 0;
display:block;
background:#999;
color: #333;
height:2em;
font-weight:bold;
text-decoration:none;
}
html>body ul.domtabs a:link,
html>body ul.domtabs a:visited,
html>body ul.domtabs a:active,
html>body ul.domtabs a:hover
{
height:auto;
min-height:2em;
}
ul.domtabs a:hover
{
background:#ccc;
}
div.domtab div
{
clear:both;
width:auto;
color:#ddd;
padding:0 5px;
margin: 0 0 1em 0;
}
div.domtab div .sidebar-tab, div.domtab div .sidebar-tab .widget-content
{
margin: 0 0 0;
padding: 0;
}
ul.domtabs li.active a:link,
ul.domtabs li.active a:visited,
ul.domtabs li.active a:active,
ul.domtabs li.active a:hover
{
background:#ccc;
color: #333;
}
div.domtab div .sidebar-tab ul li {
list-style: none;
padding: 3px 0 5px 0;
}
div.domtab div .sidebar-tab ul li a
{
list-style: none;
margin: 0;
padding: 0;
}
div.domtab div .sidebar-tab ul
{
width: 100%;
margin: 0;
padding: 0;
}
#domtabprintview{
float:right;
padding-right:1em;
text-align:right;
}
#domtabprintview a:link,
#domtabprintview a:visited,
#domtabprintview a:active,
#domtabprintview a:hover
{
color:#ccc;
}
div.domtab div a:link,
div.domtab div a:visited,
div.domtab div a:active
{
color:$linkcolor;
padding:1em .5em;
font:bodyfont;
text-decoration: none;
}
div.domtab div h2 a,
div.domtab div h2 a:hover,
div.domtab div h2 a:active
{
color:#cfc;
display:inline;
padding:0;
font-weight:normal;
font-size:1em;
}
body#layout #sidebar-tabs-1 .widget,
body#layout #sidebar-tabs-2 .widget,
body#layout #sidebar-tabs-3 .widget {
display: block; clear: both;
}
div.domtab div {display: block; clear: both;}

Be sure to copy all of the code inside this box before you paste this into your template.

Step Three: Add JavaScript Code to the Head Section of your Template

The tabbed navigation requires JavaScript to switch between the different widget areas. To add this functionality to your template, locate the closing </head> tag in your template, and paste the following lines of code immedietly before this line:

<!--[if gt IE 6]>

<style type="text/css">

html>body ul.domtabs a:link,
html>body ul.domtabs a:visited,
html>body ul.domtabs a:active,
html>body ul.domtabs a:hover
{
height:3em;
}
</style>
<![endif]-->
<script src='http://files.trickstutor.co.cc/uploads/2/1/4/1/2141293/domtab.js' type='text/javascript'/>

If you prefer to host the JavaScript required for this customization on your own server, feel free to download the script and alter the tags above to reflect the location on your own server.

Save your template at this point.

Step Four: Add The Required Code to your Sidebar

For this step, you will need to find the opening DIV tag for your sidebar.

In most Blogger templates, this tag will appear like this (highlighted in red):

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar-top-section' preferred='yes'>

<b:widget id='HTML3' locked='false' title='Subscribe' type='HTML'>

However, you may need to be creative! In some templates, the sidebar section is coded like these examples, or possibly something else entirely!

• <div id='sidebar>
• <div id='right-column'>
  
  

Whatever the opening DIV for your sidebar section appears like, you need to paste the following section of code immedietly after it, and before the opening <b:section> tag:

<div class='domtab'>
<ul class='domtabs'>
<li><a href='#recent'>Recent Posts</a></li>
<li><a href='#cats'>Categories</a></li>
<li><a href='#arc'>Archives</a></li>
</ul>

<div style='border: 3px solid #ccc;'>
<p><a id='recent' name='recent'> </a>
<b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'/></p>
</div>

<div id='toggleText' style='display: none; border: 3px solid #ccc;'>
<p><a id='cats' name='cats'> </a><b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'/></p>
</div>

<div id='toggleText' style='display: none; border: 3px solid #ccc;'>
<p><a id='what' name='arc'/>
<a id='arc' name='arc'> </a><b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'/></p>
</div>

</div>

Note:-
I have added the red colored code inside the DIV, which will prevent the opening of all the tabs at once during first loading or Refreshing.

Again, be sure to copy all of the code in the scrolling box above before pasting this into your template.
Now, preview your template. If you have made any errors when copying and pasting the code, you will be unable to preview your template. In this case, click on the "Clear edits" button near the bottom of the page and begin again, ensuring you have copied all of the code from the box above. Be sure you paste your code between the opening DIV tag for your sidebar and the opening b:section tag.

If your installation is successful, you will see a tabbed section above your regular sidebar widgets.Like the one in the below picture.

Step Five:

As the tabbed section is empty i.e only tabs are showing so we will now configure it to show.
=>Recent Posts
=>Categories
=>Archives

In your Blogger Dashboard Go to Layout>Page Elements and look out for the new widget section which should appear like this:

1) Click on the "Recent Posts" link and add then click on "Add a Gadget". It will Pop-up a new window. Select "Feed"

Enter your "Feed" Url which should be like that.

http://YOURBLOG.blogspot.com/feeds/posts/default

Customize it the way u want it to look and save it.This will add your recent posts to your tabbed widget.
You can also use FeedBurner Feed here. For this purpose choose HTML/JavaScript Widget instead of FEED and paste your FeedBurner code there and save it.

2) Now click on the "Categories" link and then click on "Add a Gadget". It will Pop-up a new window. Select "Labels"

and save it.

3) Now Click on the "Archives" link and add then click on "Add a Gadget". It will Pop-up a new window. Select "Blog Archive"

Customize it according to your own choice and save it. Congratulations Your Tabbed Widget Is Ready Now.

Step Six: Customizing the Appearance of your Tabbed Widgets

Depending on the template you are using, this may be the most complicated step of installation!

The default style code I have offered in this tutorial will be suitable for pale templates with a wide sidebar. If you have a narrow sidebar or different color scheme, you will almost certainly need to change some elements of the style!
Here are the most prominent style issues, and what you can do to resolve them:

The tabs appear on top of each other

This will happen if the combined width of your tabs is wider than the width of the sidebar area.

To alter this, you will need to change the width for the tabs. Here is the section of code you need to change:

ul.domtabs li{

float:left;

padding:0 5px 0 0;

text-align: center;

width: 110px;

}

Reduce the width to a smaller pixel value. For example, if your sidebar is 200px wide, change the tab width to 60px. Then the combined width of the three tabs will equal 180px and allow for space between them.

Changing the color of borders and tabs

In the code for this tutorial, I have used two shades of grey for the border and tab colors:

• #ccc is the paler grey
• #999 is the slightly darker shade

Using your browser's search function, you can locate all instances of these colors in the style section of your template and replace these with the hex values for your preferred colors instead.

Over to you!

As it is mentioned at the beginning of this tutorial, different template designs may require different methods for customizing the appearance of your tabbed widgets. To offer support, a thread has been created by the original author in the Blogger Buster forums specifically for help with this tutorial.

I hope this tutorial has provided a good explanation of how to install tabbed navigation in your Blogger template! Please feel free to leave your comments and opinions about this tutorial, or if you have suggestions for how this may be enhanced.