GoodinBlogging: Create a Multi Tabbed Widget for Blogger

Well Multi Tabbed Widget is a Featured one. it Helps in Reducing the Load time of a Blog.it combines two or More Widgets into a Single Widget.it is Accustomed with Tabs and Content Window and By Clicking on the Tabs We Get the desired App.These Type of Widgets Are Useful Generally for Top and Recent Commenters,Recent Posts,or Any Such type of Widgets.

Now Follow the below Steps to Proceed.

1. Login to Blogger and navigate to Design < Edit Html

2. Now Check The Expand Widget Templates Box

3. Now Find for the </head> tag .Paste the Following Code Before/Above </head> tag.


<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

Now Return Back to Design And Choose page Elements < Add a Gadget < Choose Html/Javascript and paste the Below Code in it.


<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://goodinblogging.blogspot.in/2012/06/create-multi-tabbed-widget-for-blogger.html
' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://goodinblogging.blogspot.in/' target='_blank'>GoodinBlogging</a></small> 
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

Now Replace Tab1,tab2,tab3 content Here With the Widget Codes and Also Change the Tab1,Tab2,Tab3 Titles.
That's it Save the Template and now you're Done.

Create a Multi Tabbed Widget for Blogger

0 comments: