Wednesday, January 26, 2011

Simple jQuery Multi Tabbed Navigation Widget For Blogger

10 comments 1/26/2011
Sign up to receive our site updates!
So many people  heard about jQuery, for me still now no chance to work on that,finally the day came and i did tabbed navigation in one of my project.While working on that i got idea to make Blogger Widget.

Still i remember,How much struggle i faced to setup Multi Tabbed Widget on my blog. But here now i am going to show in easy 3 steps.






Step 1:Login to Blogger dashboard » layout » Edit HTML

Find(CTRL+F) ]]</b:skin>tag.

Now copy and paste below code just before ]]</b:skin> this.

/*--------TechTasks Tabber CSS-------------------------*/
.techtasksTabber
{}
.tab_container {
border: 1px solid #0080FF;/*--Set The Border Color Of Tab Container--*/
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff; /*--Set The BackGround Color Of Tab Container--*/
}
.tab_content {
padding: 10px;
font-size: 1.1em;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #0080FF;/*Bottom Border Color Of Tab Menu */
width: 100%;
}
ul.tabs li {
float: left;
margin-right:5px;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-bottom:1px solid #0080FF;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0; /*Set Background color of Tab menu*/
}
ul.tabs li a {
text-decoration: none;
color: #000; /*Set tab text Link Color*/
display: block;
font-size: 1.1em;
padding: 0 5px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;/* Set Tab Mouse over Background Color */
}
ul.tabs li.active{
background: #fff;/* Set Active Tab Background Color */
color:#0080FF;
border:1px solid #0080FF;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
ul.tabs li.active a:hover /*--Set the active tab mouse hover properties--*/
{
background: #fff; /* Set active Tab Mouse over Background Color */
}
/*----------End TechTasks Tabber CSS--------------*/


»If you want customize the Tabbed Widget colors just Follow the comments to Change the colors

»Simply replace these colors with your custom colors in the above code respectively.

Step 2:Find </head> .

Cope and paste the below just before </head> this.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
/*----------Start TechTasks Tabber Script--------------*/
$(document).ready(function() {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
/*----------End TechTasks Tabber Script--------------*/
</script>

Step 3:Find <div id='sidebar-wrapper'> or <div id='sidebar'>

If u can't find above code don't bother about that,Coz template designers are developed different ways.Just find the starting <Div> of Sidebar

Now copy and paste below code just below that.
<div id='techtasksTabber'>
<ul class='tabs'>
<li><a href='#tab1'>Recent</a></li>
<li><a href='#tab2'>PageViews</a></li>
<li><a href='#tab3'>Subscribe</a></li>
</ul>

<div class='tab_container'>
<div class='tab_content' id='tab1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tab_content' id='tab2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tab_content' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
</div>

Finally Save the Template.



Then Go to your page Elements Page and add the widgets for your tabs one by one.

Feel Free to ask any queries about this...
Your Ad Here

10 comments:

FunnyScraps on February 5, 2011 at 6:16 PM said... [Reply]

wow really nice and cool...

Riz2011 on March 25, 2011 at 3:02 AM said... [Reply]

Hi,

iam having problem to add step 3 code. i received this error "The template is invalid. Please make sure it is well-formed and complies to the Blogger Template Language Specifications" after adding the code below ""

Please hep me.

Thanks in advance

Rajesh Chekuri on March 27, 2011 at 10:08 AM said... [Reply]

@Riz2011The Problem is your tags are not well formed,Nothing Problem in the Code..
Do u repeat the Same step 3 with little care..

Riz2011 said... [Reply]

I know and very sure there is nothing wrong with your code but i acctually having problem to add the to my 3 column template which custom desinged with artisteer.

Could u have a look at my test blog at http://dadummy.blogspot.com/

Rajesh Chekuri on March 27, 2011 at 11:37 PM said... [Reply]

@Riz2011,I digg into ur template...
1.Find the Following line and add the step 3 code just below of the line.
Then finally ur code looks like as follows...
<div class='art-sidebar2 section' id='sidebar2'>
step3 code here ...
.
.
<div class='widget CustomSearch' id='CustomSearch1'>

Anonymous said... [Reply]

i couldn't figure out where to add the last section of code in my blog either. Any help? www.kidsallaround.com cvkidsallaround(at)gmail

Namita Choudhary on November 6, 2012 at 12:35 PM said... [Reply]

Very Nice widget. keep up the good work.

www.NewBloggerTips.com
Ultimate Facebook like with Twitter follow button and Email subscription box for Blogger

Mil Chistes on January 11, 2013 at 9:13 AM said... [Reply]

thank you so much! I've been looking for a simple multitab that load quick and finnaly i found it! :D

I needed one like this cuz my blog has a lot of images and need to load quick ;)

thanks :D

i customize the css as i wanted and it looks great..

this is my blog www.milchistes.net

Thanks again, and great blog yours ;)

see ya

Valerie Rath on March 25, 2013 at 2:44 AM said... [Reply]

I love the idea of having a multitab sidebar widget in my blog. But for the life of me I can't seem to find the code for Step 3. I've looking for it for an hour and I can't find it anywhere. Any help would be appreciated!

Rajesh Kumar Chekuri on April 1, 2013 at 12:48 PM said... [Reply]

@Valerie Rath
Can you provide the blog url?

Respects for your's Questions & Opinions

  • Friends
  •  

    Recent Posts

    New Comments

    Copyright 2008 All Rights Reserved Tech Tasks Template by Rajesh Kumar Chekuri