December 27, 2009

Tanzanite Template : Three Column Stunning Blogger Template!

170 Comments so far

Happy-New-Year Happy new year in advance to all our dearest readers, friends, visitors and everyone who made MBT Blog a True Success within 6-7 months. Kindly accept our New Year Gift of a Free three column stunning Blogger template entitled Tanzanite”. This template was created in no more than four hours out of Cute Box Template during a chat conversation with one of my dearest reader Manisha of ShirdiSaibaba. She wanted a unique template and asked me for help. I just started by customizing Cute Box but after Four hours the entire look of the template changed to something entirely different and far cuter!

I named it Tanzanite which is the name of a precious Gem stone found in Tanzania (Africa) where Manisha lives. Lets First have a look at this pretty Template,

 Tanzanite-Template

Demo | Download 

Features

I kept some features secret from Manisha because unique resource is what we always aim for :D Here is a complete list of the features found in Tanzanite Template

  1. Header With Posts Feeds and Comment Feeds
  2. Beautiful Navigation And Sub Navigation
  3. Left and Right Sidebars. With two mini sidebar on right 
  4. Well organized Post Header with separate date, time and label sections
  5. Post body with Attractive BlockQuote
  6. Bullet lists with Image Hover Effect
  7. Author and Reader Comments Different Style
  8. Post Footer With Stunning Social Bookmarking Icons –The Flapper!
  9. Post Footer With Related Post Widget
  10. Posts summarized With Read More link
  11. Customized Blogger Comment Form!
  12. Comment Avatars
  13. Flexible Search Box
  14. Four Column Footer Widget. One Column Can accommodate as many widgets as you can add!
  15. Customized Author Profile With Hover Effect!
  16. Bookmarking Widget For Homepage!
  17. And The List Continues…

 

Customization

Below I have discussed some important precautionary and customization steps for Using Tanzanite. Click each link for details.

  1. Back Up your current Blogger template
  2. Back Up your Blogger widgets
  3. Upload Tanzanite Template
  4. Edit The Main Navigation Menu
  5. Edit The Sub Navigation Menu

You should save your current blogger template first for safety precautions. To do this follow these steps,

  1. Go To Layout > Edit HTML
  2. Click the link that says “Download Full Template“. As shown in the image below,

backup-Blogger template

    3.    When asked where to save the template, choose a safe location in your hard drive.

    4.    Done!

To save your current widgets codes, follow these steps,

  1. Go To Layout
  2. Open each widget one by one and copy the code inside it along with the title and paste it in a notepad (not a WordPad)
  3. Save the notepad in a safe location
  4. Done!

After you have downloaded Tanzanite Template, you will then have to replace your current template with it,

  1. Go To Layout > Edit HTML
  2. You will see a box with two buttons at its side that says “ Browse” and “Upload” as shown below,

Upload Blogger Template

    3.    Click the browse button, locate the “Tanzanite Template” file and then click the upload button

    4.    Now you will be asked that certain widget data will be lost if you click save. Since we have already backed up all our widgets so we don’t care. So Click the button that says “Confirm Save”. View your blog to see the new change! :>

Main-Navigation-Menu

To edit the Main navigation menu, follow these steps,

  1. Go to Layout > Edit HTML
  2. Search for <div id='navleft'>   (Tip:- Press Ctrl + F )
  3. Just below <div id='navleft'> you will see a long chain of code as shown below,

<div id='navleft'>
      <ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page 1</a>
<ul>
<li><a href='#'>Sub Sub Page 1</a></li>
<li><a href='#'>Sub Sub Page 2</a></li>
<li><a href='#'>Sub Sub Page 3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
<li><a href='#'>Sub Page 4</a></li>
</ul>
</li>
<li><a href='#'>Contact</a>
<ul>
<li><a href='#'>Sub Page 1</a></li>
<li><a href='#'>Sub Page 2</a></li>
<li><a href='#'>Sub Page 3</a></li>
<li><a href='#'>Sub Page 4</a></li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='http://www.mybloggertricks.com'>Download Tanzanite</a></li>
</ul>
</div>

 

Replace The Hash signs (#) with your page links and bolded black text with your Page titles. If you don’t want the drop down menu then simply delete the blue and red portion. Replace http://www.mybloggertricks.com with your own page link.

If you want to add another link then simply paste this code just above </ul>

<li><a href='#'>Your Page Title</a></li>

 

Sub-Navigation-Menu

To edit the Sub navigation menu, follow these steps,

  1. Go to Layout > Edit HTML
  2. Search for <ul id='subnav'>   (Tip:- Press Ctrl + F )
  3. Just below <ul id='subnav'> you will see the following code,

 

<ul id='subnav'>
        <li>
          <a href='#'>Quick Tour</a>
           </li>
        <li>
          <a href='#'>Other Webs</a>
        </li>
<li>
          <a href='#'>About</a>
        </li>
        <li>
          <a href='#'>Contact</a>
        </li>
      </ul>
    </div>

 

Replace The Hash signs (#) with your page links/URL and bolded black text with your Page titles. To add another link simply paste this code just above </ul>

<li><a href='#'>Your Page Title</a></li>

 

Download

Note:- Subscribers have already been emailed the New year Gift (Tanzanite Template)!

To prevent misuse of our Blogger Resources we offer free Downloads to our subscribers only. If you wish to receive the Tanzanite Template and all other resources that have already been published or will be published then kindly submit your email ID by filling up the simple subscription form below,

 

As soon as we are informed that you have subscribed and activated MBT Feed Updates, we will email you the Download Copy instantly.

Wishing you a memorable and happy new year :>

December 25, 2009

Customize Author Profile In Blogger

20 Comments so far

Customize-Author-Profile-In Blogger Thanks to Blogger you can easily customize your templates and widgets fully. While designing the Cute Box template I came across the coding for “Author Profile Widget”. The widget was using official Blogger Styles by default and I thought why not try editing them with our own customized fonts and colors. Fortunately with a simple use of CSS, the entire look was changed to something that may be of interest to most of you. I added some mouse hover effects to Author Profile image and author name and also added a small image of admin that appears when you hover your mouse cursor on it.

Have a look at it first (Remember to hover you mouse on it),

 

Live Demo

 

 

How To Customize Author/Admin Profile Using Simple CSS

To add this effect to your personal profile follow these steps,

  1. Go To Blogger > Layout
  2. Click Add a Page element or Add a gadget
  3. Select Author Profile Widget
  4. Now Go to Edit HTML
  5. Backup your template
  6. Search For ]]></b:skin>
  7. Just above ]]></b:skin> paste this code

.profile-img {
  float: left;
  margin: 0 5px 5px 0;
  padding: 4px;
  border:3px solid #289728;
}
.profile-img:hover {
  border:3px dotted #3B3A3B;
}
.profile-data {
  margin:0 10px 20px 10px;
  padding:0;
  font: bold 10pt "ms sans serif", verdana,Arial;
  color:#289728;
  line-height: 1.6em;
  text-align:left;
  text-transform:lowercase;
}
.profile-data:hover {
  color:#3B3A3B;
}
.profile-datablock {
  margin:.5em 0 .5em;
}

.profile-datablock:hover {
  background: transparent url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzPhsxuJBqI/AAAAAAAACnc/eOf-_gWliTk/s320/admin.png) no-repeat bottom right ;
}

.profile-textblock {
  color:#333;
  margin: 0.5em 0;
  line-height: 1.6em;
  padding:5px 0 5px 0;
  border-top:2px solid #289728;
  border-bottom:2px solid #289728;
}

.profile-link {
display:none;
}

 

     8.    Save your template and Done!

Preview your blog to see your profile standing out!

 

Customization Guide

Each bolded text in the code above is described below,

(1)  Customize Image Border

border:3px solid #289728;

This code defines the image border width, style and colour in active mode. To change the width change this value –>3px and to change style change solid to dotted, dashed or outset etc. and to change colour of border change  #289728 to a different colour of your choice. Use our Colour Chart

(2)  Customize Image Border Which Appears On Mouse Hover

border:3px dotted #3B3A3B;

This code can be customized in a similar way as for part (1)

(3)  Customize The Author Name

color:#289728;

text-transform:lowercase;

color:#3B3A3B;

To change the colour of Author Name in active mode, change  #289728

To change the colour of Author Name on mouse hover, change  #3B3A3B

To Change all letters to capital then change lowercase to uppercase or if you want to make the first letter of each word capital then change lowercase to capitalize

(4) Customize The Author Introduction Text

color:#333

border-top:2px solid #289728;
  border-bottom:2px solid #289728;

To change the colour of the introduction text change #333 

To change the the width, style and colour of the two borders that appear below and above the text then change 2px, solid and #289728 respectively

How to show or hide the link in Author Profile

By default I have removed the link that says “View My Complete Profile”  If you want to show this link then simply delete the following code from the above code,

.profile-link {
display:none;
}

If you want to hide the link then leave the above code as it is.

That’s All!

I hope you will find it easy and interesting. Any question is welcomed :>

December 23, 2009

Can Google Be A Threat In Near Future?

19 Comments so far

Can Google be a Threat or not? Google has expanded widely during the few years with its purchase of major web services which includes Blogger Of course. There is no doubt that the billion dollar Company ran by Sergey Brin and Larry Page has occupied a great portion of the internet and it is still expanding. They have now around 520 Domains or may be more.

But the only thing on Google’ side that is creating a feeling of insecurity for many people is its lack of performance in the area of Help and Support Service. A company that was known for their prompt replies to the queries of their customers is now losing trust among its users.

The reason why I raised this point today is because I usually receive emails with complains that Blogger is not responding manually to some technical queries related to their Blogger accounts and therefore they ask me if I can help. By manually I mean the only reply you receive from Google support staff is an automated no-reply email that is really irritating, no Google employee actually replies by looking into the problem himself. They simply attach links to old queries that has to do nothing with the problem faced by the user. Further the attached solutions often take you to Blogger Help Forum or Google Groups which often contain unsolved problems!

I am writing some of the points that are indeed of great concern on Google’s side.

  1. Users are crying because they can not access their blog due to errors like bX-8wvcj8 and similar ones. Imagine this happening to your main blog while editing your template and no one out there to help!
  2. Just visit this blog knownissues.blogspot.com. The Blogger team is only claiming that they are looking into the issue and will resolve soon but when?
  3. Do you thing Blogger Help Forum has solved any of your major problem regarding the errors you face each day while accessing your blog?
  4. Google Pages will soon be closed but why? Why did they wasted people’s time into a purposeless service? I still can’t get a convincing reply.
  5. Google Scans our emails to display sponsored links! Where goes the privacy?
  6. AdSense Account is banned with no proper reason or clarification at amounts as high as $90-$256. Why don’t they ban it at $1?
  7. No easy way to register a complain of Copy Right Infringement. The only way is to post mail Google. But then you will have to wait for months for a reply!
  8. Sometimes Your competitors click your adSense ads and you get banned with an annoying message like this one,

It has come to our attention that invalid clicks have been generated on
the Google ads on your site(s). We have therefore disabled your Google
AdSense account. Please understand that this step was taken in an
effort to protect the interest of the AdWords advertisers.

A publisher’s site may not have invalid clicks on any ad(s), including
but not limited to clicks generated by:

- a publisher on his own web pages
- a publisher encouraging others to click on his ads
- automated clicking programs or any other deceptive software
- a publisher altering any portion of the ad code or changing the
layout, behavior, targeting, or delivery of ads for any reason

Practices such as these are in violation of the Google AdSense Terms
and Conditions and program polices, which can be viewed at:

https://www.google.com/adsense/localized-terms?hl=en_US
https://www.google.com/adsense/policies?hl=en_US

Publishers disabled for invalid click activity are not allowed further
participation in AdSense and do not receive any further payment. The
earnings on your account will be properly returned to the affected
advertisers.

Sincerely,

The Google AdSense Team

 

Or something like this,

    While going through our records recently, we found that your AdSense
    account has posed a significant risk to our AdWords advertisers. Since
    keeping your account in our publisher network may financially damage
    our advertisers in the future, we’ve decided to disable your account.

    Please understand that we consider this a necessary step to protect the
    interests of both our advertisers and our other AdSense publishers. We
    realize the inconvenience this may cause you, and we thank you in
    advance for your understanding and cooperation.

 

Even if  you send a polite response to Google with enough evidence that you are not responsible for violating the AdSense TOS, you can hope to get a reply in a month or more! Imagine a reply if any after 30-70 days!

   9.    Google AdSense Fraud Click Detection tools have raised many questions like how can these tools differentiate if you are clicking or your business competitor. Your business competitor can cause disabling of your Adsense account using computer operated programs or even using a group of different computers. Cases like this have been reported in many forums. An example funny site that knows how to do it is www.clickmonkeys.com

10.     And The List goes on…..

I am really terrified at this moment, not that any harm has happen to me but I can feel a great threat to our blogs and income through adsense in near future. We as bloggers shed sweat and tear in writing quality, useful and interesting content and then do hard work day and night in bringing traffic to the blog through different means and at the end of the month expect a reward in terms of Ads revenue. But what if all our hard work is crushed down into pieces by an extremely annoying bX-8wvcj8  error which remain unsolved or an email from Adsense entitled as “Your Adsense Account Is Disabled” Can You expect to receive convincing answers to your questions starting with why?

For many people like you and I, Google is a blessing because it has provided us with everything that we need online but Google was a blessing even for those who curse it today. I don’t say I hate Google but I am afraid to say that I am some how disappointed with Google’s present attitude towards its users.

Let me know what are your experiences related to the Help and Support Services of Google and its present performance towards its service users.

December 21, 2009

Change Newer Posts, Older Posts and Home Links With Cute Images

37 Comments so far

Next-Previous-Home-Images The New Year is near and I thought why not gift my Blogger Readers with some thing that may be useful to them. I have created some Cute button images for the Newer Posts, Older Posts and Home Links that appear below all BlogSpot blogs. I hope you will like them.

This Button Set consists of seven image sub-sets categorized as small, large and medium and all are compressed in png format so it can be used in blogs with any background colour.

Have a look at them first,

Previous-Next-and-Home-Button Images

Download

 

How To Add these Images instead of Newer Posts, Older Posts and Home Links in Blogger

I have already discussed this in my previous post Replace Newer, Older And Home Links With Shiny Buttons In Blogger Kindly read it. You will find some different buttons there!

 

Download These Buttons

To prevent misuse of our Blogger resources and goodies ,we offer all resources for free by email to our subscribers only. If you have not subscribed yet kindly do so by submitting your email address in the subscription form on the right sidebar. By becoming a subscriber you will indeed receive quality Blogger Resources that you never expected to get for free!

Subscribers have been emailed these Icons. Kindly Check your Inboxes.

 

Happy New Year In Advance!

Try to be a better Human in coming year. I will try too :>

December 20, 2009

Replace Newer, Older And Home Links With Shiny Buttons In Blogger

166 Comments so far

Newer-Older-and-Home-Links Since most of you appreciated the Arrow Head Read More Buttons, I thought why not create some buttons for the Newer, Older and home Links that appear below each posts in Blogger. I have created various flavors of these buttons and I hope you will like them.

This set consists of 8 Image Button Sets termed as Previous, Home and Next and categorized according to size as small, medium and large.

 

Check them together,

Home-Previous-Next Image buttons for blogger

Download

Note:- Also Includes Red and Light Blue Image Sets.

How To Replace Newer, Older and Home Link In Blogger?

For doing so follow the steps below,

  1. Go To Blogger > Layout > Edit HTML
  2. Check the Expand Widget Templates box at top-right-corner
  3. Search for this,

<data:newerPageTitle/>

And replace it with this code,

<img src="URL-OF-PREVIOUS-BUTTON"/>

Now search for this,

<data:olderPageTitle/>

And replace it with this,

<img src="URL-OF-NEXT-BUTTON"/>

Then search for this,

<data:homeMsg/>

The above code will appear twice and replace both appearances with this code,

<img src="URL-OF-HOME-BUTTON"/>

Make sure to replace the URLs with the Image Links of your uploaded Images.    

4.     Finally save your template and enjoy the new look!

  

Download

Subscribers Have already been emailed the free Download Copy. If you are not a subscriber and wish to receive the Download copy for the above image sets along with some innumerable other blogger resources then simply submit your email address in the Subscription Email form on the right sidebar.

No doubt we serve subscribers exceptionally! :>

December 18, 2009

WordPress or Blogger - Which one is the best?

85 Comments so far

Wordpress-or-Blogger--confused? Are you confused with which blogging platform to choose to start your blogging career? The major blogging hosting platforms are no doubt Blogger and WordPress. Now to judge which one is better I have written a detailed comparison chart below that will be of great help in making a smart decision.

Note:- I am not an employee of either Blogger or WordPress. The below chart is solely my personal research.

WordPress VS Blogger Comparison Chart 2010. © My Blogger Tricks


FEATURES

BLOGGER

WORDPRESS

WHO WON?

Template Customization Offers Free Layout/Style Sheet Customization

No style sheet customization. Payment required

Blogger
Tutorials/Help Innumerable Tutorials on Blogger Tricks Hardly some Blogger
Number of un-official Themes Innumerable Designers Creating Free Templates each day Few Designers Involved
in offering free templates
Blogger
Coding Used Uses user friendly scripting and coding i.e HTML, XML, CSS Uses advance scripting like php that few can understand Blogger
Dashboard Interface Highly user friendly. Easy to navigate. Complicated Interface with hectic navigation Blogger
Default Template Collection Limited Collection Of Default templates mostly un-professional Over 70+ high quality Templates WordPress
Template/Theme
Replacement
Default Template can be replaced by a more free professional template No template change allowed Blogger
Widgets Innumerable Official and Un official Widgets available Limited Official widgets available. Rarely few un- official gadgets available. Blogger
Comments No commenting editing. Moderation allowed. No Spam protection. No user friendly comment form Comments can be edited and moderated. Spam protection available. User friendly comment form WordPress
SEO, Optimization Though Owned by Google, no favoritism. Manual optimization is required Owned by a private party. Meta Tags Plugins used. Easy To optimize Both
Blog Privacy You can limit access to your blog to 100 Authors and 100 readers. All must be Google account holders. You can limit access to your blog to 35 Wordpress account holders. Posts can be password protected or Private. Blogger
Comment restriction You can restrict comments to Google account holders, Open ID users or Any one (includes Anonymous) Comments can not be restricted. Anyone can comment Blogger
Blog Import Only from one BlogSpot blog to another A Blog can be imported from another WordPress blog or from Blogger, Yahoo! 360, LiveJournal and Movable Type and TypePad WordPress
Posts and Comment Notification Authors and subscribers can be notified of latest posts and comments via Email Same here Both
Comment Verification Asks users to verify if they are humans using a 4-6 digit code Does not asks for any verification.
More spam effected
Blogger
Video Storage Limit Unlimited with Google Video and an upload limit of 16GB Just 3GB. More space on upgrade. Blogger
Image storage limit 1 Gigabyte With Picasa Web Albums

3 Gigabytes. More space can be gained through upgrade.
You can also upload .ppt, .doc, .odt and .pdf files

WordPress
File type Storage Only allows image uploading Allows upload of files like .ppt, pdf .doc and .odt files.
More file types can be uploaded on upgrading.
WordPress
Blog Stats Does not have any default stats system. But allows third party tracking scripts. Has a default visitor stats system that shows statistics for two days only and does not provide detailed stats reports.
Does not allow third party tracking scripts.
Blogger
Blog co-partners 100 Google account holders can be added as Administrators or Authors 35 WordPress account holders can be added as Administrators, Editors, Authors or Contributors. Blogger
Advertisements Displays no advertisement of its own on your blog. Displays discreet AdSense advertisements on your blog for small percentage of the page views Blogger
Posts By Email Has a Mail-to-Blogger feature which turns any email account into a blog-posting application Posts can be published using emails Both
Post Feed On Mobile Phones Supported Not Supported Blogger

 

Conclusion

When choosing a blogging service three things are most important than anything else which are,

  1. Template Editing
  2. Huge Image Storage Capacity
  3. Huge Video Storage Capacity

Believe it or not Blogger has all these three features and is undoubtedly a blessing to millions of teenagers and people from other classes who can’t afford to pay online. The Template editing feature of Blogger is one of its best feature. Within a year of blogging a guy like me who didn’t even know what CSS, HTML, XML meant, is now playing with codes day and night. Blogger made my life meaningful and interesting and will surely be a blessing to you too. Blogger is surely the best free Blogging Service available in Blogosphere if equipped with a good web hosting service.

Which one do you think is the best?

December 17, 2009

What Is A Blog and How To Create A Blog?

19 Comments so far

questionsThere are many people who still do not understand what a blog is or why is blogging so much expanding in the cyberspace. I feel all these people deserve the right to know what a Blog is and how can a Blog be created along with some other similar questions. So for those who just heard of a Blog from their friends, media or any other source, here is a short and precise illustrative tutorial to help you find answers to four important questions in most people’s mind.

Which are,

  1. What is a Blog?
  2. How do I create a Blog?
  3. What is the advantage of blogging?
  4. What is Blogger or Wordpress?

Now here comes some useful answers for each demanded question

What is a Blog?

A blog is nothing but an Online Notebook Diary. What do we write in a notebook diary? Of course stuff that we like and things that we feel important to be recorded and shared with our friends and family. A notebook diary can be based on any topic that you like for example you can write on your  hobbies, activities, poems, songs, tutorials, pets, home and family, your personal thoughts etc. People will read your Online Notebook Diary on daily basis and will leave you a comment, suggestion or feedback.

If you write about your personal experiences in a notebook made up of papers, then your writings will reach only limited people around you but with an online diary like a Blog you speak to the world!

So in short a blog is your Personal website where you write and share things you like with millions of people out there who are eager to read what is cooking in your mind!

The video below will give you a more illustrative view of a Web Blog.

How do I create a Blog?

Creating a blog is absolutely free. There are many quality Blogging hosting services that you can choose to create a blog but the best among them is Blogger. I have created this blog with Blogger without even paying a penny! Want to know how? Watch this video to know how to create a blog in less than Five minutes!

 

 

What is the advantage of blogging?

You pay nothing Instead you Earn in $$ !! You earn by displaying advertisements on your Blog. People are earning from $100 to $100,000 monthly! I am not kidding an example is shoemoney.com and problogger.net

Plus you will make new friends in the Blogosphere and you earn respect in the eyes of thousands of people. You can become a celebrity! But all this with a little hard work and great patience.

And the best advantage which I have experienced is that you learn every second online! Your internet and computer skills will improve to an extreme edge and this is what the coming era demands from you. Every second on blogging is undoubtedly a new experience! I have learnt HMTL, CSS, XML and a bit of JavaScript without taking any classes. I learnt them all within a year of my blogging career and today I am able to design a quality blogger template in less than three hours MashAllah!

What is Blogger or Wordpress?

These are the major blogging platforms which help you create a free Blog.  But if you are confused which one to start with then go for Blogger. It has many features which wordpress doesn’t have and the best part is that Blogger allows you to customize your template in any way you like by editing the CSS style sheet! So what are you looking? Start blogging now and build up a new cyber life. Best of luck!

To know in detail whether Blogger is better or WordPress then read this post –> Comparison Chart 2010 for WordPress Vs Blogger

Feel free to ask any question that is still troubling your mind. Take care :>

December 14, 2009

Advanced Multi Tabbed Widget For Blogger – Fully Widgetized!

189 Comments so far

Click here to Add a Wordpress Style Menu Tabbed Widget
Step#6 has been updated. Repeat that step to get it working just perfect.

multi-tabbed-widget I had published a post on how to add a multi tab widget to your blogger blogs and how to customize it to suit your blog layout some months ago. The only problem with that widget is that it is not fully widgetized i.e you can not add archives, labels, author profile or other blogger official widgets to it unless you have their separate code with you. I just came across a beautiful and a more flexible and advanced tabber widget stylized by Lawny Designs and scripted by Barelyfitz. I have modified lawny’s tutorial and have made some changes to the code so to make it even more simpler to newbie bloggers. You can view this widget hanging on my sidebar.

 

To add this cute multi tab widget to your BlogSpot blogs follow these steps.

  1. Go to Blogger > Layout > Edit HTML
  2. Search For </head>
  3. And paste the code below just above it,

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
  var arg;
  this.div = null;
  this.classMain = "tabber";
  this.classMainLive = "tabberlive";
  this.classTab = "tabbertab";
  this.classTabDefault = "tabbertabdefault";
  this.classNav = "tabbernav";
  this.classTabHide = "tabbertabhide";
  this.classNavActive = "tabberactive";
  this.titleElements = ['h2','h3','h4','h5','h6'];
  this.titleElementsStripHTML = true;
  this.removeTitle = true;
  this.addLinkId = false;
  this.linkIdFormat = '<tabberid>nav<tabnumberone>';
  for (arg in argsObj) { this[arg] = argsObj[arg]; }
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
  this.tabs = new Array();
  if (this.div) {
    this.init(this.div);
    this.div = null;
  }
}

tabberObj.prototype.init = function(e)
{

  var
  childNodes,
  i, i2,
  t,
  defaultTab=0,
  DOM_ul,
  DOM_li,
  DOM_a,
  aId,
  headingElement;
  if (!document.getElementsByTagName) { return false; }
  if (e.id) {
    this.id = e.id;
  }
  this.tabs.length = 0;
  childNodes = e.childNodes;
  for(i=0; i < childNodes.length; i++) {
    if(childNodes[i].className &&
       childNodes[i].className.match(this.REclassTab)) {
      t = new Object();
      t.div = childNodes[i];
      this.tabs[this.tabs.length] = t;

      if (childNodes[i].className.match(this.REclassTabDefault)) {
    defaultTab = this.tabs.length-1;
      }
    }
  }
  DOM_ul = document.createElement("ul");
  DOM_ul.className = this.classNav;
  for (i=0; i < this.tabs.length; i++) {

    t = this.tabs[i];

    t.headingText = t.div.title;

    if (this.removeTitle) { t.div.title = ''; }

    if (!t.headingText) {

      for (i2=0; i2<this.titleElements.length; i2++) {
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) {
      t.headingText = headingElement.innerHTML;
      if (this.titleElementsStripHTML) {
        t.headingText.replace(/<br>/gi," ");
        t.headingText = t.headingText.replace(/<[^>]+>/g,"");
      }
      break;
    }
      }
    }

    if (!t.headingText) {
      t.headingText = i + 1;
    }

    DOM_li = document.createElement("li");

    t.li = DOM_li;

    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;

    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;

    if (this.addLinkId && this.linkIdFormat) {

      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/gi, this.id);
      aId = aId.replace(/<tabnumberzero>/gi, i);
      aId = aId.replace(/<tabnumberone>/gi, i+1);
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

      DOM_a.id = aId;
    }

    DOM_li.appendChild(DOM_a);

    DOM_ul.appendChild(DOM_li);
  }

  e.insertBefore(DOM_ul, e.firstChild);

  e.className = e.className.replace(this.REclassMain, this.classMainLive);

  this.tabShow(defaultTab);

  if (typeof this.onLoad == 'function') {
    this.onLoad({tabber:this});
  }

  return this;
};

tabberObj.prototype.navClick = function(event)
{

  var
  rVal,
  a,
  self,
  tabberIndex,
  onClickArgs;

  a = this;
  if (!a.tabber) { return false; }

  self = a.tabber;
  tabberIndex = a.tabberIndex;

  a.blur();

  if (typeof self.onClick == 'function') {

    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

    /* IE uses a different way to access the event object */
    if (!event) { onClickArgs.event = window.event; }

    rVal = self.onClick(onClickArgs);
    if (rVal === false) { return false; }
  }

  self.tabShow(tabberIndex);

  return false;
};

tabberObj.prototype.tabHideAll = function()
{
  var i;

  for (i = 0; i < this.tabs.length; i++) {
    this.tabHide(i);
  }
};

tabberObj.prototype.tabHide = function(tabberIndex)
{
  var div;

  if (!this.tabs[tabberIndex]) { return false; }

  div = this.tabs[tabberIndex].div;

  if (!div.className.match(this.REclassTabHide)) {
    div.className += ' ' + this.classTabHide;
  }
  this.navClearActive(tabberIndex);

  return this;
};

tabberObj.prototype.tabShow = function(tabberIndex)
{

  var div;

  if (!this.tabs[tabberIndex]) { return false; }

  this.tabHideAll();

  div = this.tabs[tabberIndex].div;

  div.className = div.className.replace(this.REclassTabHide, '');

  this.navSetActive(tabberIndex);

  if (typeof this.onTabDisplay == 'function') {
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
  }

  return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{

  this.tabs[tabberIndex].li.className = this.classNavActive;

  return this;
};

tabberObj.prototype.navClearActive = function(tabberIndex)
{

  this.tabs[tabberIndex].li.className = '';

  return this;
};

function tabberAutomatic(tabberArgs)
{
  var
    tempObj,
    divs,
    i;

  if (!tabberArgs) { tabberArgs = {}; }

  tempObj = new tabberObj(tabberArgs);

  divs = document.getElementsByTagName("div");
  for (i=0; i < divs.length; i++) {
    if (divs[i].className &&
    divs[i].className.match(tempObj.REclassMain)) {
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
    }
  }
  return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
  var oldOnLoad;

  if (!tabberArgs) { tabberArgs = {}; }

  oldOnLoad = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = function() {
      tabberAutomatic(tabberArgs);
    };
  } else {
    window.onload = function() {
      oldOnLoad();
      tabberAutomatic(tabberArgs);
    };
  }
}

/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

    tabberAutomaticOnLoad();

} else {

  if (!tabberOptions['manualStartup']) {
    tabberAutomaticOnLoad(tabberOptions);
  }

}

//]]>
</script>

 

 

4.  Now search for ]]></b:skin>  and just above it paste this code,

/*---------- Tabber Start-------- */


.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}


/*------- Tabber End--------*/

 

5.  Don’t save your template. Now search for Variable definitions and paste this code with other variable definitions,

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

 

If you can’t find Variable definitions  then search for #navbar-iframe and paste this code below #navbar-iframe { Some text here }

/* Variable definitions
   ====================

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

*/

 

UPDATED PART:

6.   Now the final part. Search for <div id='sidebar-wrapper'> and paste this code just below it,

<div style='clear:both;'/>

<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>

 

7. Finally save your template and visit Layout > Page Elements to start adding widgets to the tabs! It will look something like this,

MULTI-TABBED-WIDGET

The widgets are arranged number wise. Starting from Tab-1 and ending at Tab-4. To add a gadget/widget to any tab simply click the link Add a Gadget and start adding whatever you want.

8. Finally view your template to see it hanging!:)

Customization Guide To Multi Tab Widget

Here we will discuss how to change the Look and position of this multi tabbed widget.

Changing Position:

To shift this tabber widget to the bottom section of your sidebar rather at the extreme top, do this,

  • Paste the code in Step#6 just above </div> and not just below <div id='sidebar-wrapper'> As shown in the image below,

Shift-position-of-tabber

  • Save your template and go to Layout > Page Elements  to see if it has shifted to the bottom.

Changing Look and Feel:

  • The background colours of the widget can be changed by editing the code in step#5. I am rewriting the code here with some description.

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">


<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">


<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">


<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#289728" value="#289728">

 

This code has four main sections amongst which the sections tbbxcolor1: and  tbbxcolor2: are the most important. I will describe each one in detail.

Important Sections:

tbbxcolor1: This is an important section. It defines the background colour of this multi tab widget and also the colour on mouse hover. The default colour is white i.e #ffffff

tbbxcolor2: This refers to the background colour of the tabs and the text inside the tabs. the default colour is green. You can change the value #289728 to a different colour value using our color chart

Change these only if you wish:

tbbxbgcolor: This section refers to the background colour of the tab box. By default the colour is grey. If you wish to change it to a different colour simply change the hexadecimal colour value #f8f8f8 to something different using our Color Chart

tbbxbrcolor: This refers to the border line color across the tabs and the box.

That’s All!

I hope this widget will help a lot in giving a clean and neat touch to your blogs. Any question is welcomed :>

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!