A Stylish Tab Widget / gadjet using only HTML / Javascript, easy and no jQuery. But need some configuration in HTML / Javascript. Up to 5 tab and you can save space in your blogspot
### Start Copy except this line ###
<script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent"><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>
<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: #ffffff}.Tab2 {FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF');BACKGROUND-COLOR: #ffffff}.Tab3 {FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF');BACKGROUND-COLOR: #ffffff}.Tab4 {FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF');BACKGROUND-COLOR: #ffffff}.Tab5 {FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF');BACKGROUND-COLOR: #ffffff}A {TEXT-DECORATION: none}A:hover {TEXT-DECORATION: underline}</style>
<table border="0" cellspacing="0" cellpadding="0"width="295"><tbody><tr><td id="tt1"style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="59"class="Tab1" height="22" onclick="st2('1')" align="middle"><a id="aa1"class="srchlinksel2" href="javascript:undefined"><fontclass = f12><b><center>
<!--TAB1 NAME--> Tab 1 <!--TAB1 NAME--> </center></b></fontclass></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 id="tt2"style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:#b5d6ef 1px solid" width="59"class="tb2" height="22" onclick="st2('2')" align="middle"><a id="aa2"class="srchlink2" href="javascript:undefined"><fontclass = f12><b><center>
<!--TAB2 NAME--> Tab 2 <!--TAB2 NAME--> </center></b></fontclass></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 id="tt3"style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:#b5d6ef 1px solid" width="59"class="tb2" height="22" onclick="st2('3')" align="middle"><a id="aa3"class="srchlink2" href="javascript:undefined"><fontclass = f12><b><center>
<!--TAB3 NAME--> Tab 3 <!--TAB3 NAME--> </center></b></fontclass></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 id="tt4"style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:#b5d6ef 1px solid" width="59"class="tb2" height="22" onclick="st2('4')" align="middle"><a id="aa4"class="srchlink2" href="javascript:undefined"><fontclass = f12><b><center>
<!--TAB4 NAME--> Tab 4 <!--TAB4 NAME--> </center></b></fontclass></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 id="tt5"style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:#b5d6ef 1px solid" width="59"class="tb2" height="22" onclick="st2('5')" align="middle"><a id="aa5"class="srchlink2" href="javascript:undefined"><fontclass = f12><b><center>
<!--TAB1 NAME--> Tab 5 <!--TAB1 NAME--> </center></b></fontclass></a></td></tr><tr><td colspan="9"><div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px;BORDER-BOTTOM: 0px"><!-- Main Headlines Begin //--><table border="0" cellspacing="0" cellpadding="0"width="295" height="5"><tbody><tr><td height="5"></td></tr></tbody></table>
<div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid;BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 295px; BORDER-BOTTOM:#b5d6ef 1px solid"><table border="0" cellspacing="0" cellpadding="0"width="295"><tbody><tr><td width="14"></td><td valign="top"><font color="#16387c" class="f12n">
<!—put your widget for tab 1 -->
<!-- Script Html Widget for Tab 1-->
</!—put></font></td></tr><tr></tr><tr><td height="4"></td></tr></tbody></table></div><!-- MainHeadlines End //--></div><div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid;BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:#b5d6ef 1px solid"><!-- News Begin //--><table border="0" cellspacing="0" cellpadding="0"width="295"><tbody><tr><td width="14"></td><td valign="top"><font color="#16387c" class="f12n">
<!—put your widget for tab 2 -->
<!-- Script Html Widget for Tab 2-->
</!—put></font></td></tr><tr></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: 295px; BORDER-BOTTOM:#b5d6ef 1px solid"><!-- Business Begin //--><table border="0" cellspacing="0" cellpadding="0"width="295"><tbody><tr><td width="14"></td><td valign="top"><font color="#16387c" class="f12n">
<!—put your widget for tab 3 -->
<!-- Script Html Widget for Tab 3-->
</!—put></font></td></tr><tr></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: 295px; BORDER-BOTTOM:#b5d6ef 1px solid"><!-- Movies Begin //--><table border="0" cellspacing="0" cellpadding="0"width="295"><tbody><tr><td width="14"></td><td valign="top"><font color="#16387c" class="f12n">
<!—put your widget for tab 4 -->
<!-- Script Html Widget for Tab 4-->
</!—put></font></td></tr><tr></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: 295px; BORDER-BOTTOM:#b5d6ef 1px solid"><!-- Sports Begin //--><table border="0" cellspacing="0" cellpadding="0"width="295"><tbody><tr><td width="14"></td><td valign="top"><font color="#16387c" class="f12n">
<!—put your widget for tab 5 -->
<!-- Script Html Widget for Tab 5-->
</!—put></font></td></tr><tr></tr><tr><tdheight 4=></tdheight></tr></tbody></table></div></td></tr></tbody></table></div><br/><a href="http://adf.ly/2Puky">Grab This!</a><div style="text-align:right">
</div>
<script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (30-gb.offsetWidth).toString() + "px";</script></div>### End Copy except this line ###
** Instructions Note**
* Copy and paste inside blogspot --> Design -->Add New Gadget
* Find
<!--TAB1 NAME--> Put the tab label here <!--TAB1 NAME--> * Find
<!—put your widget for tab 5 -->example paste HTML / Javascript content inside the tab
<!-- Script Html Widget for Tab 5--> * The background are transparent. Please put some html code for font
example for white font
<!—put your widget for tab 5 --><font color="#FFFFFF">
example paste HTML / Javascript content inside the tab
</font>
<!-- Script Html Widget for Tab 5--> === Demo ===
Note updated 2012 -
Try this new improve tabbed widget with javascript