x

Subscribe to GwArez !



Pages

Whatever you need!!! We bring it!!!

Saturday, June 18, 2011

Multi Tabbed Widgets For Blogger

Here's another simple and useful multi-tabbed widget, with Next/Prev page navigation available in every tab.
It is very easy to edit and add this widget to your blog, moreover you can easily control the number and color of tabs and body in the widget.
You can see the live demo in this page: Multi-Tabbed-Widget

To add a similar widget to your blog, you need to follow these instructions:

STEP1:
Download and save these files to your computer.
jquery-1.3.2.min.js
jquery-ui-1.7.custom.min.js
tabs.css [You have to edit this file, if you want to change the default settings like color/dimensions of the widget]

Download Zipped File (TabsNextPrev.zip) from CSS-Tricks.com

STEP2:
Now open an account at MyDataNest.com or Sigmirror.com, and upload those 3 files to any of these two websites, and copy the DIRECT LINKS to these files.

STEP3:
Log in to Blogger, go to Layout -> Edit HTML
and find this code:

</head>

Now immediately ABOVE/BEFORE that code, paste these lines:
<!--JQuery-Prev-Next-Tabber-Starts-http://bloggerstop.net-->
<link rel="stylesheet" href="http://sigmirror.com/........../TEMP_tabs.css" type="text/css" media="screen, projection"/>

<script type="text/javascript" src="http://sigmirror.com/........../TEMP_jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://sigmirror.com/........../TEMP_jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript">
$(function() {

var $tabs = $('#tabs').tabs();

$(".ui-tabs-panel").each(function(i){

var totalSize = $(".ui-tabs-panel").size() - 1;

if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
}

if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
}

});

$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});

});
</script>
<!--JQuery-Prev-Next-Tabber-Stops-http://bloggerstop.net-->
Make sure, you replace the links in RED color above with the DIRECT LINKS of the three files, you got from the previous step.

STEP4:
Save the template, and go to Layout -> Page Elements, and click on "Add a Gadget", select it as "HTML/JavaScript" type.
Now paste this code in to the widget:

<div id="page-wrap">

<div id="tabs">

<ul>
<li><a href="#fragment-1">1</a></li>
<li><a href="#fragment-2">2</a></li>
<li><a href="#fragment-3">3</a></li>
<li><a href="#fragment-4">4</a></li>
<li><a href="#fragment-5">5</a></li>
<li><a href="#fragment-6">6</a></li>
<li><a href="#fragment-7">7</a></li>
<li><a href="#fragment-8">8</a></li>
<li><a href="#fragment-9">9</a></li>
<li><a href="#fragment-10">10</a></li>
<li><a href="#fragment-11">11</a></li>
<li><a href="#fragment-12">12</a></li>
<li><a href="#fragment-13">13</a></li>
<li><a href="#fragment-14">14</a></li>
<li><a href="#fragment-15">15</a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel">
<p>Start</p>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<p>Content of Tab 2 </p>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<p>Content of Tab 3 </p>
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-6" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-7" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-8" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-9" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-10" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-11" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-12" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-13" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-14" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-15" class="ui-tabs-panel ui-tabs-hide">
<p>The end.</p>
</div>

</div>
</div>
<a href="http://bloggerstop.net" target="_blank">Blogger Templates Widgets</a>
Change the names and content (of tabs) in the code above, before saving the widget.

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

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://gwarez.blogspot.com">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://gwarez.blogspot.com">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://gwarez.blogspot.com">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>

No comments:

Post a Comment