Multi-Tabbed Widget For Blogger

Multi-Tabbed Widget For BloggerMulti tab Widget is a great space efficient widget for Blogger. It helps to decrease the load time of your Blogger blog by combining three or more than three widgets into one. The tabbed navigation widget features tabs and a content window; when clicking on the tabs, different content is visible in the window beneath. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like.

Follow these steps to add a Multi-Tabbed Widget to your Blogger blog.


Step 1:

Login to your Blogger account and navigate to, Template >> Edit HTML, hit Proceed and check Expand Widget Templates.


How To Add Facebook Comments Box To Blogger Blog

Step 2:

Find (CTRL+F) this in the code:

</head>

and paste the following piece of code just before/above it

<script src="http://www.webaholic.co.in/other/blogger-tabbed-widget-javascript.js" type="text/javascript"></script>
<link href="http://www.webaholic.co.in/other/blogger-tabbed-widget-css.css" rel="stylesheet" type="text/css" />

Step 3:

Now go to Layout > Add a Gadget > Javascript/HTML


Blogger Multi-Tabbed Widget
Multi-Tabbed Widget For Blogger
Blogger HTML/JavaScript

Now copy and paste the code below:

<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' href='http://www.blogger.webaholic.co.in/2011/10/multi-tabbed-widget-for-blogger.html' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://www.webaholic.co.in/' target='_blank'>Webaholic</a></small>
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>


Note:
Replace these with your tab titles

Tab 1Tab 2  , Tab 3

Replace these with your widget codes.

Tab 1 content goes hereTab 2 content goes here ,  Tab 3 content goes here


Step 4:

Preview and save the template.