Showing posts with label Making Money from Blogger. Show all posts
Showing posts with label Making Money from Blogger. Show all posts

Add Meta Tags to Blogger for Better SEO

In this Blogger tutorial I will show you the best way to add meta tags to your Blogger blog (Blogspot blog) to improve the SEO of your blog and work around the limitations of the Blogger platform.

I have observed that there are many Blogger help blogs out there telling you to just add meta tags however this will very likely achieve the opposite result from the one you are after. Whether you are yet to add meta tags or you have added meta tags already make sure you read and follow the methods contained in this article to get the best results.

What are Meta Tags?
Meta tags are HTML tags that provide additional information about your blog that is unseen by visitors but available to search engines. The meta description tag, for example, provides a short summary of the page content. The keyword meta tags show the keywords and keyword phrases a visitor might use to find your blog. Because of abuse of meta tags search engines have become smarter and most no longer place emphasis on keywords to establish page ranking however keyword meta tags are still used by some search engines so it is a good idea to include them.

Limitations of Blogger and SEO
One of the disappointing aspects of Blogger is that it is not properly optimized for SEO. Meta descriptions and keywords are not supported by blogger.com by default. Title tags are also not optimized. This means that you will miss valuable opportunities to attract visitors to your blog. 

However meta tags and meta descriptions can be inserted into your Blogger template (Blogspot template) to good effect. Fortunately these work arounds will go a long way to improving the placement of your blog in search engine results. Please refer to adjust Blogger title tags for improved SEO for help with title tags.

Simply placing a meta tag description in your Blogger template is problematic because Blogger will use the same meta tags for all pages in your blog. This means that every entry that Google has for your site will show in search results with the same description. This solution would result in reduced traffic rather than increased traffic. However there is a way to add meta tags to the home page of your blog only which will not affect post pages in your blog. In this way visitors will find the home page of your blog in search engines by the use of appropriate keywords and a site description.

How to Add Meta Tags to a Blogger Blogspot Blog Home Page
1. Login to Blogger if not already logged in

2. Navigate to Design > Edit HTML

3. Back up your template as a precaution by downloading full template to your computer.

4. Check the Expand Widget Templates box

5. Find these lines which will be near the top of your template:
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

6. Paste the following code immediately below <title><data:blog.pageTitle/></title>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Place your blog description here' name='description'/>
<meta content='Place your blog keywords here(separated by commas)'
name='keywords'/>
</b:if>

7. Enter your blog description between the single quote marks under description. Maximum 150 characters

8. Enter the keywords of your blog between the single quote marks under keywords. Ensure you separate each keyword or keyword phrase by a comma. Make sure your keywords do not exceed 200 characters

By way of example here are the meta tags I use for the home page of Blog Know How:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Find tips,tricks,tutorials,walkthroughs to customize your Blogger Blogspot blog.SEO,Banners,Adsense,gadgets,fixes,feeds,rss,help for beginner bloggers' name='description'/>
<meta content='blog,blogger,blogger.com,blogspot.com,blogspot,blogging,tutorials,tips,blogger help,customize blogger,SEO,make money,gadgets,Google Adsense,banners, feeds,analytics,solutions'
name='keywords'/>
</b:if>

Best Way to Add Meta Tags to Blogger Blogspot Blog
9. Click on the Save Template button

10. To see your description in action you can either navigate to your blog's home page and click on view source in your browser. In Internet Explorer you will find this option in the view menu. A text document will appear which you can scroll through. You will see your description near the top of the document. Alternatively you can check your description in a free Meta Tag Analyzer tool such as Submit Express or SEO Centro


How to Add Meta Tags to a Blogger Blogspot Blog Individual Post
1. Follow steps 1 to 4 as for adding meta tags to the Home Page

2. Add the following in the <head> section of your Blogger template. Enter this code below the Home Page code above you have just entered:
<b:if cond='data:blog.url == "http://url of your post"'>
<meta content='keywords pertaining to your post' name='keywords'/>
<meta content='crafted description of your post' name='description'/>
</b:if>

Here is an example of optimized meta tags for this post:

<b:if cond='data:blog.url == "http://blogknowhow.blogspot.com/2009/05/add-meta-tags-to-blogger-for-better-seo.html"'>
<meta content='meta tags,optimize blogger,blogger SEO,search engine optimization, blogspot,blogger,blogspot.com,blogger.com,blogging,blog' name='keywords'/>
<meta content='Improve SEO by adding meta tags to your Blogger Blogspot blog. Step by step tutorial shows you how to add meta tags to the home page and a single post' name='description'/>
</b:if>

Add Meta Tags to Blogger on a Single Post
3. Add your post URL, keywords and description. To find the URL of your post navigate to the post's page and copy the link showing in the address bar of your browser including the http:// prefix 

4. Click on the Save Template button

5. To check your description you can use the view source in your browser once you have navigated to the post page or a meta tag analyzer

Note: This method is suitable if you have a few key posts that you want to ensure you get maximum traffic on. If you have a lot of posts this manual method would be very tedious. I don't know of any automated method or script to add meta tags at this point but I am investigating it and will keep you posted.


Analyze Your Blogspot Blogger Meta Tags
Once you have added meta tags to your blog you can use tools to analyze them to ensure their relevance. Aim for meta tag relevancy to page content of above 90%. To check this you can use a free meta tag analyzer tool such as Submit Express or SEO Centro


Troubleshooting and Tips
  • Observe Character Limits
    To avoid problems ensure that you keep within the maximum character limits:
    Title Tag - Maximum Characters is 60
    Site Description - Maximum Characters is 150
    Keywords - Maximum Characters is 200

  • Title Tag Tweak
    If you have inserted the title tag tweak and it is highly recommended that you do so then you will need to add the code above after the title tag adjustment in the <head> section of your template. Read more about adjusting title tags
  • Keywords
    Although some search engines no longer place too much emphasis on keywords some still do so it is worth adding keywords. Avoid using the same keyword more than 3 times. The maximum number of keywords recommended to be robot friendly is around 20.
  • Problems Reading the Code
    Some readers have reported problems with their browser reading this code. Try this document form of the article if this happens to you

In this Blogger meta tag tutorial I have discussed the best way to add meta tags to a Blogger blog (Blogspot blog) to improve search engine results given the limitations of the Blogger platform. In this article you have learned to add both meta tags for keywords and descriptions to the home page. You have also learned how to add meta tags to an individual post. To optimize your meta tags I have included links to free meta tag analyzer tools.

Google Adsense Tips for a Blogger Blog

As the Blogger platform is owned by Google it is not surprising that Blogger makes it very easy to add Google Adsense to your Blogger Blogspot blog. In this tutorial you will learn about different ways to add Google Adsense to your blog. Along the way I will be offerring a few tips about best placement of Google Adsense units. I have aimed this Blogger tutorial at new bloggers and beginners and assumes no prior knowledge of Google Adsense. Bear in mind that before you can start to add Google Adsense to your Blogger blog you will need to have created an Adsense account.

3 Ways to Add Google Adsense to Blogger
There are two main ways to add Google Adsense to Blogger: one is to use a Google Adsense widget and the other is to use a HTML/Javascript widget. There is also a third way, which is outside the scope of this article, which is to hard code the Adsense code directly into the template.

Adding a Google Adsense Widget to Blogger 
An Adsense widget is a container for the Google Adsense code. Once created it is easy with Blogger's powerful interface to drag and drop widgets into different positions within your template. Google Adsense widgets can be added to the header, sidebar, footer, or body of your blog. A Google Adsense widget is created when you click on an Add a Gadget button in the Layout > Page Elements menu and then select Adsense.

How to Add a Google Adsense Widget to the Sidebar
The simplest way to add Google Adsense is to select Adsense from the range of gadgets offered in the Layout > Page Elements page. Assuming you are using one of Blogger's standard templates you will more than likely be adding a skyscraper unit 160x600 or similar to the sidebar.

Google will work out the color scheme of the ad unit for you according to your template. You can override these settings if need be and configure the colors manually but stick with the default unless you have good reason not to. Another decision you will need to make is about the format of the ad unit. You can choose between text only and text and image. Personally I prefer text units for sidebars as you get more bites of the cherry than with an image unit. Images only advertise one thing while text units may provide up to 5 different links. However if you need a particular look you might still need to go for the image unit which is why Google offer this flexibility in the first place. Bear in mind that the combined text and image units are considered to be the highest earners.

Add 160x600 Google Adsense Skyscraper

Add an Adsense Widget to the Footer
Another not so widely used place for a Google Adsense unit is in the footer of your blog. If your template has a footer (eg Blogger standard templates like Minima and Rounders both have footer sections) you can add a Google ad unit to this area too. Footers are becoming increasingly popular places to add information like Archives and Follower widgets so visitors are getting used to the idea of scrolling down to the bottom of the page to check out the footer.

A linked 728x15 ad is a good choice for a footer position especially if you have a Followers widget enabled in the footer. I place this linked ad unit directly above the Followers widget. I suggest you make use of linked units if you can - you are allowed up to 3 linked units per page. Linked ad units can earn revenue if strategically placed on your blog. Do keep in mind though that Google Adsense units nearer the top and middle of the page are more visible and are likely to be your top performers.

Add 728x15 Linked Google Adsense Unit to Blogger Footer

HTML/Javascript Widget
The second way to add Google Adsense to your blog is to use aHTML/Javascript widget. Make use of these if you want to have more control over your advertising and track your Google ad units. To get the code in the first place you will need to login to Google Adsense and create each ad unit in the size of your choice from the Ads for Contentmenu. This will allow you to set up a unique channel for each ad unityou create so that you can identify which are your top performing units. For every new ad unit generated Google Adsense provides the code which you will need to copy and paste into a HTML/Javascript widget positioned in either the sidebar or the footer position.

How to Add Google Adsense Between Posts
Blogger is such a powerful Blogging platform with so many great features. One of these features is the facility to set Adsense to appear between blog posts. All that is needed is to navigate to Layout > Page Elements. Click on the edit Blog Posts link and check Show Ads Between Posts(last in the list)from the Select Items menu. I usually select 336x280 ad unit size as this gives a good ratio of links for the size. I also prefer text units for this position too as again you are more likely to have a visitor click on a link if they are presented with quite a few. Save and view your blog. Blogger automatically places one of three Google Adsense ads directly below each of the first three posts. If you want to space the ads further apart you can do so though in my experience there really is no advantage in doing this.

Remember that you can have up to three ad units and up to three linked ad units displayed at any one time. If you have ads in another part of your blog for instance Blogger will automatically recognise this and only display 2 other ad units. Sometimes I notice there is a bit of a glitch with Blogger and it may not display sidebar ads in favour of 3 ads in between posts so you might have to play around with this a little to get the positioning you want.

Add Google Adsense Between Posts

Note: To Center the Google Adsense Ad Unit
  1. Go to Layout > Edit HTML
  2. Check the Expand Widget Templates box
  3. Make sure you back up your template before proceeding
  4. Find the code block beginning with this line:
    <data:defaultAdStart/>

  5. Scroll down until you find these lines:
    <div class='inline-ad'>
    <data:adCode/>

  6. Change these lines to the following:
    <div class='inline-ad'>
    <P ALIGN='center'><data:adCode/></P>

  7. Save template


In my next couple of articles about Google Adsense I will be discussing how to add Google Adsense to other parts of your Blogger template including in the header, before the first post, after the last post, and in the middle of posts. This article has covered the basics of placement of Google Adsense for Blogger and offerred some suggestions about best placement of Google Adsense ad units.

Add an Affiliate Banner to Blogger Sidebar

A lot of people want to make money from their blog and for this reason want to learn how to insert affiliate banners into their Blogger Blogspot blog. In this Blogger tutorial which is the first of a series I will show you how to place a banner in the sidebar of your Blogger blog (Blogspot blog).

Even if you are new to Blogger and have very little technical knowledge this tutorial is still suitable for you as I will guide you through every step in the process of adding a banner ad to the sidebar of your Blogger blog.

Banner Advertising is an Effective Way to Make Money from a Blogger Blog - Here is a cluster of 3 125x125 banner ads
How to Add an Affiliate Banner To the Sidebar of Your Blog
It is relatively easy to add an affiliate banner to the sidebar of your blog.

1. Sign up with an affiliate marketing program like Commission Junctionand select your merchant

2. Decide on the size of the merchant banner or banners you wish to display in your sidebar making sure that whatever you choose will fit into the sidebar space otherwise your banner ad may not display properly on your blog. Typical sizes suitable for sidebars are:
  • small rectangular banners 125x90 or 125x125
  • square banners 200x200 (if space allows)
  • short vertical banners 120x200
  • long column style skyscraper bnnners 120x600 or 160x600

3. Choose your banner and you will be presented with the merchant code to display the banner. Right click to select all and right click again tocopy the code to the clipboard of your computer

4. In a new window login to Blogger and navigate to Design > Page Elements

5. Click on Add a Gadget in the sidebar. If you are using a customized template you may have 2 different sidebars so decide which you want the banner ad to display in.

6. Select HTML/Javascript widget from the Add a Gadget menu

7. Place your mouse in the content box of the Configure HTML/Javascript widget and right click. Choose paste to insert the merchant code of your banner ad into the content box 

8. In the title box add a Title like Sponsored Ads if you wish otherwise leave it blank

Paste Merchant Code of your banner ad into Configure HTML/Javascript content box
9. Click on Save

10. Using Blogger's drag and drop feature to pick up your new HTML/Javascript widget and position it where you want your banner ad to show up in your sidebar. 

11. Save your layout

12. Click on View Blog to see you new banner ad in action. 


Add Space Between Your Banner Ads
If you want more space between your banner ad and the previous widget you can add <p> before the code your inserted in the HTML/Javascript widget. If you need even more add another <p>

To Center Your Advertising Banner
If you want to center your banner ad insert <center> before the merchant code and </center> after it.

Add More Than One Banner
If you want to add more than one banner ad to the same widget you can just by pasting the code for the second banner ad below the first lot of code. If you want some white space between the banners ads insert <p> between each lot of code.

Troubleshooting

Your Banner Does Not Display
Your banner ad should appear right away. If your banner ad doesn't display at all then there is a problem with the widget you have just created. Retrace your steps making sure you have got all the code.

Only Placeholder for the Banner Displays
If you see a placeholder but no ad displays then the affiliate website may be off line or there is a problem with the code in some way. Go back and make sure you copied all of the code correctly



In this Blogger tutorial you have learned how to add an affiliate marketing advertisement banner to the sidebar of your Blogger blog (Blogspot blog) and about some common problems that you may encounter. In my next tutorials on banner advertising I will show you how to place a banner in a variety of other spots on your blog including the footer, above the first post and in the header. Why not bookmark this site so you can return easily?

Better Placement of Google Adsense in Blogger

To increase the performance of Google Adsense on your Blogger Blogspot blog you can extend the choice of placement options of your Google ads with some simple tweaks. This involves making a few minor adjustments to your Blogger template to increase where widgets can be created and how many widgets can be placed in your template.

In this second tutorial of the series on placement of Google Adsense in a Blogger Blog you will learn how to place Google Adsense between the header and the first post. This will allow for a variety of Google Adsense ads to be added of which the 728x90 leaderboard is probably the most suitable. This tutorial assumes no particular technical knowledge of Blogger and is suitable for bloggers of all technical abilities as it gives step by step instructions to implement the changes.


How to Add Google Adsense Between the Header and First Post
If you want to increase your earnings from your blog you may decide you would like to have a full length advertising banner between the header and the first post. For instance it can be very effective to have a 728x90 leaderboard in this prime position. To add a Google Adsense unit to this position take the following steps:

1. Navigate to Layout > Edit HTML

2. Back up Template as a Precaution

3. Check Expand Widget Templates box

4. Find the following code:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

5. Replace

showaddelement='no'

with

showaddelement='yes'

6, Save Template

7. Navigate to Layout > Page Elements

8. Click on new Add a Gadget option that will now have appeared between Blog Posts and the Header. 

Add Google Adsense Between Header and Post by Adjusting the Template

9. Choose Google Adsense and Add Leaderboard 728x90. Save

Add Google Adsense 728x90 Banner Between Header and Template Body

9. View new Google Adsense Unit appearing between header and first post

Here is an example of a 728x90 Leaderboard between the header and the first post and the top of the sidebar.

How to Add Google Adsense Unit Between Header and Blog Posts in Blogger

In this tutorial which is part of a series on placement of Google Adsense in Blogger Blogspot blogs you have learnt how to add Google Adsense between the header and the first post section. As this is a prime position for a 728x90 leaderboard ad unit I have concentrated on showing you how to add this Google Adsense ad unit to your blog. For more tutorials on Google Adsense please refer to the related posts as the bottom of this article. 

Add Google Adsense to Blogger Header

In this Blogger tutorial you will learn how to add Google Adsense to the header of your Blogger blog. This article assumes no knowledge of Blogger and provides a walkthrough of the steps involved to add Google Adsense to the header of your blog.

This is the third Blogger tutorial in a series on adding Google Adsense to a Blogger blog (Blogspot blog).

Place Google Adsense Below Post Title in Blogger
Better Placement of Google Adsense on a Blogger Blog
  1. How To Add Google Adsense to the Header (Above the Title)
    If you want to add Google Adsense to your header for instance above the title you can by adjusting your template to give you the option of adding more than one widget to the header area.
    1. Login to Blogger and navigate to Design > Edit HTML
    2. Back up your template as a precaution by downloading the full template to your computer
    3. Using CTRL + F to bring up the search box find the following line of code. For default Blogger templates - Layout (2006) such as Minima, Thisaway and Sand Dollar and for many custom templates find <div id='header-wrapper'>

      For new Blogger templates such as Simple and Awesome Inc find this line <div class='region-inner header-inner'>
    4. Replace the following code in red: 
      <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

      with
      <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

    5. Save Template
    6. Navigate to Design > Page Elements (previously Layout > Page Elements) and view the new option to add a gadget to the header area

      Add a Gadget to the Header to insert Google Adsense
    7. Click on Add a Gadget and select the Google Adsense gadget.
    8. Choose the type of ad unit you want. For this example I chose a new linked 728x15 ad unit from the dropdown format menu for an Adsense ad that would sit above the blog title. Configure colors if necessary. Color blending is usually done automatically by Blogger according to the color schema of your template.
    9. Click Save
    10. Click View Blog to see your new Google Adsense unit in place. All going well your new ad unit should appear look something like the image below

      How to Add Google Adsense Ad Unit Above the Title in the Header of Blogger - 728x15 Linked Google Ad Unit

  2. How to Add Google Adsense to the Header (Below the Title)
    To have your new Google Adsense linked unit appear below the title the steps are the same as above. The difference is that you will need to shift the ad unit into position by using the drag and drop feature to move the widget below the header title in the Design > Page Elements page.

    Add Google Adsense gadget below blog title in Blogger
    Add Google Adsense 728x15 Ad Unit to Blogger Header Below the Title


Tips and Troubleshooting
By default Blogger will left align these ads so if you want to center the Adsense unit then use the <div align='center'>

How to Center a Google Adsense Unit in Blogger
  1. Once you have created your Google Adsense unit go to Design > Edit HTML
  2. Check the Expand Widgets Template box
  3. Find the code you replaced in Step 4
    <b:section class='header' id='header' maxwidgets='3' showaddelement='yes>

  4. Directly below you will see lines of code that resemble the following:
    <b:widget id='AdSense2' locked='false' title='' type='AdSense'>
    <b:includable id='main'>
    <div class='widget-content'>
    <data:adCode/>
    <b:include name='quickedit'/>
    </div>

  5. Add the following code shown in red
    <b:widget id='AdSense2' locked='false' title='' type='AdSense'>
    <b:includable id='main'>
    <div class='widget-content'>
    <div align='center'><data:adCode/></div>
    <b:include name='quickedit'/>
    </div>

  6. Save template and view your Adsense widget which will now be centered


In this Blogger tutorial you have learnt how to add a Google Adsense unit above and below the blog title in the header section of your Blogger blog (Blogspot Blog). I have also demonstrated how to center the Google Adsense unit. As always any questions please ask.

Make Money Add Banners Ads to Blogger


Make Money from Banner Ads on Your Blogger BlogOne of the things that makes Blogger such a great blogging platform is the facility to add advertising to your Blogspot blog and make money from it. In this article I will be discussing how banner advertisements on your Blogger blog can make money for you. By banner advertising I mean advertising in addition to Google Adsense or Adbrite that you may have already added to your Blogger blog. For information on adding Google Adsense to your blog please read my articles on Google Adsense.

Banner advertising is FREE. And Banners Do Make Money.
It is no secret that banners make money provided you choose your merchant program carefully and have enough traffic accessing your site. In my experience once you reach around 100 visitors a day is a good time to add a few banners to your blog.

How Do I Make Money from Banners on My Blogger Blog?
Affiliate marketing banners make money for the publisher - that's you. When you place a banner on your blog the affiliate program gives you a snippet of code to add to your template which makes the banner display and identifies you as the publisher. When a visitor clicks on a banner on your website that click is recorded as originating from your site and you make money as a result of that click. Depending on the merchant program that you have signed up for you can earn a commission for providing a lead, or receive a percentage of the sale.

An Example of How Banners Work
After having placed your banner ad on your Blogger blog your site gets 100 visitors in a day. Out of that 100 people 5 people click on a banner which takes them through to the merchant's website. From those 5 people one person makes a purchase of around $100.00. Assuming your commission is 10% of the sale you have just made yourself $10.00. It's that easy.

Making the Most Out of Advertising Banners
To make money from banner ads you need volume as only a small percentage of your visitors will take any notice of the advertising on your blog and only a much smaller percentage of that pool will actually buy anything once they click. That's why it is really important that you focus your energies on building site traffic. If you need to grow your traffic read my articles on tips to increase traffic to your Blogger blog.

Make Money from Banner Advertising on BloggerOf course you do need to choose your affiliate banners carefully as obviously some advertising will have more appeal than others. To some extent this is a matter of trial and error as you can never be completely sure how a banner will perform until you try it. You can increase the odds of success however, by choosing merchant programs that are related to your blog in some way. For instance if your blog is about cars then advertisers of car accessories like audio units would be a good place to start.

How Do I Add Affiliate Banners to My Blogger Blog?
Adding affiliate banners to your blog is pretty easy. Pretty much copy and paste stuff which anyone can do. Please read my article providing step by step instructions on how to Add Affiliate Banner Ads to the Blogger Sidebar of your Blogger blog if you are unsure. If you want to place a banner in the header of your blog please refer to Add an Affiliate Banner to Blogger Header

Disadvantages of Banner Ads
Too many banner ads can give your visitors the impression you are just in it for the money. So make sure you don't go overboard with too much advertising that will overshadow or detract from the content of your blog. Remember less is more so place your banners ads strategically on your blog. I like a small cluster of about 4 banner ads usually 125x125 somewhere fairly close to the top in the sidebar and a 468x60 banner in the header. The header is a prime position for an effective banner advertising campaign. Read more about how to place a banner ad in the header of your Blogger blog in my adding banners to Blogger series of tutorials.


The other main problem with banner ads is that they encourage visitors to leave your site and as we all know one of the hardest jobs is to attract the visitor in the first place. Do you really want them leaving your site before they have had a chance to look around? I don't think so. Only place banner ads on your blog that you are confident will reap you some rewards otherwise forget it. You might actually lose traffic if you provide too many inducements to leave your site.

Banner Ads Make Money


In this article I have discussed banner advertising as it relates to Blogger Blogspot blogs. You have learned a little about how affiliate programs work and how you might use banner ads on your own blog to make extra money. For tutorials on adding banner ads to your Blogger Blogspot blog please refer to Add Affiliate Banner Ads to a Blogger Sidebar and Add an Affiliate Banner to Blogger Header.

Add Paypal Donate Button to Blogger

If you want to make a few bucks from all the hard work you are putting into your Blogger blog then consider adding a Paypal donate button to your Blogger blog (Blogspot blog).

Paypal Donate ButtonAdding a donation button will encourage all those happy readers to say a big thank you for helping them out. Not everyone will donate but you will get the odd generous soul who will willingly donate some chump change to shout you a coffee.

In this Blogger tutorial we will be adding a gadget to the Blogger sidebar or alternatively you could place it in the foooter of your Blogger template. We will be using a widget to contain our Paypal Donate Button and will not be changing your Blogger template. If you wish to place the donate button into your Blogger posts see the end of this Blogger tutorial for details.

Skill level is rated easy.

How to Add a Paypal Donate Button to Blogger (Sidebar or Footer Gadget)
Note: Updated on January 20 2012 to take account of new Paypal interface

1. Get yourself a Paypal account if you don't already have one

2. Login to your Paypal account

3. Click on the Merchant Services tab

Select Paypal Merchant Services Tab
4. Choose Donations from the list of key features displayed in the right sidebar of the PayPal Website Payments Standard Option (first of 3 payment solutions)
Note Paypal have changed its interface. You now need to select PayPal Website Payments Standard from Merchant Services drop down and then under the buttons in option 1 you will see in pretty tiny writing I must say "There are also buttons for donations and gift certificates." Click on donations.

Select Donations link in Paypal from Paypal Website Payments Standard Options 1 to add a donations button to Blogger Blogspot blog

5. From the Paypal Create a Donation Button screen choose Create Your Button Now link (one of two).



6. Stick with the default button unless you wish to customize it

7. Choose your currency depending on your needs and location

8. Choose Donors enter their own contribution amount radio button unless you want to have a set amount

Paypal Create Button Steps
9. Ensure the Secure Merchant ID radio button is selected. This will prevent spammers getting hold of your email address

10. At Step 2 it is worth saving your button

11. At Step 3 Customize your checkout page by allowing donors to write a short comment by selecting the Yes radio button to special instructions to seller

12. Select the No radio button for Customer's Shipping Address

13. Select the Create Button button

14. Once Paypal creates the donate button code copy it by right clicking your mouse and choosing copy

15. Logout of Paypal

16. Login to Blogger if you are not already logged in

17. Go to Design > Page Elements

18. Click on the Add a Gadget link in the sidebar

19. Choose HTML/Javascript widget from the list provided

20. Paste the button code into the Content box of the dialog box that appears by placing the mouse inside the box and right clicking the mouse and then paste

21. Select a title like "Shout Me a Coffee Today!" or whatever you would like

22. Click on the Save button

23. Drag and drop your new donation gadget into the spot you want it to appear in

24. Click the Save button to ensure your changes are saved

25. Click View Blog to see your new donate button in the sidebar of your Blogger blog

26. Click on your new donate button and you will be taken to the Paypal Checkout screen

Paypal Checkout screen

Tips and Troubleshooting
  1. To Add a Paypal Donate Button to Blogger Posts
    The following instructions will add a Paypal Donate button to all new Blogger posts. Note previous posts will not be changed. You will need to hard code the button into your Blogger template to have the Paypal Donate button added to every Blogger post. (Please ask if you need help with this)
    1. Follow the directions (steps 1-16) as above to get your Paypal button code
    2. In Blogger go to Settings > Formatting
    3. Paste the Paypal Donate Button code into the Post Template box
    4. Save changes 
    5. Click on New Post to see that the code will be automatically inserted at the foot of each new post. (you will need to be in Edit Html mode to see the code)

  2. To Add a Paypal Donate Button to Individual Blogger Posts
    1. Follow the directions (steps 1-16) as above to get your Paypal button code
    2. In Blogger go to the post you wish to insert the button code into
    3. Insert the button code taking care to change all instances of double quotes to single quotes
    4. Save post and publish as normal. (If you have trouble with the preview post button in the old editor in Blogger click on compose and then edit html)


This Blogger tutorial has walked you through the steps needed to add a Paypal donate button to your Blogger blog (Blogspot blog) including how to configure your Paypal button at Paypal. I have covered adding the button as a sidebar gadget or footer gadget or alternatively added to Blogger posts. Have fun!