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=”https://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

106 thoughts on “How To Create A Multi-Tab Widget In BlogSpot/Blogger Blogs

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

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

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

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

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

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

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

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

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

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

  11. 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! 🙂

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

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

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

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

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

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

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

  19. 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="https://bloggerstop.net"&gt; BloggerStop</a></span>

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

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

  22. @ 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&quot; 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&gt;
    <a rel="alternate" title="Subscribe to my feed" type="application/rss+xml"></a></center>
    <center><form action="http://feedburner.google.com/fb/a/mailverify&quot; 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&#39;, '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…

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

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

  25. 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! 😀
    Regards,
    MOHD__
    This is my blog

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

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

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

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

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

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

  32. 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:
    https://bloggerstop.net/2008/09/blogger-help.html

    Regards
    Sai

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

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

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

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

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

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

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

  40. 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
    http://www.realestatesnatch.blogspot.com

Leave a Reply

Your email address will not be published. Required fields are marked *