5 tabbed Content Widget for Blogger

2/14/2009 03:15:00 PM Posted by c3v3n

by bloganol

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>
&nbsp;&nbsp; <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>
&nbsp; </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>
&nbsp; </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>
&nbsp; </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>
&nbsp; </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>
&nbsp; </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.

0 comments:

Post a Comment