New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs

Earlier I have posted a hack on “How to create a multi-tabbed widget for blogger“, although that’s working completely fine, but if you think, it needs to be upgraded then have a look on these widgets [See these widgets in action here].

Although these new widgets look much advanced than the previous one, but you don’t have to worry on the coding part, as it has already been made easy by DynamicDrive and BloggerStop.

So here’s all the code required to put this widget in your blog:

STEP 1:
Download these two files from DynamicDrive:
1. tabcontent.css
2. tabcontent.js

And then upload these two files to MyDataNest.com (You need to register first)
After uploading the files, copy the DIRECT LINKS to these files.

STEP 2:
Log in to Blogger
Go to Lauout -> Edit HTML tab
Then find for this code:

</head>

Then immediately ABOVE / BEFORE it, paste this code:

<link rel=”stylesheet” type=”text/css” href=”http://DIRECT_LINK_FROM_MYDATANEST/tabcontent.css” />
<script type=”text/javascript” src=”http://DIRECT_LINK_FROM_MYDATANEST/tabcontent.js”>
/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Via http://BloggerStop.Net
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Replace the code in RED, with the DIRECT LINKS you got in Step 1.

Save the template, and
Click on “Page Elements” tab.
Then click on “Add a Gadget“, and select it as “HTML/JavaScript” type.

In the new widget, paste any of the 3 codes displayed below (the screen-shots are displayed above the codes, and demo link has already been given above ):

New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs

Code Here:

<ul id=”countrytabs” class=”shadetabs”>
<li><a href=”#” rel=”country1″ class=”selected”>Tab 1</a></li>
<li><a href=”#” rel=”country2″>Tab 2</a></li>
<li><a href=”#” rel=”country3″>Tab 3</a></li>
<li><a href=”#” rel=”country4″>Tab 4</a></li>
<li><a href=”http://bloggerstop.net”>Blogger Widgets</a></li>
</ul>

<div style=”border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px”>

<div id=”country1″ class=”tabcontent”>
Tab content 1 here<br />
</div>

<div id=”country2″ class=”tabcontent”>
Tab content 2 here<br />
</div>

<div id=”country3″ class=”tabcontent”>
Tab content 3 here<br />
</div>

<div id=”country4″ class=”tabcontent”>
Tab content 4 here<br />
</div>

</div>

<script type=”text/javascript”>

var countries=new ddtabcontent(“countrytabs”)
countries.setpersist(true)
countries.setselectedClassTarget(“link”) //”link” or “linkparent”
countries.init()

</script>
<a href=”http://bloggerstop.net/” target=”_blank”><span style=”font-size: x-small;”>Blogger Widgets</span></a>

New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs

Code Here:

<div id=”flowernote” style=”display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white”>
Arbitrary DIV 1
</div>

<div id=”flowernote2″ style=”display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white”>
Arbitrary DIV 2
</div>

<div id=”flowernote3″ style=”display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white”>
Arbitrary DIV 3
</div>

<div style=”border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px”>

<div id=”tcontent1″ class=”tabcontent”>
Tab content 1 here<br />
</div>

<div id=”tcontent2″ class=”tabcontent”>
Tab content 2 here<br />
</div>

<div id=”tcontent3″ class=”tabcontent”>
Tab content 3 here<br />
</div>

<div id=”tcontent4″ class=”tabcontent”>
Tab content 4 here<br />
</div>

</div>

<div id=”flowertabs” class=”modernbricksmenu2″>
<ul>
<li><a href=”#” rel=”tcontent1″ class=”selected”>Tab 1</a></li>
<li><a href=”#” rel=”tcontent2″ rev=”flowernote,flowernote2″>Tab 2</a></li>
<li><a href=”#” rel=”tcontent3″>Tab 3</a></li>
<li><a href=”#” rel=”tcontent4″ rev=”flowernote3″>Tab 4</a></li>
<li><a href=”http://bloggerstop.net”>Blogger Templates</a></li>
</ul>
</div>
<br style=”clear: left” />

<script type=”text/javascript”>

var myflowers=new ddtabcontent(“flowertabs”)
myflowers.setpersist(true)
myflowers.setselectedClassTarget(“link”) //”link” or “linkparent”
myflowers.init()

</script>
<a href=”http://bloggerstop.net/” target=”_blank”><span style=”font-size: x-small;”>Blogger Widgets</span></a>

New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs

With Auto-scrolling tabs…
Code Here:

<div id=”pettabs” class=”indentmenu”>
<ul>
<li><a href=”#” rel=”dog1″ class=”selected”>Tab 1</a></li>
<li><a href=”#” rel=”dog2″>Tab 2</a></li>
<li><a href=”#” rel=”dog3″>Tab 3</a></li>
<li><a href=”#” rel=”dog4″ id=”myfavorite”>Tab 4</a></li>
<li><a href=”http://bloggerstop.net”>Blogger Widgets</a></li>
</ul>
<br style=”clear: left” />
</div>

<div style=”border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em”>

<div id=”dog1″ class=”tabcontent”>
Tab content 1 here<br />
</div>

<div id=”dog2″ class=”tabcontent”>
Tab content 2 here<br />
</div>

<div id=”dog3″ class=”tabcontent”>
Tab content 3 here<br />
</div>

<div id=”dog4″ class=”tabcontent”>
Tab content 4 here<br />
</div>

</div>

<script type=”text/javascript”>

var mypets=new ddtabcontent(“pettabs”)
mypets.setpersist(true)
mypets.setselectedClassTarget(“link”)
mypets.init(2000)

</script>
<a href=”http://bloggerstop.net/” target=”_blank”><span style=”font-size: x-small;”>Blogger Widgets</span></a>

Leave a Reply

69 Comments on "New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs"

Notify of
avatar
Sort by:   newest | oldest | most voted
Madame Apro
Guest

Hello, Congratulations for winning the Contest by PinayAds…

Here’s my review to your blog. Check it out..

http://ruthrush.blogspot.com/2009/01/pimp-your-site.html

View Comment
snam
Guest

Is there any way to transfer my current codes for the multi-tab widget to the new one?

View Comment
Divya Sai
Guest

Hi snam

The codes for the widgets are different, so you have to replace the previous code, with the new one, if you want to use this. OR you can also use both of them at the same time if you want.

View Comment
snam
Guest

Alright, that is good to know. Thanks for the quick response.

View Comment
Jigsawman
Guest

Works perfectly.Thanks.Is it possible for us to modify the tab buttons and stuff like that

View Comment
Divya Sai
Guest

Yes dude that is possible, you can do this by editing the css and js files !

Regards
Sai

View Comment
snam
Guest

Hey, snam again. Is it possible to have the green tabs auto scroll like the blue one?

View Comment
snam
Guest

How do I remove this “Click here to select tab with id=”myfavorite”?

View Comment
snam
Guest

I am having some problems. The content in every tab is showing below the box except the first one. You can see what I have so far on this test blog. http://testblogsnam23.blogspot.com/

View Comment
Divya Sai
Guest

Hi snam welcome back!

I have removed that “myfaorite” code for you !

—-
And I can see content even in the first tab….subscribe via rss, subscribe via email etc.

But I suggest u not to use that auto-scroll widget, because that suits more for photos-sideshow as it cannot be easily controlled by visitors !
—-
Regards
Sai

View Comment
snam
Guest

Then can you tell me which code I need to change to change the color of the green tabs? And how do I remove the space between the green tabs? Thanks for your help!

View Comment
Divya Sai
Guest

Hi snam

In the first code, you’ll see this file:
http://dsai.588.googlepages.com/tabcontent.css

Download it, and edit it (you have to replace the images in that file with your own images of same/similar dimensions)
Now again upload it to googlepages or any other site and adjust the first code with the link to the new css file….

View Comment
snam
Guest

Thanks again!

View Comment
andy
Guest

Thanks for the code…it worked really good!!

View Comment
snam
Guest

Something weird happens when I use this on one of my blogs. I will delete it now but check out this screenshot. http://i446.photobucket.com/albums/qq181/yahoo223/Picture1-6.png

View Comment
Divya Sai
Guest

Hi snam,
I need the exact blog link, so that i can chk the widget in action, anyways I chkd all 5 blogs of yours, and found the widget in 2 blos:
test blog and allaboutmylot,
and in both of them it is working in perfectly fine condition, in case you get some problem in the widget, then do not modify anything in the template, but remove and add again the code in the HTML/JavaScript widget !

View Comment
snam
Guest

You saw my allaboutmylot blog right? How can I put it in the sidebar? I will do what I can and show you the problem.

View Comment
snam
Guest

P.S. I would like it right below the built in search bar (not the google one.) Thanks for your help!

View Comment
Divya Sai
Guest

While placing it in the right sidebar, the tabs are exceeding the width of your sidebar, so instead of writing, “total weekly” or “total monthly”, write it as “weekly” or “monthly” !

And to place it right below search bar, you have to first add a widget below search widget (from EDIT HTML section), then in this new widget you have to add the multi-tabbed widget code !

View Comment
Sangwoo
Guest

But then I would have 2 weekly and "weekly" and "total weekly" are different things. I guess I will abbreviate or something.

Could you please tell me what code I use to create a new widget? Is it like < b:widget etc.?

Thank you so much again!

View Comment
wpDiscuz