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.

Create an HTML Form that Emails you on Submit

 One of the hardest things to accomplish when creating your own website or blog is getting true feedback or interaction with the visitors of your blog.  But with the amazing FREE features from EmailMe Form makes it easy to create:

• Submission Forms
• Questionnaires
• Feedback Forms
• Surveys
• Online Applications
• Contact Forms
• Add More

Here is a direct quote from EmailMe Form's website:

"EmailMe Form - A free service offering customizable web forms, such as Contact forms, online Questionnaires and Surveys. In just minutes you can have a form up on your website collecting results, regardless of your hosting server configuration or ability to run scripts. Now is the time to replace the old mailto: email tag on the contact page with an awesome contact form with a Captcha image verification to stop spam."

I use EmailMe Form for all of my form needs.  It is so easy to use and hosts so many great options for me.  I trust EmailMe Form and would recommend it to everyone who has any need for an HTML form.

Add Widgets Above/Below The Header

This is another easy one!

First!!! BACKUP YOUR BLOG!

Go to "Customize"


Now click on "Layout", Then "Edit HTML"

Now press "Ctrl + F" and type "maxwidgets" into the Find Box. It should take you to here:

Delete the code "maxwidgets='1'", and change "showaddelement='no'" to "showaddelement='yes'". Here is what the final product should look like:

Code:

Result:

Create a Show/Hide Link

Show/Hide

Learn To Make This

I have seen nearly 30 different ways to do this for blogger.com blogs but this method is by far the easiest!

First!!! BACKUP YOUR BLOG!

2. Go to "Customize"


3. Now click on "Layout", Then "Edit HTML"


4. How copy and paste the following code just above the "</head>" code, and just below the "]]/:skin>" code.

<script language='javascript'>
function toggle() {
var ele = document.getElementById(&quot;toggleText&quot;);
var text = document.getElementById(&quot;displayText&quot;);
if(ele.style.display == &quot;block&quot;) {
ele.style.display = &quot;none&quot;;
text.innerHTML = &quot;show&quot;;
}
else {
ele.style.display = &quot;block&quot;;
text.innerHTML = "hide&quot;;
}
}
</script>

Before:

After: (This picture is missing some code and will be updated soon)

5. Now paste the following code where ever you need.

<a id="displayText" href="javascript:toggle();" id="displayText">Show/Hide</a>
<div id="toggleText" style="display: none;">Hidden Text or Object Goes Here</div>

The above code can be placed anywhere whether it be within a blog post or in a widget or even in the template to show/hide entire columns. The text "Hidden Text or Object Goes Here" can be replaced with any amount of text or even entire widget or entire embedded websites.

If you want to add multiple Show/Hide links to your blog to either Show or Hide two or more completly different things then all you need to do is repeat steps 4 and 5 but add a number after the code "toggle" for BOTH steps 4 and 5.

Before:
function toggle() {
------
< href="javascript:toggle();" id="displayText">Show/Hide</a>

After:
function toggle2() {
-------
< href="javascript:toggle2();" id="displayText">Show/Hide</a>

Remove the Blogger Banner

This is probably one of the easiest things to change in your blog.

First!!! BACKUP YOUR BLOG!

Go to "Customize"



Now click on "Layout", Then "Edit HTML"

Now Copy and Paste the following Code right below the "Blogger Template Style" and right above "Variable Definitions":

#navbar-iframe {
display: none !important;
}

Before:


After:

Introduction

Welcome to "How To Do Anything With Blogger". I am a strong supporter of using blogger.com becuase it is nearly 100% customizable, and the defaultss for it are great if you are not in to the customization of your blogger blog. On this blog I will be posting up different articles reguarding everything and anything concerning blogger. Whether it be how to add a third column or how to add an image. This blog is beginners and experts alike. If you have any suggestions for me, or challenges to tackle please submit them by commenting on the blog.

If you can't find what you're looking for here send in a suggestion and in due time a tutorial or article will be avialable for your eyes.

How To Read This Blog:

Text in Red is HTML or JAVA code to copy and paste into your template/post

Before and After images will be posted with each guide. The blue highlighted text in the after image is the code you should have copied and pasted into your template/post.