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

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

    View Comment
  3. 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

    View Comment
  4. 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″

    View Comment
  5. 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.

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

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

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

    View Comment
  9. 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! 🙂

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

    View Comment
  11. 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

    View Comment
  12. @ 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 !

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

    View Comment
  14. 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 🙂

    View Comment
  15. 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>

    View Comment
  16. 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)

    View Comment
  17. 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 !

    View Comment
  18. @ 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…

    View Comment
  19. 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)

    View Comment
  20. 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

    View Comment
  21. 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.

    View Comment
  22. 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.

    View Comment
  23. 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

    View Comment
  24. 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

    View Comment
  25. 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?

    View Comment
  26. 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

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

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

    View Comment

Leave a Reply

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