How to create a fully widgetized tabbed content box on blogger

In this tutorial you will learn how to add a tabbed content box on your blogger blog using CSS, XHTML and Javascript in 4 simple steps it will also be fully widgetized so you can easy change colours and rearrange the widgets within your dashboard here's a simple screenshot of what we are going to create in this tutorial.

tabbed content box.

Note this will not work for those who have Javascript disabled in their web browser but most people have it enabled by default if you are not sure if yours is disabled or not check the demo you should see a working tabbed box.


If you have any questions about this tutorial feel free to ask in the comments so I recommend you use a test blog for this tutorial using the minima template or backup your template before attempting this as i cannot be held resposible if you mess up your template.

Now let me point out that I'm no Javascript expert I'm still learning so i did a little research around the internet and found a great script which does most of the work for us you can read more about it and download the script from this link look for the javascript file named tabber.js this is the script that we are going to use in this tutorial.

Now go to layout > edit html and paste the following code just before the closing </head> tag making sure you replace the red comment with the full contents of the tabber script you downloaded by opening it with a simple text editor.

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
/* paste the full contents of your tabber script here */
//]]>
</script>


next find the <div id='sidebar-wrapper'> just below there add the following code

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
</div>

in the code above we have added 3 tabs if you would like more tabs it's just a matter of copying one of the sections and pasting it below the other making sure you change the id to tab4 and so on since section IDs must be unique.

Now we need to add some CSS code for the structure and style of the tabs so copy the following CSS code and paste it in your template just before the body CSS code

/* start tab styles */
.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;
}
/* end tab styles */


in the CSS code above i have declared 4 variables named tbbxbgcolor, tbbxbrcolor, tbbxcolor1 and tbbxcolor2 so we can easy change colours of the tabbed content box from within the fonts and colours tab the width of the tabbed box will span to whatever width your #sidebar-wrapper is set to if you know CSS you could hard code the hex colour codes and tweak things further to your liking.

So now we add the final code to define the variables we just declared so copy the following code and paste it at the top of your template with the rest of the variable definitions

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

now save your template and go to the page element tab you should see something like the screenshot below.



add a widget in the tabbed section then click the numbers to change tabs so you can add more widgets in the sections do not forget to save your template before viewing your blog to change colours of the tabs go to the fonts and colours tab you should see something like the following screenshot below.



Now you should have a fully widgetized tabbed content box i hope you enjoyed this tutorial comments are welcome see my result

65 Responses to “How to create a fully widgetized tabbed content box on blogger”

Anonymous

May 24, 2009

would this work on typepad?

@Anonymous
i do not use typepad so i wouldn't know however it should work in most cases you may need to use different codes it could be created from pure CSS, XHTML and Javascript without been widgetized i recommend you read the full documentation

Anonymous

May 24, 2009

thanks! for some reason I could only comment anonymously. thanks again yaelmiller.com

I was just looking for this tutorial like hell and thks God I found you. Its a highly remarkable and attractive widget thks for sharing

Wow, nice tutorial dude, i was searching for something like this :)

lawny how can I prevent all posts from opening on loadup and on page refresh?
I mean when my homepage loads all tab content opens at once! then after page-load completes the widget gets to normal. I hope you understood what i mean to say

@Mohammad Mustafa Ahmedzai
maybe you have missed some of the code what is the url of the site you are using this on ?

Hi, this one's my favorite, thank you so much, I'll implement this soon. Thank you

I cant access the tabbr.js.
It says me forbidden ..

Oh thanks a lot. Though the link was forbidden. I took the tabbar js from your demo page.. thanks a lot

now it is working.

Ok How can I use this for posts. Let me make it more clear. Like I want to show each of labels in a tab and related posts in the tab body. This would be very much helpful. thanks in advance..

@Iftee
Thanks for letting me know about the forbidden link i will get that sorted out as for showing labels in a tab with related posts in the tab body i have not tried it but i think it would be possible

thanks a lot for your response. I was thinking of a TAB BAR containing the labels as the tab headers and related posts on its body. thanks again

Thanks a lot for sharing. Can't seem to get it to work. I don't understand why the smart ones who know how it works don't provide the full html script for the page instead of asking us retarded people to find tags and insert here and there. I use the minima template and just want to add the stupid tabbed widget. Can't figure it out though because i'm dumb.

@Brad
why can't you install it what problem are you having ?

Now the tabber script site is open. http://www.barelyfitz.com/projects/tabber

this link is working now..

@iftee
i noticed that yesterday thanks for letting me know

Super cool tutorial...big fan!

thanks a lot man
this was d best creation eva
peace out!

great i`m doing it right now
thanks

Hi Lawny! First of all I wanna say thanks for taking the time & effort for putting this up :)

Secondly can u kindly look at my blog:
http://wanieidayu.blogspot.com

I have a few questions:
(1) How to make the box background transparent.
(2) How to put color on the tab only, & not effect the display box (coz I want the box color to be transparent)
(3) How to change the font color coz I tried to create a new variable for font color, but I don't know where to place it in the style
(4) How to make rounded corner for the tab
(5) How to remove the "star" from my heading

I know these are a lot. But I really hope you can help. Thanks in advance! :)

@Wanie
to make the box background transparent find the following CSS

.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}

remove the background CSS so it becomes

.tabberlive{
margin:0;
padding:5px;
clear:both;
border:1px solid $tbbxbrcolor;
}

it works same for the tabs

.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}


look in the CSS code don't be afraid to break things create a test blog from within your dashboard and play around with the CSS code I'm sure you will figure out how it works

thanks friend for this script. I am looking for this many days. Thanks a lot.

Two questions, Lawny:

1. I couldn't find this code in my HTML: [div id='sidebar-wrapper']. Would it be this? [div id='column_wrapper'] Or this? [b:section class='sidebar' id='sidebar-top']

2. You say "Now we need to add some CSS code for the structure and style of the tabs so copy the following CSS code and paste it in your template just before the body CSS code." Will you tell me what to look for in terms of the "body CSS code"? I am kind of a novice so I'm not totally sure. I really appreciate it!

@Beth
since you are using a different template from the one described in the tutorial you could add the code below the <div id='column_wrapper'> what i mean by the "body CSS code" is add your CSS just after the body's CSS it looks something like the following code

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

so you would add your CSS here

Wow...this is great tutorial about tab menu! i will using this tips on my blog! many thanks!

Thank you...Hey this was very helpful!

However I do have one question how can i position the widget box, so it is not directly at the top of my side bar?

Hey Lawny...

This post is very helpful...

But I have a question about positioning....how do i position the widget, so it is not locked at the top of my sidebar?

if you can help me do that, this is will really help me find what i am looking for: simplicity and flexibility.

@FACET GIRL
paste the code at the bottom of the column instead of the top

Thank you,

but this only moves it from the top of my sidebar to the bottom.

I will like for it to be somewhere in the middle...with elements above and below it.

any tips on how to attain that? =)

@FacetGirl
you need to create a section above and below the widget

Hi Lawny thanks for the tab script its really great and its working for me but i have a small problem i dont know anything about html coding so i am not able to insert names for my tabs like "about me" "archive" which are on ur test blog its showing "1" "2" "3" like that which is very anonying can u please help me with that.... i did be very grateful

and please have a look at my blog to know exactly what i am pointing out
www.adi-software-center.blogspot.com

Hi, thanks for the great tutorial, it's been really interesting working my way through it as a total novice at this kind of thing :) I was wanting to ask a couple of questions though - firstly, I'd like to remove the vertical overlapping the tabs do when they wrap down if they exceed the width of my sidebar, it makes reading the back tabs difficult. Secondly, how do I stop them breaking over a title of one of the widgets? For example I'm ending up with "My Blog [next line of tabs] List". Thanks again!

@Aditya
you need to enter the title inside the widget for the numbers to disappear

@Jacqui
you need to tweak the CSS code yourself if you want to alter the look of the widget as i don't have time to show you how to do it

I could complete the final stage --to find CSS in my blog.
regards
Remaung6Renjer

@Remaung
what problem are you having with the code ? the CSS is at the top of the template

Thank you! I was able to find a tutorial on how to add an additional side-bar widget, so with your multi-tab...it works well.

Thanks alot!

Where can i find the CSS body code???? pls reply thanks

@PRC Board
someone has already asked this question see this comment

Amazing! I got it on my second try =]
Thank you for the great tutorials!

*Thank you* so much! I've looked at and tried about six of these tabbed widgets... most of them are not really for Blogger, not "widgetized" or they just don't work or are not very very flexible. This one has it all!

Where it says "So now we add the final code to define the variables we just declared so copy the following code and paste it at the top of your template with the rest of the variable definitions"..... at the top of what. I don't have other variables.

@DJD
you could add the colour hex code's to the CSS code instead of using variables for example

.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#58a;
border:1px solid #f00;
}

in the CSS code above have use a light blue background with a red border

Hi.
May I know what is meant by tabber script???
And where to download that from??
plz help. I am a newbie to this field.

How do I change the name of the tab??
And how to make drop menu??
Plz help.
Thanks in advance.

@Anonymous
the link for the script is mentioned in the tutorial
@Destroyer
enter the title inside the widget like you normally would i have already wrote on how to add a drop down menu

Thanks for the great tutorial, how would i add another of the menu boxes to the same sidebar? what would i need to paste where? thanks :)

@tkf247
duplicate the code then change the id's of the tabs

Lawny, I just can't get this to work and I'm not sure why. I followed the instructions, but I have already made many changes to my template, so who knows what I've done wrong. I'm clearly messing something up. How much would you charge to log in and see if you can figure out what I've messed up?

nice tutorial... thanks for sharing about it.

@Beth
contact me via email

thanks for the great tutorial!! It works fine on my site..Much easier to understand for a newbie like me..More power!!

hi lawny
its me aamir. i have a question. dear on the top of my blog there are some buttons already added

Home Posts Rss Comment Rss Edite

i want to change these buttons into

Home Computer Softwares Mobile Softwares


can you help me Please. I m realy new and will b realy thankfull for ur help

Thanks for the tutorial. It's working well, but I've got two problems. It takes too long to load, and it has rounded corners. Can you help me?

hi Lawny...
i want ask u some questions...
what u mean with "making sure you replace the red comment with the full contents of the tabber script you downloaded by opening it with a simple text editor."

i dont understant at all what must i replace the red comment, and where must i get it the "tabber script" and where i can i download it??

**sorry for the noob question but hope u can help me...

;DD

thanks for this great step by step tutorial. Could this tab content work within a post?

Thank you so much! I have already done it.

Anonymous

June 23, 2010

The tabber works great thanks but for some reason 1 2 3 is not showing up in Page Elements just a column of add a gadget. What might be the problem? Thanks for a nice widget

Lawny - I have tried this a few times but this is the message I am getting.

Invalid variable declaration in page skin: The skin variables could not be parsed as they are not well-formed. Input:

Any ideas?

@JH
have you checked your code to see if you have made a mistake somewhere within the variable declaration code ?

I'm getting the same as JH. Checked it and it's a direct copy/paste from what you have listed... thoughts?

Hi there...
a little problem here... it doesn't even load in IE while in Firefox loads really slowly. Can you please teke a look over here: http://tsak-giorgis.blogspot.com/ and give me some suggestion? Apparently something is wrong but i can not find it out. Thanx in advance.

@J. Paige
i have just tried this as of today and it works fine for me however i have not tried this with the templates built for the template designer.

@Ιοκάστη
the demo works fine so you should double check your code as i really don't have the time to look through your code.

I wish this worked on the new blogger templates! I've tried four different times to get figure it out but no luck. I keep googling this trying to find someone to help me, but still nothing. Would love to add this...oh well. *sigh*

Hey, can you please help me with how to highlight the javascript box as you did which is coated in cement color :) plz help me if you can...

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2016 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger