One of the space efficient widget for blogs, is of course a multi-tabbed widget, which is almost a must for any blog. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like.

Although you can find some other methods on Internet, but they are all quite confusing, so you can use this method, which is quite easy, but of course needs to tweak the template.

The complete process has mainly two steps:

1. Firstly, Log in to Blogger. Now go to Layout and then click on "Edit HTML" tab.

Then download the present template as a backup.
Now find [CTRL+F] this code:

I've successfully added the above code to the main blog area of my blog and tweaked it very nicely. Now I want to add a second one of the same in my sidebar but that seems not to be possible. How can I make i work? Can I rename something in the widget/style code and make it work?

Dear admin,I want to build a tabbed menu just like that.I want to put links to labels in tabs section and want the tabs to show content automatically.here is the sample link.u will see a tabbed menu there.http://divxmoviez4u.blogspot.com

http://dvbcbc.blogspot.com/ this is the test page I have been trying your widget for hours.as u see ,I cannot put chatbox and mp3 player in different tabs.although I put the codes in their own contents section.besides as I said before,I want ur widget to expose posts automatically according to their labels in each seperate tab.Thank u very much from now on.

For placing labels:As this widget, is a very simple and easy hack to get a multi-tabbed widget, so there are some limitations to it.

This widget is actually a simgle widget, with 3 different sections, so placing widgets like archives, labels etc which themselves are complete widgets, so it is not directly possible

So if you want to place the labels in it, u can do this:1. If labels are less in no., then u can simply type them and hyperlink them to the respected links.

2. If there are many labels, then first of all add a labels widget normally (separately), in any widget. Then open your blog in FIREFOX, and copy them all(labels). (In FireFox, you can copy hyperlinked text.)Then go to CREATE A NEW POST, and paste the labels as it is, then click on "Edit HTML" tab, so now you can copy the HTML code for all labels links, then you have to copy and paste this code in the widget's tab.

You can check out the code for a blog with three tabbed menus in action at meetinginmusic.blogspot.com (Just right-click somewhere and choose "View Source")

As you can see I just added a "2" or a "3" after all the "TabView" or "Tabs" I could find in Divya Sai's code above to make it work with three menus. Also remember to add a seperate style for each menu. Don't know if it is actually necessary but I did and it worked. Just remember to assosiate each menu to the coresponding style.

I just want to add this point:if u want to have more than 1 widgets, then changing styles(first code) is not necessary, but then according to the content and location's dimension u have to change the CSS coding !

@ ZetaAdd the multi-tabbed widget, then to any of the tabs add the labels, add them like this:<ul><li><a href="LINK to Label1">Label 1</a><a href="LINK to Label2">Label 2</a><a href="LINK to Label3">Label 3</a>...</li></ul>

To get the links to labels, you can first add a simple labels widget, and copy from there!

And to add the image to left/right while the text is to right/left, do this:Log in to draft.blogger.com

then simply write a post, type some text and add an image normally, but you can now easily DRAG and CHANGE the position of the images !

thanks for the prompt response. i was able to do it, finally. am not that techy though, and i rely much on forums and sites such as yours to make my blog as i've wanted it.

my next question is regarding my content. i've tried to add a link to my podcast tab on the widget but when i click the tab, it's not doing anything. how do i fix that? i tried the instruction you gave to nihatbarin but it did not work for me.

and if i am able to do successfully add the content, just curious, when i click my tab, will it open on a new window or still on my page?

also, i want to add the hyperlink for home on my tab contents, how do i do that?

I love your site and your easy instructions for creating tabs. I have one problem. I am trying to add additional tabs and have followed your instruction but can't seem to add any tabs. Can you help me?

No you cannot give different sizes to diff content boxes, actually this widgetis very simple and thus all the boxes are controlled with the same <div> element....if you place 3 different <div> elements then this widget will stop working...the only way is make the background similar to your blog's background, so that even if the content is less in the widget box, then also it's background will blend in to your blog's BG.

And of course it is totally your wish to use whichever widget you want....the 3 widgets added after this one have images as tab menus, so they are take a little more effort to edit, whereas here you can of course do it very easily...by changing the hex color codes !

Well Sarah, the blogs where you have tested the widget are not open to public, so I don't know what is the width of your sidebar, just try to keep this widget's width about 4-5pixels less than the width of the sidebar...

And also make sure that when you adjust the width, you have to change and make it equal at two places (in the code you can see that "350" is present at two places in purple color)

Hi Dsai!The widget is working perfectly on my blog but unfortunately the Feedburner Email Form isn't working properly. When I submit an email and click subscribe, a window opens saying "Sorry, the page you were looking for in the blog TNT by STC does not exist"Whats the problem, plz explain?

I asked you a question at your post" Advanced collapsible multi tab widget" but you haven't replied yet.

Oh great now I can copy my message from your chat box! :DRegards,MOHD__This is my blog

There's some problem in the code you used for embedding the email form...it's not related with the multi-tabbed widget, so copy the code once again from feedburner and replace the present code on your blog.and sorry, I forgot about your comment at 'collapsible mutli-tabbed-widget', you can now check the reply !

I copy-paste the exact code given by feedburner several times, but nothing seems to work. I have kept the feedburner code unedited but still I am receiving the same message"Sorry, the page you were looking for in the blog TNT by STC does not exist"Plz look at it now. May be you work out a way.

Hey all i was wondering, a buddy and myself are trying to figure out how to use the same tab system with the chatango system. Basic concept of different chatango box's for different tabs. i was thinking it should be based of the same widget concept but no matter how we mess around with the code it wont use the tabs. Anyone know a way to make use of the same tab concept but for multiple chatango's?

i have a problem i cant put RSS feedburner subs via email in there ,everytime i try puting the email and press submit its bring me to other page" error " msg pop-up and if u ask me if the code is f***ed up or some thing well its not coz i try paste at other html widget and its works.....

Well the tabbed widget like mine comes with the template, where it has added blogger html widgets to tabs. I do not have a tutorial for that, but you may try this one:http://bloggerstop.net/2009/03/another-cool-new-multi-tabbed-widget.html

Okay, I will edit this post in a few minutews, actually the file you download is in .zip format, so you have to extract it first (using WinRAR etc.), then you have to upload the tabview.js file to mydatanest.com

Anyways, if you want to add more pro-looking widgets, then have a look on this post:http://bloggerstop.net/2009/12/collapsible-multi-tabber-widget-for.html (also have a look on the part-2 post)

Hi and thanks for all your great posts - very helpful for the newbies, like me ^.^

I'm having a problem, where on one computer, the tab box works perfectly ... but looking at the same page from another computer, the tab box is "fixed" and unclickable ... could you give me advice on how to fix that? Thanks in Advance !!

Only problem with me is whenever I click "Save template" it gets me this error:

We were unable to save your template

Please correct the error below, and submit your template again.Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: Content is not allowed in trailing section.

I'm pretty sure I followed your instructions step by step - I even did it three times to make sure I'm not doing anything wrong, but I just keep getting the same old error over and over again.

For some reason the widget work fin on my tester website but when i copy the code into my live site it seem the CSS CODES ARE NOT WORKING, not backround color or design need your help what iam doing wrong, when i past the CSS codes nothing happen, i could change between tabs that is all Samirwww.realestatesnatch.blogspot.com

Good site! I really love how it is simple on my eyes and the data are well written. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which must do the trick! Have a great day!

Regular Readers

What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.- Stacey @Pets With AllergiesI stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.- Cheryl @Cmash Loves To Read