Tuesday, February 9, 2010

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.

Saturday, January 16, 2010

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.