All About Blogging: How to Add Tabs in Blogger Blog

In fact tabs in the sites and blogs are a way of managing bulk of content in a page easily. Tabs help to manage your bulky content easily. If you have lots of content in a single page then, there become difficulty to the viewers/visitors to read all of them content. Instead if you have put content in tabs then visitors can read all of them clicking tabs one by one.

Here is the step by step process of adding the tabs in the blogger blog's sidebar.

Add Tabs Button in the Sidebar and a single page of Blogger:

Step 1: Login to blogger and then go to template and click on edit html.

Step 2: Now just find the </head> code just press CTRL+F to find it.

Step 3: After finding the </head>, you just put the below code just above it.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#tab-content").tabs();
});
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" />

Step 4: Now you just have to put the html/javascript tabs code. To add the code, go to layout>>add widget and find html/javascript widget. Then just paste the below code on it and save it. If you want to add in a single page then just go to any page or posts and click html instead of compose then add it onto there.

<div id="tab-content">
<a href="http://allblogsolution.blogspot.com/" style="font-size:8px; color:#eee;" target="_blank" title="All Blogging Solution">All Blogsolution</a>
<ul><li><a href="#tabs-one">first Tab</a></li><li><a href="#tabs-two">second Tab</a></li><li><a href="#tabs-three">third Tab</a></li></ul>
<div id="tabs-one"> Write first tab content </div>
<div id="tabs-two"> Write second tab content </div>
<div id="tabs-three"> Write third tab content </div>
<a href="http://allblogsolution.blogspot.com/" style="font-size:8px; color:#eee;" target="_blank" title="All Blogging Solution">All Blogsolution</a>
</div>

Now you have successfully added the sidebar widget into your blogger blog. This is one of the easiest way to add the tab navs into a blogger.

Note: You should add your own content in the blue color text "Write first tab content" which will be shown on you sidebar or a single posts or page.

If any difficulties occur, then comment us.