Recently, I realized that my sidebar is so populated. I have so many useful widget in my sidebar that cause it to extend so long. One solution to this is to add tabs in my sidebar that has at least 3 sections. Good thing that one of the blogs that I followed which is Soh Tanaka's blog did make a tutorial on how to make a simple tabs with CSS and jQuery. View Tabs demo. This is easy to put on blogger a.k.a. blogspot because you have full access on the blog's code. You can see the tabs on my sidebar after editing some CSS codes to suite my blog's design. Since all the codes are provided in Soh Tanaka's Blog, I will teach you how to put it in your blogger a.k.a. blogspot blog. The good thing about this tutorial is you don't have to use external file storage. All the codes are directly inputted on your blogger's HTML code.To do this first log in to your account -> Layout -> Edit HTML -> Under the Edit Template Box and Paste this code <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> under <head> tag. This code will enable you to use jQuery.
Next is to paste this jQuery code:
$(document).ready(function() {
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
Under <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
Next is to add the CSS code. Paste this code:
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
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;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
Above ]]></b:skin>
If you wish to modify the CSS or jQuery, you can do so at your own risk.
Now we're done with the CSS and jQuery code. Next is to go to Page Elements under Layout tab -> Add a Gadget on your sidebar -> Select HTML/JavaScript and paste this code:
<ul class="tabs">
<li><a href="#tab1">Your_Tab1</a></li>
<li><a href="#tab2">Your_Tab2</a></li>
<li><a href="#tab3">Your_Tab3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Your_Tab1_Content-->
</div>
<div id="tab2" class="tab_content">
<!--Your_Tab2_Content-->
</div>
<div id="tab3" class="tab_content">
<!--Your_Tab3_Content-->
</div>
</div>
Click Save and your done. You can change the tabs name and the tabs content anytime. All the credits to Soh Tanaka. If you have any questions just comment it here.
Please note that you can add or remove tabs as you want.
