Blog Free Widgets: Free Stylish Tab Widget

Visitor also READ

Mobi9 Clock Widget for Blogspot
Posted On Mon Dec 30 2013

Animation Flash Clock Blog Widget. This clock display analog and digital interface with date and day. Nic ...

Powerpuff Girl Welcome Widget
Posted On Wed Dec 18 2013

This welcome widget from the cartoon power puff girl. Suitable for blog or website. Its welcome, invite, ...

GetThis!

Clock For Web or Blog
Posted On Tue Feb 04 2014

Decorate and fill your blog or website with clocks. You can find variety of animation or static clocks ...

Patrick and Sponge Bob clock widget
Posted On Thu Jun 30 2011

patrick and spongebobclock A free clock for your blog with the character of spongebob squarepants. Su ...

Sunday, August 7, 2011

Free Stylish Tab Widget

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: #b5d6ef
1px 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"><font
class = f12><b><center>

   Tab 1 

</center></b></font
class></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: #b5d6ef
1px 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"><font
class = f12><b><center>

   Tab 2 

</center></b></font
class></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: #b5d6ef
1px 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"><font
class = f12><b><center>

   Tab 3 

</center></b></font
class></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: #b5d6ef
1px 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"><font
class = f12><b><center>

   Tab 4 

</center></b></font
class></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: #b5d6ef
1px 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"><font
class = f12><b><center>

   Tab 5 

</center></b></font
class></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"
>
<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 -->



</!—put></font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table></div></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"
>
<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 -->



</!—put></font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table></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"
>
<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 -->



</!—put></font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table></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"
>
<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 -->



</!—put></font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table></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"
>
<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 -->



</!—put></font>
</td></tr>
<tr>
</tr>
<tr>
<td
height 4=></td
height></tr></tbody></table></div></td></tr></tbody></table></div>

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

 Put the tab label here 

* Find

<!—put your widget for tab 5 -->

example paste HTML / Javascript content inside the tab



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


=== Demo ===

Tab 1

Tab 2

Tab 3

Tab 4

Tab 5

Grab This!

Note updated 2012 - Try this new improve tabbed widget with javascript

2 comments:

CheguZamAugust 7, 2011 at 10:24 PM
Thanks for the widget.
Visit my site, but mine are not in english

http://cheguzam.blogspot.com
ReplyDelete
Replies
UnknownMay 9, 2013 at 10:38 PM
Really a awesome collection ,very nice thank you so much.
http://www.deepdesigncompany.com/
ReplyDelete
Replies

Subscribe to: Post Comments (Atom)

You Might Like To Read

Cute Animation clock
Posted On Fri May 23 2014

This analog clock with cute red and pink colour is an animation flash with the seconds and the characte ...

2 in One Clock and Welcome Widget
Posted On Fri Jul 18 2014

When your blog have too many flash gadget / widget, Its load longer and slower... Use this widget, Its co ...

Stylish Guestbook with 5 Tab inside, Save Space and Stylish
Posted On Fri Jun 03 2011

Have problem with allot of widget and your blog look messy. Hurry and get a Stylish Guestbook with 5 Tab ...

Currency Converter Widget
Posted On Sat Dec 08 2012

Picture This is a converter that can change any currency anywhere in the world in an instant and fast. ...

Cuteki clock
Posted On Sat Dec 03 2011

A cute frog clock. there's more after the link http://www.cuteki.com/widgets/clocks/ var cutekiW ...

GetThis!

Beauty and The Beast Screenmates
Posted On Mon Dec 16 2013

Screenmates - an animated light program that run across the desktop screen freely or following the mo ...

List 50 widget / gadget in blog
Posted On Fri Nov 23 2012

Searching for widget is easy now. Some of them are listed here downwards. Widget4u also listed some here ...

2 best url shortener that pays
Posted On Mon Dec 03 2012

Since the beginning of the Internet people wanted to share links that are interesting or important to the ...

Patrick Welcome Widget
Posted On Sun Dec 25 2011

A widget / gadget from the animation / anime Patrick (anime spongebob squarepants), for web, blogspot ...

Hello Kitty widget
Posted On Sat Jun 18 2011

hello kitty widget A cute hello kitty animation welcome widget. Grab Yours Today! Copy the green HTM ...

Random Post

Kingfisher Screenmates
Posted On Sat Dec 01 2012

Screenmates - an animated light program that run across the desktop screen freely or following the mouse. This is such a nostalgic ...

Blog Human Calendar Widget
Posted On Thu Dec 15 2011

Click at the widget below to get yours for free. You can costomize it size for 2x2 or 3x3, small or big. Here the widget \/ ...

Birthday Card Widget
Posted On Wed Jun 01 2011

Custom Birthday Card Lovely virtual birthday card for your family or your love ones. Create your friends a personalized Birthday greeting card to p ...

Easy Pop Welcome Message
Posted On Fri Dec 07 2012

This is a free popup message when your visitor start loading your blog. Just copy the html/javascript bellow. This pop msg wold not interfere the loading o ...

Advertise Here
Posted On Mon Jun 30 2014

You can put your ads to promote your business or website, here in this blog via leaderboard top banner 728x90px, Mid Banner 468x60px and small box 125x125p ...

Spongebob Clock Blogparts
Posted On Tue Jan 14 2014

Spongebob digital clock blog-part (widget, gadget) nice for blog or web using html code Sampel SIDEBAR - Copy / paste this htm ...

Spongebob Blog Clock in Flash
Posted On Sat Jan 04 2014

Animation Flash Clock Blog Widget. This clock display analog and digital interface with date and day. Nice for your blog, web or any platform using flash ( ...

randomWidget

Blog Free Widgets

Pages

Visitor also READ

Sunday, August 7, 2011

Free Stylish Tab Widget

2 comments:

ShareThis!

You Might Like To Read

Statistic

Followers

I've Collect A flag from you

Feedjit