ADVANCED MULTI TABBED WIDGET FOR BLOGGER – FULLY WIDGETIZED!

This is a fully widgetized i.e you can add Popular Posts, Labels/Tag Cloud, and Recent Posts Author Profile or other blogger official widgets to it. It is quite beautiful and a more flexible and advanced tabbed widget stylized by Lawny Designs and scripted by Barelyfitz. I got this from My Blogging Tricks Blog, and thought it wise to share it with you. Lawny’s tutorial has been modified with a few changes made to the code so to make it even simpler to newbie bloggers. And for the Pros, you just play with the codes.

I know by now you probably looking for the VIEW DEMO button. Lol! You don’t need it. It’s there hanging on my sidebar.

I took the first step of implementing it on my blog. It looks good, reduces space congestion and more space for Ads J! Squeeze up my Popular Posts, Labels/Tag Cloud, and Recent Posts into one Multi Tabbed Widget. That’s real wise… especially when I covet more space for Ads ;p. NOW LETS ROCK!!!

HOW TO ADD THE CODE

To add this cute multi tabbed widget to your Blogger blog, please follow these steps meticulously.

Go to Blogger >> Layout >> Edit HTML
Click inside the HTML Editor, with your keyboard keys, press CTRL + F
Search For

And paste the following code just above it,

DONE? Now to step 4.

4. Search for ]]>

tag and paste this code just above it.

/*---------- Tabber Start-------- */

.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}

/*------- Tabber End--------*/

DON’T SAVE YOUR TEMPLATE YET.

5. Now search for Variable definitions and paste this code with other variable definitions,

NOTE: If you can’t find Variable definitions, search for #navbar-iframe and paste this code below #navbar-iframe { Some text here }

/* Variable definitions
====================

UPDATED PART:

6. Now the final part. Search for and paste this code just below it,

7. Finally save your template and visit Layout > Page Elements to start adding widgets to the tabs! It will look something like this,

The widgets are arranged number wise. Starting from Tab-1 and ending at Tab-4. To add a gadget/widget to any tab simply click the link Add a Gadget and start adding whatever you want.

8. Finally view your template to see it hanging!:)

Customization Guide To Multi Tab Widget

Here we will discuss how to change the Look and position of this multi tabbed widget.

Changing Position:

To shift this tabber widget to the bottom section of your sidebar rather at the extreme top, do this,

Paste the code in Step#6 just above

and not just below
As shown in the image below,

Save your template and go to Layout > Page Elements to see if it has shifted to the bottom.

Changing Look and Feel:

The background colours of the widget can be changed by editing the code in step#5. I am rewriting the code here with some description.

tbbxbgcolor

" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">

tbbxbrcolor

" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">

tbbxcolor1

" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">

tbbxcolor2

" description="Tab box Color 2" type="color" default="#289728" value="#289728">

This code has four main sections amongst which the sections tbbxcolor1: and tbbxcolor2: are the most important. Read on to get a more detailed description of each one.

Important Sections:

tbbxcolor1: This is an important section. It defines the background colour of this multi tab widget and also the colour on mouse hover. The default colour is white i.e #ffffff

tbbxcolor2: This refers to the background colour of the tabs and the text inside the tabs. the default colour is green. You can change the value #289728 to a different colour value using our color chart

CHANGE THESE ONLY IF YOU WISH:

tbbxbgcolor: This section refers to the background colour of the tab box. By default the colour is grey. If you wish to change it to a different colour simply change the hexadecimal colour value #f8f8f8 to something different using our Color Chart

tbbxbrcolor: This refers to the border line color across the tabs and the box.

I hope this widget will help a lot in giving a clean and neat touch to your blogs.

Got Any Question and/or Suggestion? Drop in the comment BOX below.