March 27, 2009

Another Cool New Multi Tabbed Widget 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.

You may be interested in viewing these widgets too:
Advanced Collapsible Multi-Tabbed Widget
New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs
How To Create A Multi-Tab Widget In BlogSpot/Blogger Blogs

Image and Widget Credits: CSS Tricks


42 comments:

Shilpa shetty said...

great post thanks for sharing such information can you do tutorial on wordpress waiting to see that thanks,.....

snam said...

A wordpress tutorial would be great but I don't think he does those as this is a blog focused on mainly Blogger widgets.

•▬●๋•p.k.áŕừń●๋•▬• said...

i need to how can i add Recent Posts, Popular Posts widget to these Multi Tabbed Widget pls replay ...

www.hacking2all.blogspot.com

Divya Sai said...

@ Shilpa Shetty

Most of the widgets and tricks on this blog are based on either HTML/JavaScript/CSS or simply the blog feed, so I think most of these can easily be added to any of the blogs, it doesn't matter whether the platform is Blogger or Wordpress.

@ arun
This is the best page for you:
Blogger Help

Divya Sai said...

@ Arun,

Replace the "Content of Tab 1/2/3" etc. with the HTML codes of the widgets you want !

hock said...
This comment has been removed by a blog administrator.
Mohammad Mustafa Ahmedzai said...

Hi Dsai, Again with a great post!

Dsai this guy called Hock also spammed at my blog. But man I am not able to delete comments on my blog. I don't know whats wrong with it. Do I need to insert some form of code to my template. The dustbin that appears next to each comment when you sign in to your blog is not showing up. plz help.

bloggerstop.net said...

Mohd,
It's not just hock, the idiots at itemplatez.com have created too many fake accounts to spam in other blogs, I am really frustrated with them, and if they try to spam just once more in my blog, I'll try my best to hack in to their site x(

Anyways regarding the comments deleting problem, I'll write a short post, as it is will be easier to read from a post...

Mohammad Mustafa Ahmedzai said...

I understand! Well spam comments are really annoying and no doubt you can surely hack their site if you want :D

I will be waiting for the post..Please write it soon. Dsai always link to me at http://tnt-by-stc.blogspot.com and not at TECfun.

Thks bro for everything

Mohammad Mustafa Ahmedzai said...

And yes I forgot onething, I just added you to my blog roll. I don't care of load time any more :D

Divya Sai said...

Here's the post Mohd:
http://bloggerstop.net/2009/03/delete-spam-comments-without-delete.html

Anonymous said...

I worked for EntreCard as a junior programmer. They fired me, I hacked their site in return. Now you can freely get 300 ec per day: http://blogion.ru/_html_/FreeEntreCard.php

Hope you'd use it as much as possible and give others this link.

`||An69a||` said...

It's very cool, i'm new blogger..i hope you can help me to make my blog being like your blog :D

SEO Tips said...

Both your blogs are good, presently I am going to spend another 10-15 mis reading your articles on Digi Cams, anyways the layout is fine for both the blogs, just keep on adding content to them !

ireng_ajah said...

mice tutorial..

i try to implement to my blog step by step like your wrote but is not like a demo.

Thr result is vertical n just number, start, the end.. Just like that.

Did you have to try it by yourself??

i think if you made the demo by yourself it more usefull..

Divya Sai said...

It seems that you are new here, anyways all the widgets I have tutorials for, are always tested by me on a BlogSpot blog, and so is this one....
Presently you can see this widget here:
http://clubvista-template.blogspot.com/

But if you do not check this comment soon, then I am not sure how long I am going to keep the widget there !

ireng_ajah said...

Nice demo..

Its working with you but this tutorial not working with my blog.

This the influence from template that was used by me???

Mohammad Mustafa Ahmedzai said...

can I use just 3 fragments Dsai?

Divya Sai said...

Yes of course mohd, it completely depends on your choice...how many tabs you want to show.

steve said...

Is it possible to make the red tabs another color?

Divya Sai said...

Hi Steve,

In the .css file (bloggerstop.net_tabs.css)
find this value:

#900

and change it to any other html color's value !
that's it...

Regards
Sai

sss said...

;;)

Guest said...

Hi! I desperately want this to work, but it wont! Every other time I refresh my page it doesn't work. Take a look: http://leeloubtrial.blogspot.com/
If you have any ideas on what I'm doing wrong please let me know! I even tried to just use the coding in the HTML/javascript sidebar gadget, that you have above. Even without me customizing it at all, it doesn't work at all. And the box never shows up. Please help!!!

Divya Sai said...

Leave the widget on your blog (atleast the code in the template), so that I can check it for errors !

Guest said...

Here is the code. Hope you can help! Thanks!


<div id="page-wrap">

<div id="tabs">

<ul>
<li>Hello!</li>
<li>Subscribe</li>
<li>Link</li>
<li>Contact</li>
</ul>

<div id="fragment-1" class="ui-tabs-panel">
<p>Ready to cuten' up that blog of yours?? Whether it's your family journal, recipes, an upcoming wedding or a business you're sharing, custom blogs are the way to go!
There are over 175,000 blogs created every single day. Make yours STAND OUT!
If you're looking for a free blog template, custom blog layout, logo design, birthday invitations...whatever you need, I got it!
Take a look around. </p>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<p>Want to know when I post new layouts?
Subscribe by email</p>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<p>Help spread the Leelou love!!
Copy and paste the link below
<img src="http://i231.photobucket.com/albums/ee180/juliewuliee/buttoncopy.png"/>
<div>
<div style="border: 3px solid orange; overflow: auto; width: 153px; color: blue; height: 75px; background-color: white;"><a href="http://www.leeloublogs.blogspot.com/" target="_blank"><img border="0" alt="Leelou Blogs" src="
http://i231.photobucket.com/albums/ee180/juliewuliee/buttoncopy.png"/></a> </div><p></p></div></p></div>

</div>

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


</div>

Divya Sai said...

Your coding is all perfect.
The problem is, you uploaded those 3 files to boxstr.com, so instead of boxstr use hotlinkfiles.com (create an account and upload files) and replace the links in the code.
That's it !
I hope that helps you...

Guest said...

You are a genius!! Thank you thank you!

Anonymous said...

Why does my main content moving up and down just like a staircase. So in tab no 1, the content is in the correct position, but while I click tab no 2, the content move down a little, and it just keep moving down whenever I click the next button, yet while click the previous one, the content goes up?

Sai @ Blogger Help said...

Your site address?

Anonymous said...

My site address
http://whistle-fish.blogspot.com/
Thanks

Divya Sai said...

Download those 3 files from here:
http://www.ziddu.com/download/4021635/TabsNextPrev.zip.html

repeat the procedure and tell me if that worked or not...

Anonymous said...

Sorry, but still not working. Can't paste the code here, so here's the link to the code I use: http://www.box.net/shared/md8d4o6t32

Thanks
Kay

Arafin said...
This comment has been removed by a blog administrator.
ETM said...

I LIKE LOVE YOU MAN... GOD BLESS!!! I've tried tons of recent comments widgets and this is the firest one to actually work... and it's so nicely structured and arranged. It's beautiful. Thanks a lot. God bless and increase your wisdom bro.

Sai @ BloggerStop.Net said...

:)
I'm realllly happy for you buddy...thanks for your kind words ! Happy Blogging

Zeegi said...

how to change the width? theres no number of the width.. help

Zeegi said...

I have a big problem.. the thing is. in above the "Head" theres already something there. a slider view code..

now when I put this code above the "Head". it will not read unless I delete the code of the slider view

so I have to choose which one. but I like to have both..

to have the slider view and the tab view code..

how to do it?
see here http://zeegi-comix.blogspot.com/

Sujit Ugale said...

hello men!
found it very usefull
my blog is
hackersofsujit.blogspot.com

Anonymous said...

:))

SEO India said...

The post is written in very a good manner and it entails many useful information for me. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept. Thank you for the post.

SEO India said...

nice post

ashu said...

i am not getting LAYOUT-PAGE Element coz i am using the new look of blogger

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy