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

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

42 comments

Write comments
March 26, 2009 10:37 PM delete

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

Reply
avatar
March 27, 2009 1:53 AM delete

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

Reply
avatar
March 27, 2009 4:21 AM delete

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

www.hacking2all.blogspot.com

Reply
avatar
March 27, 2009 12:38 PM delete

@ 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

Reply
avatar
March 27, 2009 12:41 PM delete

@ Arun,

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

Reply
avatar
March 28, 2009 8:53 AM delete This comment has been removed by a blog administrator.
avatar
March 28, 2009 4:59 PM delete

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.

Reply
avatar
March 29, 2009 5:15 AM delete

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...

Reply
avatar
March 29, 2009 7:46 AM delete

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

Reply
avatar
March 29, 2009 7:47 AM delete

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

Reply
avatar
March 29, 2009 8:49 AM delete

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

Reply
avatar
Anonymous
March 30, 2009 10:16 AM delete

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.

Reply
avatar
April 08, 2009 9:20 AM delete

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

Reply
avatar
April 08, 2009 10:50 AM delete

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 !

Reply
avatar
May 31, 2009 1:47 PM delete

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..

Reply
avatar
May 31, 2009 2:11 PM delete

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 !

Reply
avatar
May 31, 2009 4:47 PM delete

Nice demo..

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

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

Reply
avatar
June 02, 2009 3:40 PM delete

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

Reply
avatar
steve
July 15, 2009 1:24 PM delete

Is it possible to make the red tabs another color?

Reply
avatar
July 15, 2009 2:13 PM delete

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

Reply
avatar
Guest
August 22, 2009 5:32 PM delete

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!!!

Reply
avatar
Divya Sai
August 23, 2009 4:59 AM delete

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

Reply
avatar
Guest
August 25, 2009 12:32 PM delete

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>

Reply
avatar
Divya Sai
August 25, 2009 12:52 PM delete

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...

Reply
avatar
Guest
August 26, 2009 4:23 AM delete

You are a genius!! Thank you thank you!

Reply
avatar
Anonymous
September 25, 2009 7:36 AM delete

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?

Reply
avatar
Anonymous
September 25, 2009 10:24 PM delete

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

Reply
avatar
September 26, 2009 3:03 AM delete

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...

Reply
avatar
Anonymous
September 26, 2009 7:34 AM delete

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

Reply
avatar
October 06, 2009 4:22 PM delete This comment has been removed by a blog administrator.
avatar
ETM
January 13, 2010 12:01 AM delete

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.

Reply
avatar
January 13, 2010 6:08 AM delete

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

Reply
avatar
July 14, 2010 2:30 PM delete

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

Reply
avatar
July 14, 2010 4:08 PM delete

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/

Reply
avatar
October 20, 2011 3:32 AM delete

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.

Reply
avatar
November 08, 2011 5:27 AM delete

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

Reply
avatar

Comments are moderated on this blog

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

Comment Like This! and Optimize your blog EmoticonEmoticon