Did you notice the multi tabbed widgets on sidebar of many blogs. How is it? Did you like it? Want to implement in your blog? Then this post is for you. This widget gives you effective use of space, ease of customization and easy navigation.

For a multi tabbed widget used in this blog, visit the source here. He described the code as steps, no need of repeating here. This widget can be used multiple times in the same blog. Also we can add other Gadgets in to tabs using blogger’s layout editor.

The above screen shot is from blogger–> layout–> page elements. We can add Gadgets to it by selecting the corresponding tab number.

Adding multiple “multi tabbed navigation widget” to the same blog

Note: For adding second time, no need of repeating all steps. Only the last step is needed, that is step 3.

For adding multi tabbed Widget second time to the same blog, notice the red coloured codes and replace it with your own. Otherwise it will cause conflictions in your code and cannot save the template.

<div id=’tabsidebar-wrapper’>
<div class=’tabber’ id=’tab1′>
<div class=’tabbertab’>
<b:section class=’sidebar’ id=’tabbertab1′ maxwidgets=’1′ showaddelement=’yes’>
</b:section>
</div>
<div class=’tabbertab’>
<b:section class=’sidebar’ id=’tabbertab2′ maxwidgets=’1′ showaddelement=’yes’>
</b:section>
</div>
<div class=’tabbertab’>
<b:section class=’sidebar’ id=’tabbertab3′ maxwidgets=’1′ showaddelement=’yes’>
</b:section>
</div>
</div></div><!– End the tabsidebar-wrapper—>

Replace the red coloured codes with some name or at least add a numeric after that. Use this method to add multiple times.

 PS: For adding multiple Gadgets to the same tab, change value of maxwidgets to the value as you like.


Share this article