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.
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.
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...
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>
<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>
<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...
10 comments:
wow really nice and cool...
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
@Riz2011The Problem is your tags are not well formed,Nothing Problem in the Code..
Do u repeat the Same step 3 with little care..
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/
@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'>
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
Very Nice widget. keep up the good work.
www.NewBloggerTips.com
Ultimate Facebook like with Twitter follow button and Email subscription box for Blogger
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
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!
@Valerie Rath
Can you provide the blog url?
Respects for your's Questions & Opinions