Advanced Collapsible Multi-Tabbed Widget
UPDATE: This widget is no longer working. A new tutorial has been written on "How to Add Collapsible Multi-Tabbed Widget"
I have already two tutorials in this blog on 'how to add multi-tabbed widgets' - Post 1 and Post 2, but this one is very different and more professional too.
Requested by maboroshine, this widget is capable of auto-adjusting the height of different tabs according to their content.
The widget looks like this:
But when you select tab 2 or tab 3, the height of the widget will adjust itself according to the content in tab 2 or tab 3.
To see this widget in action see this blog: Club-Vista Template
Or see it live here: Demo 2
Instructions to add this widget to your blog:
Step1:
Download these two files:
jquery-ui-personalized-1.5.2.packed.js
sprinkle.js
from NetTutsPlus | (Download the Source.zip file)
NOTE: Delete extra files (index.html, jquery-1.2.6.min.js, star.png, style.css) included in the downloaded zipped file.
Also download
new-tabber-Style.rar
from Here - Ziddu.com
Extract and save the file as new-tabber-Style.css
Step2:
Now go to MyDataNest.com and upload all those 3 files. And copy all the DIRECT LINKS to these files.
Step3:
Log in to Blogger
Go to "Layout" -> Edit HTML
and find (CTRL+F) this in the template code :
And immediately BEFORE/ABOVE it, paste this code:
Before pasting the code in to your template, replace the links in RED to the DIRECT LINKS of the files you got from step 2.
Step4:
Now save the template.
Step5:
Go to "Layout" -> Page Elements and Add a Gadget (HTML/JavaScript type)
Step6:
And finally copy and paste this code in to the new widget:
Of course change the colored code as per your requirement.
NOTE: To adjust the width of the widget or margin around the widget or to replace the silver star with any other image, you have to EDIT the .css file (new-tabber_style.css) before uploading it to HotLinkFiles.com
So add this professional widet to your blog ASAP !
I have already two tutorials in this blog on 'how to add multi-tabbed widgets' - Post 1 and Post 2, but this one is very different and more professional too.
Requested by maboroshine, this widget is capable of auto-adjusting the height of different tabs according to their content.
The widget looks like this:
But when you select tab 2 or tab 3, the height of the widget will adjust itself according to the content in tab 2 or tab 3.
To see this widget in action see this blog: Club-Vista Template
Or see it live here: Demo 2
Instructions to add this widget to your blog:
Step1:
Download these two files:
jquery-ui-personalized-1.5.2.packed.js
sprinkle.js
from NetTutsPlus | (Download the Source.zip file)
NOTE: Delete extra files (index.html, jquery-1.2.6.min.js, star.png, style.css) included in the downloaded zipped file.
Also download
new-tabber-Style.rar
from Here - Ziddu.com
Extract and save the file as new-tabber-Style.css
Step2:
Now go to MyDataNest.com and upload all those 3 files. And copy all the DIRECT LINKS to these files.
NOTE: In your MyDataNest account, edit and save the properties of the folder as "hidden" and NOT as "private" where you just uploaded the files.
Step3:
Log in to Blogger
Go to "Layout" -> Edit HTML
and find (CTRL+F) this in the template code :
</head>
And immediately BEFORE/ABOVE it, paste this code:
<!--MULTI-TABBED-WIDGET-STARTS-->
<link href='http://mydatanest.com...../new-tabber_style.css' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://mydatanest.com...../new-tabber_jquery-ui-personalized-1.5.js' type='text/javascript'/>
<script src='http://mydatanest.com...../new-tabber_sprinkle.js' type='text/javascript'/>
<!--MULTI-TABBED-WIDGET-STOPS-->
Before pasting the code in to your template, replace the links in RED to the DIRECT LINKS of the files you got from step 2.
Step4:
Now save the template.
Step5:
Go to "Layout" -> Page Elements and Add a Gadget (HTML/JavaScript type)
Step6:
And finally copy and paste this code in to the new widget:
<div id="tabvanilla" class="widgettab">
<ul class="tabnav">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</ul>
<div id="popular" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li><li><a href="#">Sheep Rising From The Dead</a></li><li><a href="#">Blogosphere Daily Released!</a></li><li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li><li><a href="#">U2 Rocks New York's Central Park</a></li><li><a href="#">TA Soldiers Wear Uniforms To Work</a></li><li><a href="#">13 People Rescued From Flat Fire</a></li><li><a href="#">US Troops Abandon Afghan Outpost</a></li><li><a href="#">Are We Alone? A Look Into Space</a></li><li><a href="#">Apple iPhone 3G Released</a></li></ul>
</div><!--/popular-->
<div id="recent" class="tabdiv">
<p>Your recent posts widget here</p></div><!--/recent-->
<div id="featured" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li><li><a href="#">Are We Alone? A Look Into Space</a></li><li><a href="#">U2 Rocks New York's Central Park</a></li><li><a href="#">TA Soldiers Wear Uniforms To Work</a></li><li><a href="#">13 People Rescued From Flat Fire</a></li><li><a href="#">US Troops Abandon Afghan Outpost</a></li><li><a href="#">Sheep Rising From The Dead</a></li><li><a href="#">Blogosphere Daily Released!</a></li><li><a href="#">Apple iPhone 3G Released</a></li><li><a href="#">Welsh Zombie Sheep Invasion</a></li></ul>
</div><!--featured-->
</div>
Of course change the colored code as per your requirement.
NOTE: To adjust the width of the widget or margin around the widget or to replace the silver star with any other image, you have to EDIT the .css file (new-tabber_style.css) before uploading it to HotLinkFiles.com
So add this professional widet to your blog ASAP !
No comments: