Multi tab Widget is a must widget for every blog may that be wordpress
hosted blog or Blogspot/Blogger. It helps to decrease the load time of a
blog by combining three or more than three widgets into one! .You might
have seen this widget on every blog and even on my blog (look at the
sidebar) but the question is how do you add it? Well If you go and
search in Google on how to add a multi tab widget to your blog you will
land on various blogs with several tutorials but believe it or not,
disappointment is what you will get in return. Now why is that?
This widget looks cool only if coded with CSS and JavaScript. Several
blogs share different tutorials but unfortunately most of these
tutorials are either very difficult to understand or they are written in
a technical language that a newbie can’t understand. Moreover the codes
that they offer are pretty lengthy which increase the load time of your
homepage and often the widget doesn’t seem to work in browsers like
Internet Explorer. And the worst part is that some bloggers who share
this trick often add their blog link to the widget code and when you
view that widget in your blog, at the bottom of that widget you will
find this “ Widget by XYZ.com” or “Grab This Widget”.
This link is surely injustice with the reader. In short give preference
to anything which is easy to understand, interesting and which may give
a professional look to your blog not a Grab this widget look.
Follow the Steps Below,
- Go To Blogger > Layout > Edit HTML
- Search for </head> (Tip: Use Browser Search Box. Press Ctrl + F )
And Just above </head> paste the code below,
<script type='text/javascript'>
//<![CDATA[
function tabtampil_oom(TPID, id)
{
var Tabtampil = document.getElementById(TPID);
var TTs = Tabtampil.firstChild;
while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
var TT = TTs.firstChild;
var i = 0;
do
{
if (TT.tagName == "A")
{
i++;
TT.href = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
TT.className = (i == id) ? "Active" : "";
TT.blur();
}
}
while (TT = TT.nextSibling);
var Halamans = Tabtampil.firstChild;
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
var Halaman = Halamans.firstChild;
var i = 0;
do
{
if (Halaman.className == 'Halaman')
{
i++;
if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
Halaman.style.overflow = "auto";
Halaman.style.display = (i == id) ? 'block' : 'none';
}
}
while (Halaman = Halaman.nextSibling);
}
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
}
function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1);
document.write('');}
//]]>
</script>
Save your template
Adding the code for Multi Tab widget to HTML/JavaScript widget
The Code for Our Multi Tab Widget looks like this,
<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #eee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color:#ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid#eee; border-bottom:0px solid #eee; float: left;
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
font-size: 11px; font-weight: 900; color: #000000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here </div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here </div>
</div>
</div>
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
Things To Note:
#eee :
This is the background colour of the Tabs. The Default one is grey. If
you want to change it to a different colour of your choice then use MBT Embeddable Colour Chart
#fff :
This is the colour of the border of your multi tab widget. The default
one is white you can customize it to a colour of your choice using the
same colour chart mentioned above.
#ffffff :
This is the background colour of the main body of your widget. This is
where you will add content to the widget. The default one is white. Use MBT Colour Chart if you wish to use a different colour.
#eee : This is the colour of the borders around those rectangular tabs. The default one is grey. Use MBT Colour Chart if you wish to use a different colour.
#000000 :
This is the colour of the text/font that you will write to name your
tabs. In other words, it’s the colour of your tab titles. The default
one is black.
Replace these with your tab titles
Tab 1 , Tab 2 , Tab 3
Replace these with your widget codes.
Tab 1 content goes here , Tab 2 content goes here , Tab 3 content goes here
Here
goes the codes of your content/widgets, which can be your recent
comments widget, recent posts widget, any written text, a picture etc. For example, to add a recent comments widget to the first tab, name Tab 1 as Comments and replace Tab 1 content goes here with the HTML code of your recent comments widget.
Adding the Multi Tab Widget To your Blog
After you have customized the code, do the following,
- Log into your blogger account
- Go to Layout > Page Elements
- Click on Add a Gadget
- Then Choose HTML/JavaScript Widget from the widget list that blogger provides
Now paste your customized code into this widget by leaving the title empty. Hit Save and You are Done! Check your blog to see the new dress :)
