How To Add 5 Tabbed Widget For Blogger

I found this nice tip in www.bloganol.com .

1.Login to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below.

<!-- 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 -->

4.Now Replace TAB1,TAB2,TAB3,TAB4,TAB5 with your Tab Header Title and Replace Tab 1Content,Tab 2 Content,Tab 3 Content,Tab 4 Content,Tab 5 Content with your tab content.

5.Now click Save and you are done.