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 ):

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>

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>

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>