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:

_eb754d29_

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

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

Leave a Reply

106 Comments on "How To Create A Multi-Tab Widget In BlogSpot/Blogger Blogs"

Notify of
avatar
Sort by:   newest | oldest | most voted
snam
Guest

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

View Comment
snam
Guest

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!

View Comment
snam
Guest

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

View Comment
Divya Sai
Guest

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
Divya Sai
Guest

For more FONTS NAMES, you can use MICROSOFT WORD 🙂

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

View Comment
snam
Guest

Thanks for the tips! I’ll try them!

View Comment
snam
Guest

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

View Comment
Divya Sai
Guest

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
snam
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
Loving Moomooz
Guest

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

View Comment
Divya Sai
Guest

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(

View Comment
Loving Moomooz
Guest

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.

View Comment
Divya Sai
Guest

Thanks for sharing the post 🙂

View Comment
nihatbarin
Guest

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

View Comment
Divya Sai
Guest

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&gt;

and to put content in tab 2, REPLACE

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

with your content !

View Comment
Sankerib
Guest

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
Divya Sai
Guest

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
nihatbarin
Guest

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

View Comment
nihatbarin
Guest

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.

View Comment
wpDiscuz