Adding more Tabs to my Multi Tab Widget

This post is based off the marvelous post by Mohammad Mustafa Ahmedzai from My Blogger Tricks about making a fully widgetized Multi Tab widget for blogger blogs.  His code works flawlessly and is extremely easy to manipulate to make it your own.  One thing he does not go into much detail about is how to add and remove tabs from the MultiTab.  it is exteremly easy and I will show you how.


Adding a new Tab
1.  Save your Template > Dashboard > Layout > Edit HTML

2.  After installing the code as instructed in Mohammad's post go back and locate
<div id="sidebar-wrapper"> The Tabber "add widget" code should be located directly underneath it.  NOTE:  If you moved the code to a different area on your blog the Multi Tab code will be located there.  For example under the main-wrapper or footer-wrapper.  The code will look like this:

<div class='tabber'>

<b:section class='tabbertab' id='tab1' maxwidgets='1'/>

<b:section class='tabbertab' id='tab2' maxwidgets='1'/>

<b:section class='tabbertab' id='tab3' maxwidgets='1'/>

<b:section class='tabbertab' id='tab4' maxwidgets='1'/>

</div>

 3.  Now copy one of the above lines, for example: <b:section class='tabbertab' id='tab4' maxwidgets='1'/>

4.  Paste the line of code right above the </div>

5.  Change the id='tab#' to the next number.  If you are currently using 4 tabs, change the new one to 5.

6.  Save Template

Removing a Tab

1.  Save Template > Dashboard > Layout > Edit HTML

2.  locate <div id="sidebar-wrapper">

The Tabber "add widget" code should be located directly underneath it. NOTE: If you moved the code to a different area on your blog the Multi Tab code will be located there. For example under the main-wrapper or footer-wrapper. The code will look like this:

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>
</div>

3.  Highlight and Delete the tab you no longer want.  It is preferable if you highest number tab.  If you are using 4 tabs, do not remove tab3 and keep tab 4.  It is simply good programming habit.

4.  Save Template


For more information on installing and customizing the code please visit the original article.