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
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
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
- 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.
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.
Post a Comment