Tanzanite Template : Three Column Stunning Blogger Template!

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,

 

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

Back Up your current Blogger template

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,

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

    4.    Done!

Back Up your Blogger widgets

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!

Upload Tanzanite Template

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,

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

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

 

Edit The 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 :>

More

Mohammad 12/27/2009

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibQWCR4kTBUpcOo4XXFAkZDFsZf1oYoTafzQuZkwuS3ta_JRosXajaeeVWFpKwQxNJ-EXPsAm9JvGXK1g0RltruVfntkm3fg5MuY0-306kz5-rWW3s2c8usoV8HSvzvFzZXuLrW3aY6H8/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 :>

More

Mohammad 12/25/2009

Change Newer Posts, Older Posts and Home Links With Cute 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,

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

More

Mohammad 12/21/2009

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

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,

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

More

Mohammad 12/20/2009

WordPress or Blogger - Which one is the best?

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?

More

Mohammad 12/18/2009

What Is A Blog and How To Create A Blog?

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

More

Mohammad 12/17/2009

Advanced Multi Tabbed Widget For Blogger – Fully Widgetized!

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

---

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,

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,

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

More

Mohammad 12/14/2009

Create Facebook and Twitter Custom Follower Counters

I was thinking as why some services like Facebook, Digg, orkut, stumbleupon has no follower, fan or friends counter. While I was customizing my template I needed a follower counter for Facebook but unfortunately I could not find any. So I decided that why not create my own custom follower counter. This idea enabled me to create a follower counter for any service you like!

This is how our Custom follower counter for Facebook looks like,

227 Followers

or a blinking one for browsers other then IE,

227+ Fans

 

To add a counter you just need to do the following,

1. Go To Blogger > Layout
2. Choose Add a Gadget or Add a Page element
3. Choose HTML/JavaScript
4. Finally paste the code below inside the HTML/JavaScript widget,

 

<span sans ms style=" background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #666; font-family: sans-serif, arial; font-size: 10px;">

<span style=" background-color:#D2E9F8; font-size: 9px; border-top: 1px solid #8A8A8A; border-right: 1px solid #ddd; border-left: 1px solid #8A8A8A; border-bottom: 1px solid #ddd; padding: 0px 1px;">227<blink>+</blink></span> Followers</span>

 

 

Customization

The bolded text in the code above are described below,

background-color: This defines the background colour of the counter. To change the hexadecimal color value to something different use our colour chart.

background-color: This defines the background colour of the number count i.e 227 You can change its colour using the same color chart.

color: This defines the color of the text i.e 227 and Followers

<blink>+</blink>: The code in blue is responsible for blink the plus sign. You can write anything between <blink> and </blink> For instance symbols like k (kilo), .. etc If you don’t want this blinking effect simply delete <blink>+</blink> from the main code above.

227 and Followers: Replace these with your own follower count and count name.

Some Example Counters For Feed Readers and Twitter

FEED COUNTER

227 Readers

 

<span sans ms style=" background-color:#CC9966; border-top: 1px solid #F2F2F2; border-right: 1px solid #666; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #666; padding: 2px 4px 4px 4px; color: #000; font-family: sans-serif, arial; font-size: 10px;">

<span style=" background-color:#CCCCCC; font-size: 9px; border-top: 1px solid #666; border-right: 1px solid #fff; border-left: 1px solid #666; border-bottom: 1px solid #fff; padding: 0px 1px;">227</span> Readers</span>

TWITTER COUNTER

227Tweeters

<span sans ms style=" background-color:#F2F2F2; border-top: 1px solid #F2F2F2; border-right: 1px solid #8A8A8A; border-left: 1px solid #F2F2F2; border-bottom: 1px solid #8A8A8A; padding: 2px 4px 4px 4px; color: #33CCFF; font-family: sans-serif, arial; font-size: 10px;">

<span style=" background-color:#33CCFF; font-size: 9px; color:#fff; border-top: 1px solid #666; border-right: 1px solid #fff; border-left: 1px solid #666; border-bottom: 1px solid #fff;  padding: 0px 1px;">227</span>Tweeters</span>

 

The Number Count Is Manual!

Since this widget is based fully on CSS and it uses no programming code so you will need to update your follower count yourself each time you receive a new Facebook follower, Feed Reader or Twitter follower etc. I hope that is not difficult to do so :)

I am sure you will enjoy reading these too,

• Facebook Social Bookmarking Widget
• Add Floating Facebook Like and Retweet Counters To Your Websites

Your feedback and suggestions are always welcomed.

More

Mohammad 12/11/2009