How To Create A Multi-Tab Widget In BlogSpot/Blogger Blogs

*UPDATE: Three new multi tabbed widgets are added in this blog, the coding work is equally simple. So first have a look here:

New Multi-Tabbed Widgets For Blogger


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:

]]></b:skin>

JUST BEFORE THIS CODE, paste the following code:

// Copyright (C) 2005 Ilya S. Lyubinskiy.
// All rights reserved.
// Technical support: http://www.php-development.ru/

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu - Tab Buttons*/
text-align: center;
height: 24px; /* Height top main menu - Tab Buttons*/
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #F4F4F4; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FBF1A4; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
The text in red color are comments, for your help, as you can edit those numbers or color codes yourself, so that they can match your blog's layout.

Download this File: Tabview.zip
Then in your PC, unzip it (using Winzip or 7-Zip), and then upload it to MyDataNest.com, to get a DIRECT LINK to the file (Tabview.js).

Now find (CTRL+F) this in the template;
</Head>
And immediately BEFORE that paste this code
<script src='http://mydatanest.com/......./tabview.js' type='text/javascript'/>
Replace the link in RED, with the DIRECT LINK of the Tabview.js file

That's it, Now SAVE the template.

2. The second part is for positioning the widget (whether in sidebar, above/below the post body etc.)
For this, click on "Page Elements" tab, and then "Add a Gadget" wherever you like.

Select the widget of the type "HTML/JavaScript"

Now paste the following code in to the widget:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Content 1.1 <br />
Content 1.2 <br />
Content 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Content 2.1 <br />
Content 2.2 <br />
Content 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Content 3.1 <br />
Content 3.2 <br />
Content 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script><span>widget by<a href="http://bloggerstop.net"> BloggerStop</a></span>
You can change the colored content as per your wish, and to remove or add any further tabs,
Either delete Tab3 line, and 3.1, 3.2 and 3.3 lines
or Add Tab 4 and 4.1 etc lines.

Save the widget, drag and change it's position if you want.

Credits: PHP Development

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

108 comments

Write comments
December 28, 2008 5:09 AM delete

Thanks! I really wanted this! I will try it and tell you if I'm successful or not!

Reply
avatar
December 28, 2008 5:33 AM delete

Thanks for this! I know you were going to post it but since I requested it, I hope I wasn't too much of an annoyance. It works perfectly! Thanks!

Reply
avatar
December 28, 2008 6:56 AM delete

I'm having a slight problem. The font and the tabs won't change.

Reply
avatar
December 28, 2008 11:49 AM delete

Hi Snam

To change the font, use this code, in the HTML/JAVASCRIPT code:
<span style="font-family:Script MT Bold;" >YOUR TEXT HERE</span>

PS: I never get annoyed with genuine doubts, rather I am happy that the post was useful for you

Regards
Sai

Reply
avatar
December 28, 2008 11:52 AM delete

For more FONTS NAMES, you can use MICROSOFT WORD :)

You can freely comment back here, if you have more doubts !

Reply
avatar
December 30, 2008 12:41 AM delete

Thanks for the tips! I'll try them!

Reply
avatar
January 02, 2009 10:56 PM delete

How do I change the size of the tabs? I tried modifying the code but nothing ever changes.

Reply
avatar
January 03, 2009 3:33 AM delete

In the first code, the first comment (in RED color), is where you have to change the width of the tab size:

This is the code where you have to change it:
width: 90px; /* Width top main menu - Tab Buttons*/

Reply
avatar
January 03, 2009 6:53 AM delete

I've tried changing it but it still stays the same. Is it because I did not change the colors of the tabs?

Reply
avatar
January 03, 2009 7:22 AM delete

Try it once more, I have changed the width several times, just change it from 90 to 100/120 anything

Reply
avatar
January 04, 2009 12:01 PM delete

Yay.. this is cool.. Thank you so much. I've searched so long for instructions that works!! And yours is my saviour!! I love my blog more now. :)

Reply
avatar
January 04, 2009 12:25 PM delete

Hi Claire

I am happy :) that the widget was useful to you, and yes I do try to keep the hacks and tricks on this blog quite simple, so that no one may get annoyed with the coding work, like this-> ~x(

Reply
avatar
January 04, 2009 12:33 PM delete

Hahaha.. I've put your link on my blog as well.. Hope it'll help my friends if they want to add such tabs to theirs. :) Thanks again. It's really very helpful.

Reply
avatar
January 04, 2009 1:03 PM delete

Thanks for sharing the post :)

Reply
avatar
January 09, 2009 2:16 AM delete

hey dude.where to put links in this code.looking forward to your answer.

Reply
avatar
January 09, 2009 6:45 AM delete

Hi Nihat

If you want to put links in tab 1, then REPLACE

content 1.1<br />
content 1.2<br />
content 1.3<br />

with your content, for example u can put this
<a href="http://link1.com">Link1</a>

and to put content in tab 2, REPLACE

content 2.1<br />
content 2.2<br />
content 2.3<br />

with your content !

Reply
avatar
January 09, 2009 3:56 PM delete

Hi,

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?

Sankerib

Reply
avatar
January 10, 2009 12:49 AM delete

Hello Sankerib

You can add as many widgets as you want. There's no need to change template any further once you have added the initial code, what you have to do is - change the id's, i mean....

For 1st use;
In second line of the second code (for HTML/JavaScript widget),
use id="tabview1"


For 2nd use;
In second line of the second code (for HTML/JavaScript widget),
use id="tabview2"

Reply
avatar
January 10, 2009 5:54 AM delete

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

Reply
avatar
January 10, 2009 9:00 AM delete

besides not being able to give links to labels through tabs, no matter how much I try I cannot put an mp3 player and a chatbox in seperate tabs in another tabview menu.

Reply
avatar
January 10, 2009 9:44 AM delete

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.

Reply
avatar
January 10, 2009 11:13 AM delete

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.

Reply
avatar
January 10, 2009 11:18 AM delete

I am not sure, whether it is possible to add that chatbox and player in different tabs or not, if you can give me the codes of these two, then i can try it for you.

Try to first increase the width of the widget, so that there wouldn't be any need to scroll for neither chatbox nor mp3 player.

Reply
avatar
January 10, 2009 11:25 AM delete

make the width equal to that of the chatbox as it is more wider than the mp3 player !

Reply
avatar
January 12, 2009 2:16 PM delete

Hello Divya Sai! :-)

Thank you very much for your reply. I actually figured it out myself in the end and was planing to make a comment about it here today.

Now my blog has 3 tabbed menus featuring everything from Chat-box, a Google CES widget, bloglists, Recent posts widget and the Followers widget.

All the best
Sankerib

Reply
avatar
January 12, 2009 2:23 PM delete

wow dude, I checked your blog meeting in music, and I must say that you have worked hard on it. Good going....keep up the good work..
Happy Blogging !

Reply
avatar
January 12, 2009 5:45 PM delete

sankerib can you post the codes

Reply
avatar
January 17, 2009 7:30 AM delete

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.

Thanks again for you help Divya Sai! :)

Reply
avatar
January 17, 2009 10:17 AM delete

Hello Sankerib and Emrullah

thanks for replying sankerib...

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 !

once again thanks for taking time to reply here

Regards
Sai

Reply
avatar
January 17, 2009 10:24 AM delete

Anybody who wants to see the work done by Sankerib, in his blog, here's the link :

Meeting In Music

Reply
avatar
January 23, 2009 1:54 AM delete

oh my god this works on my blog but i want to make a section with labels, but no the manual version. how to?

and sankerib how you make that,, put a image to the left and text to the right

Reply
avatar
January 23, 2009 7:23 AM delete

hi there,

your site's cool! i've been through a lot of sites looking for steps on how to add tabs and so far, your steps are remarkably easy.

i've modified the codes though, but how do i increase the font size of top menu? i'm just starting to edit them before i add links.

i'll post again if i still have some clarifications.

thanks,

jasmine
http://mirrorsinframes.blogspot.com

Reply
avatar
January 23, 2009 8:43 AM delete

@ Zeta
Add 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 !

Reply
avatar
January 23, 2009 8:45 AM delete

Draft.blogger.com is the BETA version of Blogger.com

Reply
avatar
January 23, 2009 8:56 AM delete

Hi Jasmine

In the second code, you'll find this:

<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>


Now instead of that you have to use this to adjust the font size:

<a><font size="3">Tab 1</font></a>
<a><font size="3">Tab 2</font></a>
<a><font size="3">Tab 3</font></a>

You can also make them bold/italics etc. in this way:

<a><b>Tab 1</b></a>
<a><b>Tab 2</b></a>
<a><b>Tab 3</b></a>

Reply
avatar
January 23, 2009 9:43 AM delete

hi divya,

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?

thanks a million,

jasmine

p.s. i'll link your site to my blog :)

Reply
avatar
January 23, 2009 1:29 PM delete

Hi Jasmine

It seems, that there's some problem with this widget in your blog, so u can try the new multi-tabbed widgets if u want....replace this code with the new one

New Multi tabbed Widgets:
New Multi Tabbed Widget For Blogger

Reply
avatar
February 10, 2009 10:33 PM delete

You are awesome, I have searched for this and yours was by far the easiest. And very clear for us novices. YOu should put a donate button on yor blog! Thanks

Reply
avatar
February 11, 2009 5:59 AM delete

You are welcome Kalavati, Donate button? :)

Reply
avatar
February 13, 2009 11:04 AM delete

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?

Reply
avatar
February 13, 2009 12:28 PM delete

You can ofcourse add more tabs, do this:

Instead of the second code, add this:


<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
<a>Tab 4</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Content 1.1 <br />
Content 1.2 <br />
Content 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Content 2.1 <br />
Content 2.2 <br />
Content 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Content 3.1 <br />
Content 3.2 <br />
Content 3.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Content 4.1 <br />
Content 4.2 <br />
Content 4.3 <br />
</div>
</div>



</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script><span>widget by<a href="http://bloggerstop.net"> BloggerStop</a></span>

Reply
avatar
February 26, 2009 2:50 PM delete

can i switch the height of eaach content of the tab? i mean,, my chatango have 490px but the feed burner subscription box have only 200px.

(i dont like the new tabs that you have posted cause this metod i understand more about ho to change color and font)

Reply
avatar
February 27, 2009 8:17 AM delete

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 !

Reply
avatar
March 06, 2009 8:34 AM delete

@ Mohd,

In your blog, this is the exact code you are using;

<div style="width: 300px; height: 300px;" class="Pages">

<div class="Page">
<div class="Pad">
<center><p><center>Subscribe Now! Don't miss any of these cool Tips N Tricks</center></p>
<a href="http://feeds2.feedburner.com/TntByStc" target="_blank" rel="alternate" title="Subscribe to my feed" type="application/rss+xml"><img alt="" style="border:0" src="http://i539.photobucket.com/albums/ff360/stcmustafa/rss-128.png"/></a>
<a rel="alternate" title="Subscribe to my feed" type="application/rss+xml"></a></center>
<center><form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;text-align:center;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p><center>OR</center></p>
<p><center>Subscribe by E-mail & get all these Tips N Tricks straight to your inbox!</center></p>
<p><center><input style="width:140px" name="email" type="text"/></center></p>
<input value="TntByStc" name="uri" type="hidden"/>
<input value="en_US" name="loc" type="hidden"/>
<input value="Subscribe" type="submit"/>
</form></center>
</div></div>
</div>
</div>
</form>



<div class="Page">
<div class="Pad">
Content 2.1 <br/>
Content 2.2 <br/>
Content 2.3 <br/>
</div>
</div>

<div class="Page">
<div class="Pad">
Content 3.1 <br/>
Content 3.2 <br/>
Content 3.3 <br/>
</div>
</div>

____

Now if you notice the code in bold, then it actually ends your widget right at there, so shift it from there to end of the widget...

Reply
avatar
March 06, 2009 4:03 PM delete

I just copied the tags
</div>
</div>
</form>

after

<div class="Page">
<div class="Pad">
Content 3.1 <br/>
Content 3.2 <br/>
Content 3.3 <br/>
</div>
</div>

And it worked wonders...Great! thks for the help.

Regards,
MOHD___

Reply
avatar
March 06, 2009 4:05 PM delete

OOps I mistyped something...Its
"I just pasted the tags"

Reply
avatar
March 08, 2009 6:21 PM delete

for some reason i cant get my tabs to align exactly with the box.. when i make it a px bigger the last tab disappears but when its a px smaller it doesnt line up.

any ideas?

Reply
avatar
March 09, 2009 11:10 AM delete

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)

Reply
avatar
March 12, 2009 8:10 PM delete

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! :D
Regards,
MOHD__
This is my blog

Reply
avatar
March 13, 2009 6:44 AM delete

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 !

Reply
avatar
March 13, 2009 6:54 PM delete

Dsai,

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.

Reply
avatar
March 14, 2009 9:42 AM delete

hey sai your script is not available http://dsai.588.googlepages.com/tabview.js so can you put downlond link so we can downlaod it on our server...thanks

Reply
avatar
March 14, 2009 1:28 PM delete

Mohd,
Is the same code working, when placed in some other html widget ?

@ Shilpa,
I'll update this post, with a download link for that js file...

Reply
avatar
March 14, 2009 1:57 PM delete

@Shilpa,
You can download the file now, from the link given in the post !

Reply
avatar
March 14, 2009 2:51 PM delete

yes Dsai its working when I paste it in another HTML/JAvascript widget

Reply
avatar
March 14, 2009 3:06 PM delete

well that's strange :-/

why don't you try other multi-tabbed widget tutorials !

Reply
avatar
March 16, 2009 6:22 AM delete

:(( OK :)

But I have solved that problem by removing that form from that widget and displayed it somewhere else.
Thks a lot for being so co-operative.

But man plz help me with that marquee thing

Reply
avatar
March 16, 2009 5:00 PM delete

Is your marquee thing's working or not?

Reply
avatar
March 27, 2009 2:03 AM delete

Hey, the download link doesn't work. I keep getting redirected whenever I try to download the file. Could you please post a new link?

Reply
avatar
March 27, 2009 12:34 PM delete

Dude I have just checked the link, and it's working fine, plz try some other browser.

Reply
avatar
April 05, 2009 6:23 AM delete

Thanks for this widget ... i am using this widget now in my blog .. any one can check here...


http://hacking2all.blogspot.com/

Reply
avatar
April 05, 2009 2:20 PM delete

hi to Divya Sai brother i am using this widget in my blog i.e http://hacking2all.blogspot.com/ in this widget i need to change something ...

i.e if i put more content in any of the widget it will automatically converted into scroll box but i don't like that i need to expend the MUTITABED widget itself as ur using in this blog ...


please help me ....

http://hacking2all.blogspot.com/

Reply
avatar
April 05, 2009 9:41 PM delete

Thx frend.. the javascript code for my existing tabview menu doesn't work. look like the host for that code seems to be down..

thanks again for save my day..

Reply
avatar
April 06, 2009 10:46 AM delete

Happy for you buddy !

Regards
Sai

Reply
avatar
April 08, 2009 10:24 PM delete

Just want to say your website helped me out a lot.

I added this widget and was having problems but your instructions are great. I know enough HTML to get by, so it takes me a little longer than most. 8-}

Thanks for all the work you do.

E.

Reply
avatar
April 09, 2009 4:17 PM delete

Happy for you Elidet...keep visiting this blog for more such tricks !

Regards
Sai

Reply
avatar
April 09, 2009 9:57 PM delete

This is really a Cool & useful Widget.
See now my Blog Looks Cool with this Widget

http://praveenkumarg.blogspot.com

Reply
avatar
April 11, 2009 9:36 AM delete

Thanks a lot for this widget, i like this

Reply
avatar
April 13, 2009 8:26 AM delete

Welcome guys !

You may try this one too:
http://bloggerstop.net/2009/03/another-cool-new-multi-tabbed-widget.html
(Quite easier than this widget)

Regards
Sai

Reply
avatar
May 04, 2009 6:28 AM delete

thanks for your post
please mention how to add recent post popular post and recent comments in these tabs

http://technofreak-cooldude.blogspot.com

Reply
avatar
Sai
May 04, 2009 7:50 AM delete

Hi...

visit this page:
http://bloggerstop.net/2008/09/blogger-help.html

Go to any widget post you want, copy the code and paste it in place of content 1.1, content 2.1 etc.

Regards
Sai

Reply
avatar
May 04, 2009 12:06 PM delete

Hey, Its very Easy , very good work. I must say Excellent .
Thanks a Lot.... I liked it too much...

Reply
avatar
May 04, 2009 12:47 PM delete

You are Welcome Prateek !

Reply
avatar
June 07, 2009 6:23 AM delete

nice blog, i want to ask:
i already have horizontal tab view,
nah how can i show for example, when we click tab 1, recent post , then when we click tab 2, the content change to recent comment..

i mean, how to insert or add recent post and recent comment in each of tabview.
thanks

Reply
avatar
June 07, 2009 9:41 AM delete

Hi Sugi, I just checked your blog, and the code you are using is similar to the one that I have over here.

So in the above code, instead of
content 1.1
content 1.2
content 1.3


Paste the code for Recent posts.

and instead of
content 2.1
content 2.2
content 2.3


paste the code of Recent comments

and instead of "SEGERA !!! " IN YOUR BLOG, paste the code for some other widget like "Popular posts" etc.\

For codes of these widgets, you may visit this page:
http://bloggerstop.net/2008/09/blogger-help.html

Regards
Sai

Reply
avatar
July 03, 2009 3:54 AM delete

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?

Reply
avatar
July 27, 2009 8:34 AM delete

Too good buddy
http://newbusinessprojects.blogspot.com/

Reply
avatar
August 11, 2009 9:30 AM delete

hi there im new here, i alrdy read all the comment here seems i had the same prob as
Mohammad Mustafa Ahmedzai can u help me..?

Reply
avatar
August 11, 2009 11:02 AM delete

Hello Xylence, Mohd has more than 1 comments on this page, can you plz specify your problem?

Reply
avatar
Xylence
August 15, 2009 11:43 PM delete

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.....

anyway here my web-blog
http://xynime.blogspot.com/

at this moment RSS feed subs via email works coz its in other html widget....
but still i wonder why i cant put the subs thing in the multi-tab ... help asap

Reply
avatar
August 30, 2009 7:57 AM delete

This seems like a lot of headache and technical fiddling for something that is a built-in feature on other blog hosting services.

Reply
avatar
October 24, 2009 9:33 PM delete

i need a tab for www.manojentertainment.co.cc.. i want like yours .. can you post it??

Reply
avatar
October 25, 2009 4:46 AM delete

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

Reply
avatar
December 01, 2009 1:46 PM delete

this widget doesnt work for mozilla and internet explorer,

the only browser that i can use it on is google chrome,.

do u know how i can fix this

Reply
avatar
December 01, 2009 1:54 PM delete

It will work in every browser, provided you change the properties of the folder at your mydatanest.com account and set it as hidden instead of private.

Reply
avatar
January 04, 2010 3:32 PM delete

wonderful! i used it on my blog http://lists2day. i will come up with a list of the best sites for blog tips, and i will definitely include yours. good job!

Reply
avatar
January 04, 2010 3:33 PM delete

wonderful! i used it on my blog http://lists2day.blogspot.com. i will come up with a list of the best sites for blog tips, and i will definitely include yours. good job!

Reply
avatar
January 10, 2010 9:01 AM delete

Thanks for your wonderful posts. We have come up with a list of most helful sites and included your blog there:

http://lists2day.blogspot.com/2010/01/10-most-helpful-sites-for-bloggers.html

Reply
avatar
January 10, 2010 11:18 AM delete

So nice of you...thanks lot for including me in the top 10 list :)

Reply
avatar
June 22, 2010 6:32 AM delete This comment has been removed by the author.
avatar
August 01, 2010 3:02 PM delete

hi sai i am really looking for this multi-tab widgent from a long time. i did exactly as u said but the tabs in my blog aren't working .plz help me. looking forward for ur answer.

Reply
avatar
August 01, 2010 3:36 PM delete

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)

Reply
avatar
August 02, 2010 7:35 AM delete This comment has been removed by the author.
avatar
August 02, 2010 8:05 AM delete

Lots lots of thanks it is working now.Can u tell me how to add different background colors,text color etc to my each tab .
Also can u temme how to place an anchor tab like 'back to top' in ur bog

Reply
avatar
August 02, 2010 9:29 AM delete

Hi there, rather than chaging colors in this widget, I advise you to work on that collapsible widget, I have already to your comment over there.

Reply
avatar
Anonymous
August 28, 2010 7:53 PM delete

Hi

Is it possible to apply different formatting to 2 separate sets of tabs.

I want the font for my pages tab to be different from the labels tab.

Thanks

Reply
avatar
January 30, 2011 8:48 AM delete

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 !!

http://dacbbir.blogspot.com/

Reply
avatar
June 06, 2011 4:06 AM delete

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.

What's up with that?

Reply
avatar
Anonymous
June 12, 2011 10:00 PM delete

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
Samir
www.realestatesnatch.blogspot.com

Reply
avatar
July 25, 2011 5:37 AM delete

Can this be applied for new template in 2011?

Reply
avatar
September 24, 2011 3:12 PM delete

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!

OVG From Cam Gigandet Workout

Reply
avatar
October 04, 2011 8:28 PM delete

not work in my blog. Can you solve it?

Reply
avatar
December 24, 2011 5:37 PM delete

nice sharing helpful data sharing

Reply
avatar
May 28, 2012 1:46 PM delete

this is great, but is there a way to hack it, so that i can use it inside a blogpost?

Reply
avatar
August 08, 2012 8:57 PM delete

The widget was working fine but today suddenly it stopped working, it shows only the first tab. Could you help me?

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon