How to Add Tabs in Blogger Blog

Indeed tabs in the locales and online journals are a method for overseeing greater part of substance in a page effectively. Tabs help to deal with your massive substance effortlessly. On the off chance that you have loads of substance in a solitary page at that point, there move toward becoming trouble to the watchers/guests to peruse every one of them content. Rather in the event that you have placed substance in tabs then guests can read every one 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>
<!-- All Blog Solution provides this widget for blogger blogs only  -->

 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.