Posted by
Deineshd
on Friday, March 28, 2008 · 22
comments
To install This Widget in Your Blog , Goto Blogger ; Add a new Page Element ; Html/Javascript ; and Paste this Code There.
DEMO:
<!-- widget by Bloganol.blogspot.com -->
<script language="JavaScript" type="text/javascript">
function st2(t){
for(i=1;i<=5;i++){
ts=document.getElementById('tt'+i);
tr = document.getElementById('dd'+i);
ta = document.getElementById('aa'+i);
if(t==i){
if(t==1) ts.className="Tab1";
if(t==2) ts.className="Tab2";
if(t==3) ts.className="Tab3";
if(t==4) ts.className="Tab4";
if(t==5) ts.className="Tab5";
ta.className="srchlinksel2";
ts.style.borderBottom="1px solid #FFFFFF";
tr.style["display"]="block";
tr.style["visibility"]="visible";
}
else{
ts.className="tb2";
ta.className="srchlink2";
ts.style.borderBottom="1px solid #B5D6EF";
tr.style["display"]="none";
tr.style["visibility"]="hidden";
}
}
}
</script>
<!-- CSS Begin //-->
<style type="text/css">.f10 {
FONT-SIZE: 10px; FONT-FAMILY: arial
}
.f11 {
FONT-SIZE: 11px; FONT-FAMILY: arial
}
.f12 {
FONT-SIZE: 12px; FONT-FAMILY: arial
}
.f12r {
FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial
}
.f12n {
FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial
}
.ft11a {
FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma
}
.fv9 {
FONT-SIZE: 9px; FONT-FAMILY: verdana
}
.fv10 {
FONT-SIZE: 10px; FONT-FAMILY: verdana
}
.ft11 {
FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma
}
.fmicro9 {
FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif
}
A.srchlink:link {
COLOR: #2864b4; TEXT-DECORATION: none
}
A.srchlink:visited {
}
A.srchlinksel:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlink2:link {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlink2:visited {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlinksel2:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel2:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
.tb2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#D9E9F6');BACKGROUND-COLOR: #d9e9f6
}
.tbmain2 {
BACKGROUND-COLOR: #ffffff
}
.lfttbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#DEFFC6',EndColorStr:'#B7E4A2'); BACKGROUND-COLOR: #deffc6
}
.rttbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#DEEFF7'); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb
}
.rttblx {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff
}
.rt_tbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd
}
.toptbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#4A84AD',EndColorStr:'#00426B'); BACKGROUND-COLOR: #00426b
}
.srchtbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FFFFFF',EndColorStr:'#A5DEDE'); BACKGROUND-COLOR: #a5dede
}
.Tab1 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #fedfb3
}
.Tab2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #b39dfe
}
.Tab3 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #f6fe9d
}
.Tab4 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #feaf9d
}
.Tab5 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #9dfea5
}
A {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline}
</style>
<!-- CSS End //-->
<!-- Widget Code Ends Here -->
<!-- widget by Bloganol.blogspot.com -->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td align="middle" onclick="st2('1')" height="22" id="tt1"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="70"
class="Tab1"><a id="aa1"
class="srchlinksel2" href="javascript:undefined"><font
class="f12"><b>TAB1</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('2')" height="22" id="tt2"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="47"
class="tb2"><a id="aa2"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TAB2</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('3')" height="22" id="tt3"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="62"
class="tb2"><a id="aa3"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>Tab3</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('4')" height="22" id="tt4"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="48"
class="tb2"><a id="aa4"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>Tab4</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('5')" height="22" id="tt5"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="52"
class="tb2"><a id="aa5"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>Tab5</b></font></a></td></tr>
<tr>
<td colspan="9">
<div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:
0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px;
BORDER-BOTTOM: 0px"
><!-- Main Headlines Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380" height="5">
<tbody>
<tr>
<td height="5"></td></tr></tbody></table>
<font color="#797979" class="f10"
>
<!-- wmlheadline begin -->
<!-- TDate Begin -->
<!-- Date Begin -->
Browse Items</font>
<!-- Date End -->
<!-- TDate End -->
<div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid;
BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;
BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">Tab 1
Content</font></td>
</tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html"
target="_blank">Bloganol</a></b>
</font></td></tr>
<tr>
<td height="4"></td></tr></tbody></table></div><!-- Main
Headlines End //--></div>
<div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- News Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">Tab 2
Content</font></td></tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html"
target="_blank">Bloganol</a></b>
</font></td></tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- News End
//--></div>
<div id="dd3" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Business Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">Tab 3
Content</font></td></tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html"
target="_blank">Bloganol</a></b>
</font></td></tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Business End
//--></div>
<div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Movies Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">Tab 4
Content</font></td>
</tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html"
target="_blank">Bloganol</a></b>
</font></td></tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Movies End
//--></div>
<div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Sports Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">Tab 5
Content</font></td></tr>
<tr>
<td colspan="2" align="right"><font class="f10"><b> Widget
by <a href="http://bloganol.blogspot.com/2008/03/5-tabbed-content-widget-for-blogger.html"
target="_blank">Bloganol</a></b>
</font></td></tr>
<tr>
<td
height="4"></td></tr></tbody></table>
<!-- Widget Code Ends Here --> |
In the Above Code You will Find the
Code , Replace that Code With Your Tab Header Title and Replace the Code With Your Tab Content.
If You Like This post then Help Us Spred This Post By Bookmarking this Post using The Social Bookmarking Buttons Below Or Subscribe to us.
comments
22 Responses to "5 tabbed Content Widget for Blogger"June 19, 2008 5:33 PM
hey really i want to say u something whole night i was searching something tabbed menu and java one really it made me tried i came across ur site and really it solved my prob. thanks dude who so ever you are http://www.computersolution.co.cc
September 9, 2008 8:07 PM
hi could u make me 7 tab menu like this i want .... really needed i will be very thankful to you,
mail me if possible enlighten.power@gmail.com
or
my www.computersolution.co.cc
November 27, 2008 11:41 AM
I would like to know too how can i add more tabs . thanks a lot man You realy saved me
December 22, 2008 3:34 AM
I want to know if this can be added in post in blogspot??
February 25, 2009 5:44 PM
HI
Hi, I am looking for something like this for the blogposts...Can you help me?
March 1, 2009 11:37 PM
Thank you for your code, lots of hard work!
How would I make this narrower? I am using it on a sidebar and need it less width. Thank you.
March 4, 2009 9:08 AM
awesome.
Will try to implement it into my tech blog.
www.comutorial.blogspot.com
March 12, 2009 2:07 PM
I have been looking for days and nothing worked and I wasted so much time. This worked immediately!! Thank you so much for sharing!
March 29, 2009 8:26 PM
thanks for the share.. :)
March 29, 2009 8:36 PM
How do you turn this into a 3 tabbed widget? I tried removing a lines of code but it just messed it up completely..
April 4, 2009 9:25 PM
Hey its great article!
I am also using it.
Can I share it with my blog readers, with slight modifications
April 8, 2009 12:42 AM
Wow never thought widget for blogger can be like this, can this script added to wordpress too ?
April 9, 2009 6:59 PM
This is really a Cool & useful Widget.
See now my Blog Looks Cool with this Widget
http://praveenkumarg.blogspot.com
April 10, 2009 11:06 AM
Thanks a lot bro,Its been of gr8 help for me.
April 17, 2009 9:32 PM
see www.o2movies.blogspot.com for more details
May 12, 2009 7:35 AM
ajutorblogger.blogspot.com i post here some hacks but only in romanian
May 23, 2009 8:49 PM
tq for the code
June 27, 2009 1:43 PM
wow. thank you so much..
bloggerbebop.blogspot.com
July 3, 2009 12:33 PM
Hi nice widget.
It works nice in sidebar but i want to add tabbed menu in post. How could i do that. Please help me.
August 15, 2009 2:11 AM
nice info....thanks
August 23, 2009 2:29 AM
Thanks for the code, it works great!
I would like to make this a fixed height with auto overflow to create a slidebar. I can't figure out where to place the code. Can you please help me? Thanks
December 17, 2009 5:50 AM
Thank you . To all participant, please have a look at our updated contest post.
more templates easy to download
Speak Your Mind
Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!