5 Best and easiest ways to make money from blog

5 Best and easiest ways to make money from blog

Making money from our blogs is an important goal for alot of bloggers, but most of us invested alot of time and may so money too, but usually we disappoint with the results. and always ask, What is the best way to make money from our blogs, And what we all should know is that the answer is not the same for every single person and blog.

But we can try to list the best and easiest ways to make money, at this article, i’ll just list it, but latter in my next articles, i’ll talk about the ways in more detailed tutorials. and here is the 5 ways,

1. Advertising Programs
This is one of the most used ways to make money because it’s too easy to add it to your blog, and the most famous advertising Program is Google Adsense. this programs is easy because you don’t have to do any thing but adding the program code to your blog, and then work on placement and traffic.
Other Advertising Programs
- Chitika
- Adbrite

2. Affiliate Marketing
This programs is working in many ways,they provide you a banner that you can place on your blog, so your visitors can visit it, and your can earn if your visitors sign up for a website or Buy something for example , this programs give you a commission from 5% Up to 75% per lead.

Affiliate Marketing companies
- Commission Junction
- LinkShare
- Click Bank

3. Place a Donation Link or Button on Your Blog
and this way depends on your blog visitors, and how your blog useful for the visitors, it won’t make you get alot of money but it may help you getting few dollars,

4. Sell Products On your blog.
You can sell related products on your blog if you have got good amount of traffic, and this way is great when your concentrate on one niche. you can sell e-books, soft wares, download able products, and more, you may sell your own products or other people products.

5. Sell Advertising Space On Your Blog.
This is a great way for making money and guaranteed way, because it’s easy and one step way, just try to sell your spaces and relax for next 30 days. You may Use to have a good chance to sell your spaces like: BuySellAds.com

Most Needed Blog Tools For Bloggers

• Pingoat – pinging service
• Pingomatic – another pinging service
• AudioBlogger – audio post to your blog via phone
• BlogRolling – a service to manage your blog roll
• Creative Commons – copyright protections service
• Feedburner – RSS tool that adds a variety of features to your blog’s RSS feed
• Picasa – find, edit and share all the pictures on your PC
• Flickr – Store and share your images – good way of hosting images if you don’t have a stand alone blog on your own domain.
• Flock – A browser that enables sharing and blogging from within it
• Copyscape – allows you to track down other sites that are stealing your content
• TalkDigger – ‘find, follow and join conversations evolving on the Internet.’
• Blog Flux – Stats, Pinging and Directory
• Backpack It – A place to organise your to do lists, notes, files, reminders and more – all online
• Basecamp – Like Backpack it (same people behind it) but great for collaboration on projects.
• Ice Rocket – Blog Search
• coComment – Keep track of the comments you leave on different blogs in a central place
• co.mments – Similar name to coComment but not to be confused with it – a way of bookmarking and following comment threads via RSS
• Gabbly – Add live chat to our blog posts (like real time comments combined with IRC)
• Del.icio.us – Social Bookmarking site – good for sourcing stories but also great if you get linked to on it to get traffic
• Digg – Another major Social Bookmarking site
• Only Wire – a bookmarklet that submits posts to multiple social bookmarking sites at once
• Odeo – a tool for recording and sharing audio/podcasting
• TagCloud – produces Tag Clouds for your blog from RSS feeds
• Indie Karma – a micropayment system for bloggers
• Tiny URL – Turns long URLs into tiny manageable ones
• Swicki – a new type of search engine that harnesses the power of a web community – sort of like a search engine and wiki combined
Filmloop – photo sharing
• Stock.xchng – Free Stock Photos
• Favicon Maker – allows you to make a favicon from a photo
• YouTube – a tool for putting video on your blog
• blip.tv – another video uploading tool

Do you know of other great blog tools? Feel free to share them in comments below.

Make Your Blog Popular

Filed Under General, Internet Marketing, SEO, Social Bookmarking, Traffic Building

The whole point of having a blog is to get traffic to it, and as difficult as this may seem, your best option is to work at it. The World Wide Web can be likened to a bottomless pit of information, with an endless flurry of users trawling it, day in and day out.  To get these users to consider your corner of the web, by which I mean to drive more traffic to your blog, there are a number of things that need to be done, things that cannot be avoided and have to be done with a generous dose of passion.

Blogging
It is heartbreaking to see the number of blogs out there that have excellent content but can’t seem to succeed. They have rotten rankings and fail miserably. Don’t let same fate plague your blog, kick back and crack the Technorati 1000 by getting your house in order.

1. Make Your Blog Successful Or Die Trying: First thing to remember is to never give up, to keep on trucking, or rather writing, and remember that if the content is crap, no marketing effort will make it a success. No one starts a blog just for the hell of it, ensue that you have something to say. More publicity, promotion and, consequently, traffic will come your way, but only if the content is truly great. If you cannot write, get a writer to do it for you. There are loads for freelance sites online, where a blogger will write for you at a small cost.
2. Be An Expert: You know the old saying jack of all trades, master of none, become the master of your subject matter.expert Read and learn; write with intelligence and knowledge about your subject; with experience, your reputation will grow and people will seek you out. This will attract more comments in your blog, which can help you get cross promoted; always respond to your comments too, it is vitally important.
3. Be A Better Publisher: feedburnerPublish full feeds particularly on controversial matters, this gets the attention of content scrapers which re-post your content and creates traffic. Use Feedburner too as this will allow you to find out how many people are subscribing to a particular feed.
4. First Impressions Always Count: Do you remember your mother telling you this? Well she was right and design matters. Set yourself apart from every other blogger with your design and be serious about it. If you cannot afford a professionally developed blog, then learn about photoeditors and CSS. You can also tweak your Wordpress theme, your blog, when done, has to scream out loud to people, READ ME AND LEAVE COMMENTS. A professional theme will get more readers to your blog.
5. Get Up-To-Date With SEO:seo Find out what makes it tick and what will make your blog tick too. Your blog needs to be tricked out with unique title tags, and keyword rich headlines to enjoy complete SEO wellness.
6. Be A Good Host: Host contests, polls and other interactive features to encourage even more participation in your blog. Make them fun or funny, controversial or challenging, but keep your readers interested. Your little corner of the blogging happy-hunting-ground needs to buzz with a life of its own. Make your blog successful, it will pay dividends.

Get your blog in order using these six tips, then set about promoting it using the prevalent internet marketing methods like social bookmarking and other means of social media,  and you’ll find your blog flooded with traffic in no time.

How to change your Blogger (Blogspot) Blog Logo?

What is blogger logo or favicon?
It is a small icon that gets displayed once you open a webpage. You may find this in every site you visit. I feel you must change this logo to your choice, simply because if someone bookmarks your page, then rather than the default blogger logo, it will be your logo that is saved in their bookmarks. This is the blogger logo or favicon that we are talking about:

This post features on changing the default blogger to a blogger of your choice. You can create your own logos with Banner Maker Pro software or with Photoshop or even simply with Microsoft Paint. After you design your logo, you need to format the size to 16x16. This can easily be done with Adobe Photoshop. Once all this is done, make sure you save your picture in ".ico" format. (For example - "myicon.ico")

After your logo is ready for display, you have to upload it to some site. You may use ImageShack for uploading the picture. After you upload the picture, you will get a link to that picture. Copy that link and save it in a text file.

1. Now, go to your blogger dashboard. Navigate to "Layout>>Edit HTML".

2. Make sure you back up your template before doing any changes (don't  know click here).

3. Search for the following code </head>

4. Now, paste the following code above the line mentioned in step 3.

<link href="http://img37.imageshack.us/img37/760/ind4u.gif" rel="shortcut icon"></link>

<link href="http://img37.imageshack.us/img37/760/ind4u.gif" rel="icon"></link>

5. You may replace the above link marked in blue with your link. Save your template and have a look at your blog now.

If you need free icons, you may leave a comment here with your email id or web/blog url. And I will design a free icon for you and send it via email.

Add Related Posts Widget with Image Thumbnails on Blogger (Blogspot)

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader (from the post editor).

Update - Now supports external images also.

Related Posts Widget with Thumbnails for Blogger

Here are the detailed steps to install the related posts widget for blogger with thumbnails.

STEP 1: First of all Login to your blogger dashboard and navigate to Layout > Edit HTML.

STEP 2: Backup your template (Don't know how then click here) then check the "Expand Widget Templates" check box.

STEP 3: Now find </head> and paste the below code just Before it.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_covcUPeew7i644Qlo86hQNqbLW5dVoewnA_tflwH75DiFQK1aaTtKg-OU8ejCk3Ja_4Q6FQKFna221zQh5pQMToGl1Wvi-ugOjpcKwzfjiEwbuBCazaeylzS5_5NQVNItu7twyRykc/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

STEP 4:  Now find
<div class='post-footer-line post-footer-line-1'>

If you cant find it then try finding this one
<p class='post-footer-line post-footer-line-1'>

Now immediately after any of these lines (whichever you could find) place this code snippet.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>

Now your are Done.

Note:

• You can adjust the maximum number of related posts being displayed by editing this line in the code.
  

  var maxresults=5

• To edit the title of the widget you can change this line of code.

var relatedpoststitle=&quot;Related Posts&quot;;

• To change the default thumbnail, you can edit this line of code.

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_covcUPeew7i644Qlo86hQNqbLW5dVoewnA_tflwH75DiFQK1aaTtKg-OU8ejCk3Ja_4Q6FQKFna221zQh5pQMToGl1Wvi-ugOjpcKwzfjiEwbuBCazaeylzS5_5NQVNItu7twyRykc/s400/noimage.png";

• To Change the Colour of the Splitter Line , edit

var splittercolor="#d4eaf2";

To change the other colours and all you will have to modify the CSS

If you fall into troubles implementing this, just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.

How to display the related posts on every page and not only on the post pages?

Just remove the two lines starting with <!-- remove --> from both step 3 and step 4. that is lines.

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

and
<!-- remove --></b:if>

Put Adsense Ads At The Bottom Of Posts Title and Blog Posts

AdSense ad units can be placed almost anywhere on your blog, from the top to the bottom of the Blog it's self to the top or bottom of the posts.I have in previous posts showed how to place AdSense ads in your header section and how to place AdSense inside your posts i will leave a link to those posts at the foot of this post.

Here i will show you how to have AdSense ads automatically fixed directly below the posts title and under the last line in every post.These positions are two of the highest best paying places to put ads.

You can use any size and any type of AdSense ads although you will have to consider what looks best and fits best on your template.

I am going to try and write this in a way everyone can follow just take your time if your a newbie. I will do this by breaking it into three sections, in the first two you will see were to put the code but make sure to look at the third section as AdSense code added directly to your template wont work.

How to Place AdSense Below The Title.

STEP 1. In your Dashboard click Layout > Edit Html.

STEP 2: Backup your template. (Don't know click here)

STEP 3: Tick the 'Expand Widget Templates' box.

STEP 4. Find the following code in your blogs html:

<div class='post-header-line-1'>

STEP 5: Get Adsense code and Parse It (Don't know how covert adsense code to parse click here). After Parce paste the Adsense code just after the above line (See below image).

If you cannot find that code in your template leave a comment and i will find the code you need.

How to put AdSense directly below the posts.

STEP 1. In your Dashboard click Layout > Edit Html.

STEP 2: Backup your template. (Don't know click here)

STEP 3: Tick the 'Expand Widget Templates' box.

STEP 4. Find the following code in your blogs html:

<data:post.body/>

STEP 5: Get Adsense code and Parse It (Don't know how covert adsense code to parse click here). After Parce paste the Adsense code just after the above line (See below image).

If you cannot find that code in your template leave a comment and i will find the code you need.

Html Parse Tool - Post Html Code Script In Your Blogger Blog

Want to display some Html code or script on your Blog, website or webpage ? This tool can be used to display html code in your blog posts and Parse AdSense ads.

Once you Parse html code and place it in your blog it will not form but will show up as code.

Example:

If i wanted to show the code for a html link to this blog i would parse the code and it would display as below:

Somtimes you need to parse your adsense code, It can also be used to parse AdSense code.

Simply paste your Code into the box below and click the 'Convert' Button. It's So Easy! You Can Bookmark The Page In Case You Need To Display Code Or Parse Adsense In The Future.

If For Some Reason The Gadget Does Not Appear Just Refresh The Page

Once your code has been parsed paste it were you need it to appear.

If You Need More Help Just Ask In The Comments.

How I add AdSense on my blog

• Go to the Template > AdSense tab and sign up for AdSense, if necessary.
• Select the size and color of your ads.
• You'll see a preview of your blog as you make changes.

Adding AdSense to your blog is easy. Go to the Template tab in Blogger and you'll see an "AdSense ads" tab.

below it:

If you don't have an AdSense account already, you can sign up for it right here within Blogger. Just enter a valid email address, choose a password, fill in some contact information (so you can get paid!) and then Blogger will register your account for you right away.

If you do have an account already, just use the "sign in" link instead.

Once you've completed the sign-up form, or logged in to an existing account, you'll see a special preview version of your template, showing your blog as it will look with your new ads:

Using the menus above the preview, you can easily change the size, shape, and color of your ads, without ever needing to edit the code directly. The color menu has some preset color schemes, but also some flexible options that try to match, contrast, or blend with whatever template you happen to be using.

Try them all out and see which setting works best.

Once you've decided how you'd like it to look, just save the changes and republish your blog. Then go check your email.

While you were deciding on layouts and colors, you probably received a confirmation email from AdSense. Find that email and click on the link it gives you to confirm your email address. Be sure to read the rest of the confirmation email as well, since it will contain other information on finishing the registration and approval process. Until your email address is confirmed and your AdSense application is approved, your ads will only show public service announcements (PSAs) rather than targeted ads. Since you don't get revenue from PSAs, you'll want to be sure to do this soon, so the AdSense bot can crawl your site and determine appropriate ads to show.

And now you're done! Congratulations -- you've got AdSense!

Notes:

• There may be a bit of a delay before the AdSense bot gets to your site and you start getting targeted ads, though that should happen within 48 hours. Just be patient and it will get there in time.

Thanks to Google Help Center

Add your Web or Blog (Blogger / Blogspot) to Google Webmaster Tool for SEO

Google Webmaster Tools are a free, robust set of reports that allows bloggers and web-masters to view detailed statistics about their site rankings. In order to get the most out of Google Webmaster Tools, it is important that you not only add, but also verify your website or blog.

Here's how to submit and verify your Blogspot / Blogger blog for Google Webmaster Tools.

Step 1:
SIGN UP FOR GOOGLE WEBMASTER TOOLS:
Using the link in Resources below, visit the Google Webmaster Tool home page. On the right-hand side, toward the bottom, click on "Create An Account Now". 

Follow the instructions on screen to create your account. After you create account and logged in, return to the Google Webmaster Tool home page to sign in. 

Note: If you already have a Gmail account then don't need to create a new account. Just click on Sign in to Webmaster Tools type your Gmail id and password then click on logged in.

Step 2:
SUBMIT A BLOG / WEB AND OBTAIN VERIFICATION CODE:
You should now be on the Google Webmaster Tools Dashboard, where you can add your Blogspot's URL. Click on Add a site button and type your complete blog or web URL. (see blow image)

then click on Continue. After you click "Coutinue" you will come to the Overview page. Google Webmaster Tools give a Meta Tag.

Example:

<meta name="google-site-verification" content="I_t6nFGasfdRdP2Layd322344230pdasf3LYh-6Ig" />

 Copy the complete meta tag code that Google generates.

Step 3:
ADD VERIFICATION CODE TO BLOG:
In a new browser window, go on Blogger Dashboard, and click on "Design" or "Layout"

Then click on "Edit HTML". In the Edit Template screen.

You will see the HTML script for your blog template. Toward the top, you will see the tag. Paste the Meta tag just below tag. If you need help, click on the image below to enlarge and view correct meta tag placement.

Save your template.

Step 4:
CONFIRM YOUR BLOG IS VERIFIED:
Return to Google Webmaster Tools, and click on the "Verify" button.

Google will confirm that it can view the meta tag that you've pasted into the Blogspot, and you will immediately be able to utilize the many tools and reports Google provided and your blog also add Google search engine.

If your need and problem do comments

How add Facebook like button on Blogger (Blogspot) and how customize it.

Few days ago, facebook surprised us by launching a lot of social plugins, one of them, actually the most popular one yet is the famous like button,  In this tutorial you’ll learn how to add it to your blogger blog and you’ll learn how to customize. Change the verb, like or recommend, change it’s color and change it’s font.

STEP 1:

Add the button code it to your template script.

• Log into your blogger account, then go to Design >> Edit Html.

• Backup your Templates (Don't know click here)

• Then check on Expand Widget Templates box.

• Find the Code below and paste the Facebook like button script after it.

<div class='post-header-line-1'/>

• If you didn’t find the code above in your template, Then try to find the following and paste the Facebook like button script before it.

<data:post.body/>

• Facebook like button script.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/> </b:if>  

• Create your own Facebook like button script Click Here. 

• click on Save Template and you are done.

STEP 2:
Customize your Facebook like button.


in the above code you can customize 3 Parts. and i’ve colored them to make it easy for you to recognize, in the above code change the following parts:

• like this part controls the verb that appear on your button, keep it as you see or change it to recommend if you want.

• Arial this part controls the font type, keep it or change it to one of the following:

lucida+grande
segoe+ui
tahoma
trebuchet+ms
verdana

• Light this part controls your button color theme, and you have three options

Light
Evil
Dark

• Update, How to make it appear on your home page.

In the button code there are two parts you’ll need to remove to make this button appear on your home page, the first line and the last line, if you still don’t under stand, please see the following parts and delete it before pasting the code to your template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

</b:if>

UPDATE
if you want facebook like button individual blog post. follow below instructions.

Paste below script at button of
<b:includable id='post' var='post'>. this line.

<iframe 
   allowTransparency='true' 
   frameborder='0' 
   scrolling='no' 
   expr:src='"http://www.facebook.com/plugins/like.php?href=" 
             + data:post.url 
             + "&amp;layout=standard&amp;show_faces=true&amp;"
             + "width=530&amp;height=60&amp;action=like&amp;"
             + "colorscheme=light"' 
   style='border:none; overflow:hidden; width:530px; height:60px'/>

In case you have issues, here is the version with all the clarifying formatting removed and no line breaks:

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show_faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

Need More Help Just Ask In The Comments.

Add recently post, recently comments and archive multi section tab to blogger (blogspot)

To add a nice multi tab section to your blog follow the steps given below.

1. Login to your blogger dashboard–> layout- -> Edit HTML

2. Backup your Templates (Don't know click here)

3. Scroll down to where you see tag .

4. Copy below code and paste it just before the tag .

<style type='text/css'>
h2 { font-size:11px;}
.tabberlive .tabbertabhide {
display:none;
}

.tabber { font-size:11px;
}
.tabberlive {

}

ul.tabbernav
{

padding: 3px 0;
}

ul.tabbernav li
{
list-style: none;
display: inline;
}

ul.tabbernav li a
{
padding: 3px 0.5em;
margin-right: 3px;
border-bottom: none;
background: #eeedea;
text-decoration: none;
}

ul.tabbernav li a:link {}
ul.tabbernav li a:visited { }

ul.tabbernav li a:hover
{
color: #000;
background: #f8f8f4;

}

ul.tabbernav li.tabberactive a
{
background: #f8f8f4;
}

ul.tabbernav li.tabberactive a:hover
{
color: #333;
background: #f8f8f4;

}

/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
border-top:0;
background:#f5f5f3;



/* If you don&#39;t want the tab size changing whenever a tab is changed
you can set a fixed height */

/* height:200px; */

/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */

/* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;

}
.tabberlive .tabbertab h3 {
display:none;

}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}

.tabbertab p { padding-bottom:10px; line-height:140%; }
.tabbertab ul { padding:0; margin:0;}
.tabbertab ul li { padding:5px 0 6px 0; font-size:11px; }
.tabbertab ul li { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFSnvRqv8VI9FOySq3ipil2bcjc9odBBvO16Kou39Ic9vL-iRKo1rKSFU5Q8DP4LA1xgND1KjG0Uwe79T-FhpvWOUzBTo74eq472_kxLluC6vM6Dn8UC6hsUf3hRqudcrhnCFLO1os9q51/) no-repeat 0 7px; padding-left:16px; border-bottom:1px solid #eeedea;}
</style>

<script type='text/javascript'>
//<![CDATA[

function tabberObj(argsObj)
{
var arg; /* name of an argument to override */

/* Element for the main tabber div. If you supply this in argsObj,
then the init() method will be called.
*/
this.div = null;

/* Class of the main tabber div */
this.classMain = "tabber";

/* Rename classMain to classMainLive after tabifying
(so a different style can be applied)
*/
this.classMainLive = "tabberlive";

/* Class of each DIV that contains a tab */
this.classTab = "tabbertab";

/* Class to indicate which tab should be active on startup */
this.classTabDefault = "tabbertabdefault";

/* Class for the navigation UL */
this.classNav = "tabbernav";

/* When a tab is to be hidden, instead of setting display='none', we
set the class of the div to classTabHide. In your screen
stylesheet you should set classTabHide to display:none.  In your
print stylesheet you should set display:block to ensure that all
the information is printed.
*/
this.classTabHide = "tabbertabhide";

/* Class to set the navigation LI when the tab is active, so you can
use a different style on the active tab.
*/
this.classNavActive = "tabberactive";

/* Elements that might contain the title for the tab, only used if a
title is not specified in the TITLE attribute of DIV classTab.
*/
this.titleElements = ['h2','h3','h4','h5','h6'];

/* Should we strip out the HTML from the innerHTML of the title elements?
This should usually be true.
*/
this.titleElementsStripHTML = true;

/* If the user specified the tab names using a TITLE attribute on
the DIV, then the browser will display a tooltip whenever the
mouse is over the DIV. To prevent this tooltip, we can remove the
TITLE attribute after getting the tab name.
*/
this.removeTitle = true;

/* If you want to add an id to each link set this to true */
this.addLinkId = false;

/* If addIds==true, then you can set a format for the ids.
<tabberid> will be replaced with the id of the main tabber div.
<tabnumberzero> will be replaced with the tab number
(tab numbers starting at zero)
<tabnumberone> will be replaced with the tab number
(tab numbers starting at one)
<tabtitle> will be replaced by the tab title
(with all non-alphanumeric characters removed)
*/
this.linkIdFormat = '<tabberid>nav<tabnumberone>';

/* You can override the defaults listed above by passing in an object:
var mytab = new tabber({property:value,property:value});
*/
for (arg in argsObj) { this[arg] = argsObj[arg]; }

/* Create regular expressions for the class names; Note: if you
change the class names after a new object is created you must
also change these regular expressions.
*/
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');

/* Array of objects holding info about each tab */
this.tabs = new Array();

/* If the main tabber div was specified, call init() now */
if (this.div) {

this.init(this.div);

/* We don't need the main div anymore, and to prevent a memory leak
in IE, we must remove the circular reference between the div
and the tabber object. */
this.div = null;
}
}


/*--------------------------------------------------
Methods for tabberObj
--------------------------------------------------*/


tabberObj.prototype.init = function(e)
{
/* Set up the tabber interface.

e = element (the main containing div)

Example:
init(document.getElementById('mytabberdiv'))
*/

var
childNodes, /* child nodes of the tabber div */
i, i2, /* loop indices */
t, /* object to store info about a single tab */
defaultTab=0, /* which tab to select by default */
DOM_ul, /* tabbernav list */
DOM_li, /* tabbernav list item */
DOM_a, /* tabbernav link */
aId, /* A unique id for DOM_a */
headingElement; /* searching for text to use in the tab */

/* Verify that the browser supports DOM scripting */
if (!document.getElementsByTagName) { return false; }

/* If the main DIV has an ID then save it. */
if (e.id) {
this.id = e.id;
}

/* Clear the tabs array (but it should normally be empty) */
this.tabs.length = 0;

/* Loop through an array of all the child nodes within our tabber element. */
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {

/* Find the nodes where class="tabbertab" */
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {

/* Create a new object to save info about this tab */
t = new Object();

/* Save a pointer to the div for this tab */
t.div = childNodes[i];

/* Add the new object to the array of tabs */
this.tabs[this.tabs.length] = t;

/* If the class name contains classTabDefault,
then select this tab by default.
*/
if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}

/* Create a new UL list to hold the tab headings */
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;

/* Loop through each tab we found */
for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];

/* Get the label to use for this tab:
From the title attribute on the DIV,
Or from one of the this.titleElements[] elements,
Or use an automatically generated number.
*/
t.headingText = t.div.title;

/* Remove the title attribute to prevent a tooltip from appearing */
if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {

/* Title was not defined in the title of the DIV,
So try to get the title from an element within the DIV.
Go through the list of elements in this.titleElements
(typically heading elements ['h2','h3','h4'])
*/
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) {
/* Title was not found (or is blank) so automatically generate a
number for the tab.
*/
t.headingText = i + 1;
}

/* Create a list element for the tab */
DOM_li = document.createElement("li");

/* Save a reference to this list item so we can later change it to
the "active" class */
t.li = DOM_li;

/* Create a link to activate the tab */
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;

/* Add some properties to the link so we can identify which tab
was clicked. Later the navClick method will need this.
*/
DOM_a.tabber = this;
DOM_a.tabberIndex = i;

/* Do we need to add an id to DOM_a? */
if (this.addLinkId && this.linkIdFormat) {

/* Determine the id name */
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;
}

/* Add the link to the list element */
DOM_li.appendChild(DOM_a);

/* Add the list element to the list */
DOM_ul.appendChild(DOM_li);
}

/* Add the UL list to the beginning of the tabber div */
e.insertBefore(DOM_ul, e.firstChild);

/* Make the tabber div "live" so different CSS can be applied */
e.className = e.className.replace(this.REclassMain, this.classMainLive);

/* Activate the default tab, and do not call the onclick handler */
this.tabShow(defaultTab);

/* If the user specified an onLoad function, call it now. */
if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};


tabberObj.prototype.navClick = function(event)
{
/* This method should only be called by the onClick event of an <A>
element, in which case we will determine which tab was clicked by
examining a property that we previously attached to the <A>
element.

Since this was triggered from an onClick event, the variable
"this" refers to the <A> element that triggered the onClick
event (and not to the tabberObj).

When tabberObj was initialized, we added some extra properties
to the <A> element, for the purpose of retrieving them now. Get
the tabberObj object, plus the tab number that was clicked.
*/

var
rVal, /* Return value from the user onclick function */
a, /* element that triggered the onclick event */
self, /* the tabber object */
tabberIndex, /* index of the tab that triggered the event */
onClickArgs; /* args to send the onclick function */

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

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

/* Remove focus from the link because it looks ugly.
I don't know if this is a good idea...
*/
a.blur();

/* If the user specified an onClick function, call it now.
If the function returns false then do not continue.
*/
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; /* counter */

/* Hide all tabs and make all navigation links inactive */
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};


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

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

/* Hide a single tab and make its navigation link inactive */
div = this.tabs[tabberIndex].div;

/* Hide the tab contents by adding classTabHide to the div */
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};


tabberObj.prototype.tabShow = function(tabberIndex)
{
/* Show the tabberIndex tab and hide all the other tabs */

var div;

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

/* Hide all the tabs first */
this.tabHideAll();

/* Get the div that holds this tab */
div = this.tabs[tabberIndex].div;

/* Remove classTabHide from the div */
div.className = div.className.replace(this.REclassTabHide, '');

/* Mark this tab navigation link as "active" */
this.navSetActive(tabberIndex);

/* If the user specified an onTabDisplay function, call it now. */
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{
/* Note: this method does *not* enforce the rule
that only one nav item can be active at a time.
*/

/* Set classNavActive for the navigation list item */
this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};


tabberObj.prototype.navClearActive = function(tabberIndex)
{
/* Note: this method does *not* enforce the rule
that one nav should always be active.
*/

/* Remove classNavActive from the navigation list item */
this.tabs[tabberIndex].li.className = '';

return this;
};


/*==================================================*/


function tabberAutomatic(tabberArgs)
{
/* This function finds all DIV elements in the document where
class=tabber.classMain, then converts them to use the tabber
interface.

tabberArgs = an object to send to "new tabber()"
*/
var
tempObj, /* Temporary tabber object */
divs, /* Array of all divs on the page */
i; /* Loop index */

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

/* Create a tabber object so we can get the value of classMain */
tempObj = new tabberObj(tabberArgs);

/* Find all DIV elements in the document that have class=tabber */

/* First get an array of all DIV elements and loop through them */
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {

/* Is this DIV the correct class? */
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {

/* Now tabify the DIV */
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}


/*==================================================*/


function tabberAutomaticOnLoad(tabberArgs)
{
/* This function adds tabberAutomatic to the window.onload event,
so it will run after the document has finished loading.
*/
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>

Note : Host bullet.gif image yourself.

4. Now go to Design-->Page Element and click on "Add a gadget".

5. Select "html/java script" and add the code given below and click save.

<div id="tab">
<div class="tabber">

<div class="tabbertab">
<h2>Recent Post</h2>
<ul>

ENTER-TAB-1-CONTENT

</ul>
</div>

<div class="tabbertab">
<h2>Recent Comments</h2>

<ul>

ENTER-TAB-2-CONTENT

</ul>
</div>

<div class="tabbertab">
<h2>Archives</h2>
<ul>

ENTER-TAB-3-CONTENT

</ul>
</div>

</div></div>

Note: Replace ENTER-TAB-1-CONTENT , ENTER-TAB-2-CONTENT , ENTER-TAB-3-CONTENT with your content.

And also you can change Tabs Names.(Blue colored text in script).

Please do comments and share if any problem.

Make backup of blogger (blogspot) template?

To take backup of your blogger blog or blogspot.com blog template follow these instruction carefully.

Login in to your blogger account www.blogger.com

Select your desired blog to take template back up.

Click on Design > Edit HTML

 

 and then click on ‘download full template’ to save it on your computer. (See the Image Below)