5 tabbed Content Widget for Blogger

by Deineshd on March 28, 2008

Share


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.

http://feeds.feedburner.com/bloganol

Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.

Enter your email address:

Delivered by FeedBurner

Similar Posts

Article by Dinesh Dhakal

Dinesh has written 310 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.

Powered by Thesis

Thesis Theme

An amazing WordPress Theme, nothing beats the versatility and SEO friendliness of the Thesis framework.

From beginners, to the most advanced WordPress developers, Thesis makes it easy for anyone to customize it.

{ 22 comments… read them below or add one }

Sumit Agarwal June 20, 2008 at 12:33 am

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

Reply

Sumit Agarwal September 10, 2008 at 3:07 am

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 http://www.computersolution.co.cc

Reply

pelni naudu interneta November 27, 2008 at 7:41 pm

I would like to know too how can i add more tabs . thanks a lot man You realy saved me

Reply

DJ December 22, 2008 at 11:34 am

I want to know if this can be added in post in blogspot??

Reply

BHARATH S February 26, 2009 at 1:44 am

HI

Hi, I am looking for something like this for the blogposts…Can you help me?

Reply

New Kid March 2, 2009 at 7:37 am

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.

Reply

Tomaz Vorsic March 4, 2009 at 5:08 pm

awesome.
Will try to implement it into my tech blog.
http://www.comutorial.blogspot.com

Reply

Ryan Green March 12, 2009 at 9: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!

Reply

Andi March 30, 2009 at 3:26 am

thanks for the share.. :)

Reply

Simply Ridiculous March 30, 2009 at 3:36 am

How do you turn this into a 3 tabbed widget? I tried removing a lines of code but it just messed it up completely..

Reply

Prateek April 5, 2009 at 4:25 am

Hey its great article!
I am also using it.
Can I share it with my blog readers, with slight modifications

Reply

DeViLnoAnGeL InFo April 8, 2009 at 7:42 am

Wow never thought widget for blogger can be like this, can this script added to wordpress too ?

Reply

Praveen April 10, 2009 at 1:59 am

This is really a Cool & useful Widget.
See now my Blog Looks Cool with this Widget

http://praveenkumarg.blogspot.com

Reply

XERO April 10, 2009 at 6:06 pm

Thanks a lot bro,Its been of gr8 help for me.

Reply

PLaYeR April 18, 2009 at 4:32 am

see http://www.o2movies.blogspot.com for more details

Reply

GamesDatabase May 12, 2009 at 2:35 pm

ajutorblogger.blogspot.com i post here some hacks but only in romanian

Reply

Vicena 23 blog May 24, 2009 at 3:49 am

tq for the code

Reply

FLiTz June 27, 2009 at 8:43 pm

wow. thank you so much..
bloggerbebop.blogspot.com

Reply

Anonymous July 3, 2009 at 7: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.

Reply

dilarang melarang August 15, 2009 at 9:11 am

nice info….thanks

Reply

A Cheap Chick August 23, 2009 at 9: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

Reply

Lisa October 30, 2009 at 4:29 pm

This is a GREAT tabbed widget. The best one I’ve found… BUT for some reason it’s not working for me. ALL content displays on TAB 1 and links to other tabs get me a 404 error… I’m very sad :( Can you tell me how to fix this? Please…

Reply

Leave a Comment

Previous post:

Next post: