Multi-Tabbed Widget For Blogger

Multi 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.




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






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 1 , Tab 2  , Tab 3




Replace these with your widget codes.

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

Step 4:

Preview and save the template.