December 29, 2008

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

108 comments:

snam said...

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

snam said...

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!

snam said...

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

Divya Sai said...

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

Divya Sai said...

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

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

snam said...

Thanks for the tips! I'll try them!

snam said...

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

Divya Sai said...

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*/

snam said...

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

Divya Sai said...

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

Loving Moomooz said...

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

Divya Sai said...

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(

Loving Moomooz said...

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.

Divya Sai said...

Thanks for sharing the post :)

nihatbarin said...

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

Divya Sai said...

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 !

Sankerib said...

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

Divya Sai said...

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"

nihatbarin said...

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

nihatbarin said...

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.

nihatbarin said...

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.

Admin said...

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.

bloggerstop.net said...

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.

Divya Sai said...

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

Sankerib said...

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

Divya Sai said...

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 !

emrullah said...

sankerib can you post the codes

Sankerib said...

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

Divya Sai said...

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

Divya Sai said...

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

Meeting In Music

zeta said...

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

Just Me said...

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

Divya Sai said...

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

Divya Sai said...

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

Divya Sai said...

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>

Just Me said...

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 :)

Divya Sai said...

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

Kalavati said...

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

bloggerstop.net said...

You are welcome Kalavati, Donate button? :)

black hairstorian said...

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?

Divya Sai said...

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>

maboroshine said...

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)

Divya Sai said...

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 !

Blogger Templates said...

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

Mohammad Mustafa Ahmedzai said...

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___

Mohammad Mustafa Ahmedzai said...

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

bloggerstop.net said...

:)

Sarah said...

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?

Divya Sai said...

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)

Mohammad Mustafa Ahmedzai said...

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

Divya Sai said...

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 !

Mohammad Mustafa Ahmedzai said...

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.

Shilpa shetty said...

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

Divya Sai said...

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

Divya Sai said...

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

Mohammad Mustafa Ahmedzai said...

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

Divya Sai said...

well that's strange :-/

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

Mohammad Mustafa Ahmedzai said...

:(( 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

Divya Sai said...

Is your marquee thing's working or not?

snam said...

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?

Divya Sai said...

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

•▬●๋•p.k.áŕừń●๋•▬• said...

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


http://hacking2all.blogspot.com/

•▬●๋•p.k.áŕừń●๋•▬• said...

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/

Divya Sai said...

Hi Arun,
Here's exactly what you need:

Advanced Collapsible Multi-tabbed Widget

Regards
Sai

Anime Bizz said...

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

Divya Sai said...

Happy for you buddy !

Regards
Sai

Elidet Reyes said...

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.

Divya Sai said...

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

Regards
Sai

Praveen said...

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

http://praveenkumarg.blogspot.com

andra said...

Thanks a lot for this widget, i like this

Divya Sai said...

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

Cooldude said...

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

http://technofreak-cooldude.blogspot.com

Sai said...

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

Prateek said...

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

Divya Sai said...

You are Welcome Prateek !

Sugi said...

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

Divya Sai said...

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

Kamin said...

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?

Swagat Rakshit said...

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

Xylence said...

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

Divya Sai said...

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

Xylence said...

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

Science Specialist said...

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

Manojkumar said...

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

Sai @ Blogger Help said...

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

Lam Nuwin said...

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

Divya Sai said...

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.

visit lists2day.blogspot.com said...

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!

visit lists2day.blogspot.com said...

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!

visit lists2day.blogspot.com said...

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

Divya Sai said...

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

Unemployable Writer said...
This comment has been removed by the author.
java said...

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.

Divya Sai said...

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)

java said...
This comment has been removed by the author.
java said...

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

Sai - Blogger Widgets said...

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.

Anonymous said...

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

Mrs. Moglie said...

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/

Aya Zain said...

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?

Anonymous said...

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

Anonymous said...

:))

Pentalk said...

Can this be applied for new template in 2011?

Admin said...

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

Naked Girls Photos said...

not work in my blog. Can you solve it?

printers ink said...

nice sharing helpful data sharing

Catharina said...

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

NEKOKOSHAN said...

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

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 Allergies
I 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

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy