Saturday, May 30, 2009

Add Breadcrumb Navigation to Blogger Blogspot

One way you can improve navigation of a Blogger blog (Blogspot blog) is to add breadcrumb navigation to your Blogger blog. There is also a SEO benefit of installing a breadcrumb as major search engines like Google treat anchor text links as important. In this Blogger tutorial I will guide you through the steps to add breadcrumb navigation to a Blogger blog (Blogspot blog).

Whether you are using a custom template or a default Blogger template breadcrumb navigation can be added. It is not difficult and I have updated these instructions on December 4, 2010 to take account of the new generation of default Blogger templates eg Simple.

What Will a Breadcrumb Do on My Blog?
Adding a breadcrumb to your blog provides a form of text-based navigation. A breadcrumb displays the visitor's location within a blog. The advantage of a breadcrumb is that it provides shortcuts to enable visitors to quickly get around your blog by jumping from one part of your blog to another.

To illustrate how adding a breadcrumb would work in your blog let's use an example. A breadcrumb for an individual post would follow this format:

Home > Label > Post Title

Using this post as an example a breadcrumb might be Home > Navigation > Add a Breadcrumb to Blogger Blogspot Blog. In cases where there is more than one label this hack uses the last label listed. If a visitor wanted to look at other posts about navigation all they need do is click on the "Navigation" link in the breadcrumb and they will be taken to a page which will show them all the posts with the "Navigation" label.

Breadcrumb navigation makes it easy to move around your Blogger Blogspot blog
SEO Benefits of a Breadcrumb
Apart from improving the navigation of your Blogger blog adding a breadcrumb also has SEO benefits. Anchor text such as labels tells search engines about the subject of the linked page. Search engines view a breadcrumb with a text link to relevant keywords in the post as important. Read more about SEO try the following articles:

Blogger Blogspot SEO Tips and Tricks
Add Meta Tags to Blogger for Better SEO

How to Add a Breadcrumb Navigation to your Blogger Blog
It is not difficult to add a breadcrumb to your blog but it does involve adding a snippet of code to your template. Below is a step by step walkthrough which I have aimed at beginners so that anyone reading my blog will be able to follow the instructions. Credit to Hoctro for this hack.

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

2. Navigate to Design > Edit HTML

3. Back up your blog using Download Full Template as a precaution in case you accidently overwrite some code and are not able to retrieve it.

4. Check the Expand Widget Template box

5. Add the following CSS code above this line ]]></b:skin>

.breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA;}

Once your breadcrumb is working modify this if you need to so that it blends with the look and style of your template.

6. Find this line of code <b:includable id='main' var='top'>

7. Older XML Blogger templates and custom templates replace the entire block of code below. If you are using the new generation of Blogger templates such as Simple look for alternative instructions further down in this Step)

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>


with

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/><data:adStart/>


Update 4 December 2010. Note: if you are using the new generation of Blogger templates eg Simple then do the following instead

Find this code block and add the code in red between <div class='blog-posts hfeed'> and <data:defaultAdStart/>

<b:includable id='main' var='top'>
<b:if cond='data:top.showPlusOne'>
<script expr:src='data:top.plusOneJsUrl'/gt;
</b:if>
<!-- posts -->
<div class='blog-posts hfeed'>
<!--Breadcrumb Hack - disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/>

<data:defaultAdStart/>

8. Now immediately before <b:includable id='main' var='top'> paste the following large block of code:


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
</b:if>
</b:includable>

9. Click on Save Template button

10. Click View Blog and navigate to any post page to see your new breadcrumb in action

Add a Breadcrumb Based on Archives
Follow this hack provided by Purple Moggy if you would like to add a breadcrumb based on year and month. Likely format would be: Home > Year > Month > Blog Title

Tips and Troubleshooting
Some browsers have problems displaying the code above. If experience any issue then use the code in this link Add Breadcrumb Navigation to a Blogger Blog


In this Blogger tutorial you have learned how to add breadcrumb navigation to your Blogger blog (Blogspot blog) to improve SEO and site navigation. Please let me know how you get on. Good luck!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogger Blogspot SEO Tips and Tricks
Add Meta Tags to Blogger for Better SEO



Wednesday, May 27, 2009

Blogger Blogspot SEO Tips and Tricks

Want to improve SEO on a Blogspot Blogger blog? This tutorial discusses how bloggers can optimize their blog using SEO techniques to improve indexing of their Blogger Blogspot blog and achieve a better ranking in search engine results.

In this article I will be discussing the following Blogger help tips for SEO:

  • Adding Your Blogger Blog to Major Search Engines
  • Optimizing Blogger Post Titles
  • Utilising Meta Keywords and a Meta Description
  • Using Keywords in Alt Tags and Image Titles
  • Using Target Keywords in Your Post Content
  • Optimizing Blogger Title Tags
  • Optimizing Your Blogger Permalinks
  • Making Use of HTML Heading Tags Within Posts and Post Titles
  • Adding Breadcrumb Navigation to your Blogger Blog

Get Your Blog Listed by Major Search Engines
Add Your Blog to Yahoo and Submit your SitemapGetting listed in the major search engines is a must if you want to get traffic from search engines. I have written several in depth articles about how to add a sitemap to major search engines and how to add your blog to Google, Yahoo and MSN so I will not repeat myself. Follow these articles for step by step walkthroughs

Optimize Your Blogger Post Titles
Major search engines lend a lot of weight to titles so it is important that you craft your post titles carefully. To optimize your post titles make them keyword rich and ensure the title clearly explains what the blog post is about. Try to put your keywords at the beginning of your title for best results and avoid repeating your keywords within the title. Avoid long titles as Google only displays about 65 characters in the search results anyway.

Title tags are important if your Blogger blog is to attract traffic and rank in search engine results. On your blog home page the blog title appears between the title tags while on each individual post page it is the name of the article itself. While the title tags themselves are unseen by the visitor to your blog they are read when search engines crawl your blog.

Search engines use title tags to display your post title as a headline in search engine results. Search engines also display a description of the article either by extracting it from the post content usually by picking up the first 150 characters of your post or by reading the meta description of the post if one exists.

Meta descriptions can be crafted for individual posts in Blogger to good effect. Make descriptions unique for each post and ensure they contain your target keywords and keyword phrases to encourage search engines to extract snippets from them. To find out more about adding a meta description to an individual post please see my article Adding Meta Tags to Blogger Blogspot Blog for Better SEO


Add Meta Tags and Blog Description to Blogger
Adding meta keywords and a blog description to your Blogger Blogspot blog can boost your rankings by helping visitors locate your blog using keyword and keyword phrases. To find out the best method of inserting these into your Blogger blog please refer to my article about Adding Meta Tags to Blogger Blogspot Blog for Better SEO


Use Keywords in Alt Tags and Image Titles
Optimize the images used on your blog by making use of the alt tags and image titles. For some tips on SEO and images please refer to 10 Tips to Build Site Traffic for a Blogspot Blog


Use Target Keywords in Your Post Content
Know Your Blogger blogs keywordsMake sure you know your targeted keywords and use them within your post content. One of the factors in determining rankings is the relevance of the targeted keywords in relationship to the text that appears in the post content.


Change the Order of Post Title and Blog Title for Better SEO
One key change you can make to Blogger that will markedly improve the SEO of your blog is to adjust the title tags.

By default Blogger title tags are not optimized for search engines. The name of the blog appears before the name of the article which is not search engine friendly. Since search engines read left to right and give preference to what appears first having your blog name display before your post title is significant. To improve SEO it pays to adjust the order of title tags so that the your post title appears first:

Blog Title | Post Title

to

Post Title | Blog Title

To find out how to adjust the title tags of a Blogger Blogspot blog please refer to my article Adjust Blogger Title Tags to Improve SEO


Optimize Your Blogger Permalinks
Hand in hand with a title tag is the permanent permalink that is created when a post is published. If the title of the post is more than about 35 characters long you will strike problems with Blogger because it will shorten the title to a 35-40 character permalink. Some very ugly results happen because of this factor. For instance imagine a permalink such as:

http://blogknowhow.blogspot.com/2009/02/how-to-create-improved-permalinks-for.html

A totally useless permalink results because the blogger keyword has been left off. Learn more about crafting titles and working around the limitations of Blogger permalinks in my article How to Create Search Engine Friendly Permalinks

Optimize Blogger Blogspot Blog Permalinks

Improve SEO by Making Use of Headings for Post Titles
Heading tags are important for optimal SEO. Most Blogger.com templates use html header tags sized <h2> or <h3> for the post title. In the past major search engines like Google gave precedence to tags with <h1> ahead of anything else but how important <h1> tags are today is less certain. You could tweak the heading size of your post title if you wish however take care to ensure the look of your template isn't compromised. A bigger font will result and this may mean other parts of your blog will need to be adjusted to compensate. To find out what size your blog title is look for the following lines in your template.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>&t/a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

As can be seen this template blog title is in <h3>. To change the size of the tags just substitute the appropriate header tag where <h3> appears


Improve SEO By Making Use of Heading Tags Within Posts
Heading tags can be used to good effect in your posts. Make sure you have only one <h1> heading per page if you have one at all and reserve this for your post title. Make use of <h2> and <h3> headings throughout your post to emphasize key points and targeted keywords. Major search engines do take notice of <h2> and <h3> headings when crawling your blog. To add emphasis to a heading within your blog simply enclose the heading in <h3> tags.


Add Breadcrumb Navigation to your Blogger Blog
There is a hack that can be used to add breadcrumb navigation to a Blogger Blogspot blog. Adding breadcrumb navigation can boost your SEO of your blog as well as improving how readers get around.

Add Breadcrumb Navigation to Blogspot Blogger blog for Better SEO
A breadcrumb provides text-based navigation by displaying the visitor's location within a blog. A breadcrumb provides shortcuts to enable visitors to quickly get around your blog and jump from one part of your blog to another. For example a breadcrumb for a post about meta tags would be Home > Meta Tags >Add Meta Tags to Blogger for Better SEO. An anchor text such as 'meta tags' tells search engines about the subject of the linked page. Search engines view a breadcrumb with a text link to relevant keywords in the post as important.

To find out how to add a breadcrumb navigation to your Blogger Blogspot blog please refer to my article Add Breadcrumb Navigation to a Blogger Blog


This article has focused on providing you with solid Blogger SEO advice, tips and tricks for the Blogspot Blogger. It will help you achieve good SEO results for your blog. Good luck. If you have time let me know about your experiences.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
10 Tips to Build Site Traffic for a Blogspot Blog
Add Breadcrumb Navigation to Blogger Blogspot Blog
Add Meta Tags to Blogger Blogspot Blog for Better SEO
How to Add a Blogger Sitemap to Major Search Engines
Submit a Blogspot Blog Sitemap to Google
Submit You Blogspot Blog to Yahoo
Add Blogger Sitemap to MSN Live



Friday, May 22, 2009

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.


Related Articles
Adjust Blogger Title Tags for Improved SEO
10 Tips to Build Site Traffic for Blogger
List of Blog Know How Tutorials for Blogger Blogs
Add Breadcrumb Navigation to Blogger Blogspot Blog



Sunday, May 17, 2009

Add Google Adsense Below Blogger Post

Today's article is for anyone who would like to maximize their Google Adsense revenue of their Blogger Blogspot blog. I will show you how to use a very simple trick to place Google Adsense below the post content but above the post footer credits. This article continues the ongoing Google Adsense series about the placement of Google Adsense ad units in different positions within Blogger.

What's Involved in Inserting this Tweak?
The level of difficulty for inserting this Google Adsense ad placement is rated intermediate. You will need to enter the Google Adsense code directly into your Blogger template after parsing it (conversion of the Javascript into a format readable by Blogger). However I am assuming that virtual Blogger beginners might be interested in this Blogger tutorial so I have broken it down into very easy and manageable steps that even the non-technically minded can follow.

Below is a detailed step by step tutorial on how to place Google Adsense within a Blogger post which will appear below the post content but above the post footer credits. The Google Adsense ad unit will not appear on the main page. The ad unit will only appear on single post pages. This means that any existing ad placement on the home page will not be affected by adding this tweak unless the number of ad units for content is exceeded (3 are allowed on any one page).

Advantages of Adding Google Adsense to Single Post Pages
Currently Blogger displays Google Adsense below the embedded comments form on a post page where Google Adsense between posts is enabled. This is an awful position in terms of revenue earning power. This tweak will add an ad unit in a much more visible spot.

It is widely held that placement of Google Adsense ad units within the post is a superior position to generate revenue so adding an additional placement of an ad unit will boost your earning power.

Placement of Google Adsense Below the Content and Above the Footer on a Blogger Blogspot Blog

How Many Google Adsense Units Are Currently Displaying on Single Post Pages?
Google Adsense permits 3 Google Adsense ad units on any given post page. How many do you have displaying at present? Navigate to a single post page in your blog and check. Chances are that you will have either none or one ad unit displaying within your post content. If there is a Google Adsense ad unit it should be displaying below the embedded comments form.

You may also have Adsense widgets in your sidebar so count them too. Remember to only count the content units not the linked units as you can have up to 3 of those as well. If you have 2 or less you will be able to add this tweak without changing anything else. If you have three already counting Google Adsense widgets then you will have to make a choice about which Google Adsense placement will render the best results. In my experience Google Adsense units in lower positions in sidebars are not particularly good performers anyway so you probably won't be losing too much to eliminate these units and concentrate on adding ad units within posts.

Steps to Place Google Adsense Below Post Content and Above Post Footer Credits in Blogger
Follow Steps 1-11 if you don't have a Google Adsense ad unit.

IF YOU ALREADY HAVE A GOOGLE ADSENSE UNIT SKIP TO #12

1. From the Blogger Dashboard click on the Google Adsense link at the bottom of the page

2. Proceed to Adsense Setup > Get Ads or sign up for Google Adsense if not already

3. Choose Adsense for Content from the Ad Setup screen

4. Choose Ad unit from the Adsense for Content screen. In most cases you will want an ad unit.

5. Choose the Ad Type from the dropdown menu depending on your needs. I often select text only because I think they are better performers but you may have a different experience. Click on the Continue button

6. Choose the Ad Format. Most likely this will be between 336x280, 250x250, or the 468x60 banner sizes.

7. Choose your color palette according to your blog color scheme.

Tip: I find the best way to get the colors for my ads if I am not sure is to create an Adsense unit in Blogger and transfer that color scheme to the new ad unit in Google. Alternatively you can accept the default and change the color scheme later. Changing the color scheme won't affect your ad unit code for your template.

8. Accept the default font in the meantime unless you know the font that you need. You can always check this out later by reviewing your template

9. Click on the Continue button

10. Create an Ad Channel by clicking the link add a new channel. By default Google will add this to Your Selected Channels. Click on the Continue button

11. You may need to give your ad unit a more detailed name. I recommend keeping the dimensions of the ad unit in the name as it makes the unit easily identifiable. I usually add the name of the blog to the name because I have several blogs. Save and Get Ad Code by clicking on the Submit and Get Code button.

START HERE IF YOU HAVE A GOOGLE ADSENSE AD UNIT
12. Copy the Adsense code by right clicking the mouse while it is in the code box. Choose select all and then right click again and choose copy. Make sure you get all of the code

Google Adsense Code for ad unit
13. Open the Ad Converter by following this link at eblog Templates.
14. Paste the Google Adsense code into the converter and press the Convert Ad Code button. This will parse the code so that Blogger will read the Javascript properly. Leave this window open for now as we will be returning here. Note that pasting Google Adsense code in to your Blogger template that has not been parsed will produce errors

15. Login to Blogger if not already logged in

16. Navigate to Layout > Edit HTML

17. Back up your Template (recommended) by downloading it to your computer

18. Check the Expand Widgets Template checkbox

19. Bring up Blogger Search using CTRL + F. Copy and paste the following line of code into the text box to locate the block of code in your template beginning with this line:

<div class='post-footer'>

20. Return to the Ad Converter and copy the converted code by right clicking your mouse and choosing select all followed by right clicking again to copy it

21. Paste this code directly after <div class='post-footer'>


<p>
<!-- Start Google Ad-->
<!-- End Google Ad-->
</p>

22. Paste your Google Adsense ad code between <!-- Start Google Ad --> and <!-- End Google Ad -->

Add Google Adsense to Blogger Template to insert ad unit below post content

23. Click the Save Template button

24. Take a look at your extra Google Adsense ad unit in your blog by following the View Blog link. The ad unit will appear below the post content and above the credit lines in the post footer

Troubleshooting Your New Google Adsense Below the Post Content
  • Note only a placeholder will show up for about the first 10 minutes or so. If no placeholder appears go back and retrace your steps to make sure you haven't forgotten something. Check you have copied the code exactly.

  • If you need more white space above the ad unit add this html tag <p> before your Google Adsense code and this </p> after the last line of your Google Adsense code

  • Remember that if you have more than 3 Google Adsense ad units on a page Google will display a placeholer. If you have Google Adsense ad units in other parts of your blog you will find that only 3 Google Adsense ad units will display on one page at any one time according to Adsense rules. For this reason you may get a placeholder appearing where the ad unit would appear.

In this tutorial I have covered how to add a Google Adsense ad unit to a Blogger post below the content along with detailed instructions on how to create an Adsense ad unit at Google.

Related Articles
Bloggers Guide to Google Adsense Myths
Add Google Adsense to Blogger Header
Add Google Adsense or Banner Above Blogger Header
Better Placement of Google Adsense in Blogger
Blogger Guide to Google Adsense Placement
Google Adsense Tips for a Blogger Blog



Saturday, May 16, 2009

Guide to Blogger Blogspot FAQs

Guide to Blogger Blogspot FAQs. When you are looking for help with Blogger Blogspot you want to get that help as fast as possible that's why I have created a list of the most commonly asked questions by visitors to my blog. Use this post as a ready resource for all your frequently asked questions about blogging using the Blogger Blogspot blogging platform.

Banners and Advertising
Building Site Traffic
Common Blogger Problems Fixes
Customize Blogger
Gadgetize Blogger
Google Adsense
Monetize Blogger
Posting and Commenting
Publicize Blogger
Search Engine Optimisation
Social Media
Tracking Site Visitors


Banners and Advertising FAQ
Where can I post a banner on Blogger Blogspot?
It is possible to add an affiliate banner to Blogger in a number of places. You can add a banner to the Blogger, above the header, above the first post, within a post, below a post, in a sidebar, and in a footer.

How do I place an advertising banner in a Blogger header?
Add an Affiliate Banner to the Blogger Header

How do I place an advertising banner in a Blogger sidebar?
Add an Affiliate Banner to Blogger Sidebar

How do I place an advertising banner above the Blogger header?
Add Google Adsense or banner above the Blogger header


Build Site Traffic
How do I encourage more visitors to my blog?
Find 10 hot tips to help you get visitors to your Blogger Blogspot blog
10 Tips to Build Traffic to a Blogspot Blog

Why do I need to add my blog to blog directories?
It is not essential to add your Blogger blog to blog direcories but it is a good idea since they are a valuable link and a ready source of traffic for your blog and Submit a Blogger Blog to Blog Directories

What blog directories should I add my blog to?
There are many blog directories on the net and more springing up all the time. For some recommended blog directories check out this article:
Submit a Blogger Blog to Blog Directories


Common Blogger Problem Fixes
How do I remove the navbar from Blogger?
You can't actually remove the Blogger navbar but there is a trick to hide it.
Hide Remove Blogger Navbar

How do I reinstate a deleted Blogger navbar?
I am often asked how to fix a deleted Blogger navbar. Find the solution in:
Hide Remove Blogger Navbar

How do I fix the missing comments form below posts?
Many custom templates were created prior to Blogger embedding the comments form below posts. For details on how to upgrade your Blogger template to include an embedded comments form below posts on the single post page please refer to:
Add Missing Embedded Comments Form to Blogger

How do I fix the missing add a gadget in the layout screen?
If you can no longer see Add a Gadget in Layout > Page Elements then there is very likely a problem with your browser cache. Check out:
Missing Add a Gadget Solution in Blogger


Customize Blogger
How do I add categories to Blogger?
Blogger doesn't have categories only labels. If you want to add a categories section you can using a linked list but you will need to update it manually.
Add a Categories Section to Blogger

How do I add a list of recent posts to Blogger?
By making use of your blog's feed you can display the 5 most recent posts on your blog.
Add a Recent Posts Feed to Blogger

How do I display a list of recent comments on Blogger?
By making use of your blog's feed you can display the 5 most recent comments on your blog.
Add a Recent Comments Feed to Blogger


Gadgetize Blogger
How do I add a Live Traffic feed to my blogger Blogspot blog?
If you insert a free live traffic feed like Feedjit on your blog you will be able to watch visitors arrive at your blog in real time and gather information about where they came from, where they exited to, eearch engine keywords and keyword phrases used to access your blog.
Add Feedjit Live Traffic Feed to Blogger

How do I add a ratings widget to Blogger?
If you've seen star ratings on blogs you've visited lately and you would like to add one to your blog check out my article on the Outbrain ratings widget:
Add Outbrain Ratings Widget to Blogger

How do I add a bookmarking button to my blog?
Your visitors can share your posts with friends and add an online bookmark with an Add This Social Bookmarking button
Add a Social Bookmarking Button to Blogger

How can visitors subscribe to my blog?
You can encourage readers to sign up to regular updates of your blog by adding a subscribe button or link to your blog.
Add an Email Subscription Form and Links to Blogger Blogspot Blog


Google Adsense FAQ
Can I put Google Adsense on my Blogger Blogspot blog?
Yes you most certainly can. Unlike other online blogging platforms like Wordpress Blogger permits Blogger publishers to add Google Adsense to any Blogger blog. However be aware that spam blogs - that is blogs specifically set up to make money from Google Adsense are prohibited by Blogger.

How much money can I make from Google Adsense?
If your blog receives enough traffic (75+ visitors per day) you will be well placed to earn revenue from your Blogger Blogspot blog. Want to know more refer to:
Google Adsense Myths for Blogger Blogs

How Many Google Adsense Ad Units Can I Place on a Blogger Blog?
Google allows 3 content ads, 3 link ads and 2 search boxes on any given page. These rules are subject to change so if in doubt check Google Adsense FAQ.

How do I add Google Adsense to Blogger?
You will find many tips on the basics of adding Google Adsense to Blogger in this article:
Google Adsense Tips for Blogger

Where should I place Google Adsense on Blogger?
Better Placement of Google Adsense on Blogger
Blogger Guide to Google Adsense Placement


Monetize Blogger
How do I add a donate button?
Adding a Paypal donate button to a Blogger Blogspot blog will encourage satisfied visitors to say thanks.
Add a Paypal Donate Button to Blogger

How do I make money from my Blogger blog?
5 Easy Ways to Make Money from a Blogger blog


Posting and Commenting in Blogger
Why do the links to my post titles get shortened?
When you publish an article in Blogger a permalink gets created. If the title of your post is longer than about 35-40 characters Blogger shortens it. Check out this article for ideas on how to work around this issue
How to Create Search Engine Friendly Permalinks

How do I post date my posts?
Blogger allows publishers to post date their posts. Read the following article to find out more about how to set a future publishing date for a post
Choose Your Own Blogger Post Date

How do I date my posts with a date that has already passed?
Blogger will let you set a date for a post in the past, present or future. Find out more by reading the following article:
Choose Your Own Blogger Post Date


Publicize Blogger
Why is it important to burn my Blogger feed?
there are quite a few reasons reasons why it is a good idea to burn your Blogger Blogspot feed at Feedburner check out this article to find out more:
Blogger RSS Feeds and Feedburner

How do I burn my Blogger feed at Feedburner?
If you would like to burn your Blogger feed at Feedburner to build readership of your blog then this indepth article will show you how:
Burn Blogger RSS Feeds at Feedburner

How do I add a FeedFlare to a Blogger feed?
Not only will a Feedburner FeedFlare encourage your visitors to share your posts on various social media sites it will also copyright your material if you add this notice to the bottom of your posts. Learn more about Feedburner FeedFlares:
Add a Feedburner FeedFlare to a Blogger Feed


Search Engine Optimization
How do I get my Blogger Blogspot blog listed by major search engines?
If you wait for search engines to crawl your blog it may take a long time to appear in search engine results. You can speed up this process by submitting your blog and a sitemap to major search engines. Find out more:
Add Your Blog to Major Search Engines

How do I get listed by Yahoo?
For instructions on how to let Yahoo know about your blog and add a Blogger sitemap to Yahoo follow this guide:
Submit Your Blogspot Blog to Yahoo


Social Media
How do I add bookmarking button to my blog?
There are a number of ways to add social media to your blog. One easy way is add an all in one social bookmarking button by Add This.
Add a Social Bookmarking Button to Blogger

How do I add Twitter Links to Blogger?
How to Add a Twitter badge to Blogger
How to Add a Twitter Followers Counter to Blogger


Tracking Site Visitors
How do I know who is viewing my Blogger Blogspot blog?
There are a number of programs that can help you track visitors to your blog. One of the best, Google Analytics is provided free by Google. For more about Adding Google Analytics to a Blogger Blog

What gadget lets me watch visitors as they arrive?
If you want to see visitors arrive at your Blogger Blogspot blog you can put a free Feedjit live traffic feed widget on your Blogger sidebar.
Add Feedjit Live Traffic Feed to Blogger


Related Articles
List of Blog Know How Tutorials for Blogger Blogs



Wednesday, May 13, 2009

Add an Affiliate Banner to a Blogger Header

If your intention is to make money from your blog chances are you will want to add an affiliate marketing banner to your Blogger Blogspot header. Doubtless you have seen plenty of websites sporting advertising banners which are creating revenue for the author by way of banner clicks. With a small amount of tweaking to your Blogger template you too will be in a position to boost the revenue earning capacity of your Blogger blog.

Add a Banner to Blogger Header - Sand Dollar Header with Affiliate Banner Ad
Add an Affiliate Banner to Blogger Header
There are a variety of good places for a banner but the header of a blog is by far the most prominent area. Unfortunately Blogger does not have an easy facility for inserting an advertising banner into your Blogger header. To manage this issue you have two choices:

1. Use a custom template that comes banner ready. (There are a number of templates out there with this feature built-in)

2. Or customize your existing standard Blogger template.

This article focuses on choice 2 - how to go about manually editing your template to add an affiliate banner ad. By the end of this tutorial you will have the necessary knowledge and know how to insert a banner into the header of your Blogger blog. The level of difficulty for the additions I am proposing I have rated as easy to intermediate. You will be adding a snippet of code to your template plus pasting in the affiliate marketing banner code.

For the purposes of this example I will be using a 468x60 banner. I have tested this method of banner insertion on the following standard Blogger templates:

Herbert
Rounders
Denim
Thisaway
Son of Moto
Sand Dollar

It will also work on custom templates that don't already come with an advertising banner in the header built in.


How to Insert an Affliate Marketing Banner into a Blogger Blog

1. Login to Blogger.com and navigate to Layout > Edit HTML page of your blog

2. On the Edit HTML page you will see the option to back up your template by downloading it to your system. I strongly advise that you take this opportunity to backup as you are about to make a change to your template where if something goes wrong you may not be able to restore it.

3. Once you have backed up your template place a check in the Expand Widget Templates box

4. Search your template and locate the following lines of code within the header section of the template:(note you can search by using CTRL + F and entering <b:includable id='main'> into the search box

<b:includable id='main'>
<b:if cond='data:useImage'>

5. Now insert the following 2 lines of code directly below <b:includable id='main'> and before <b:if cond='data:useImage'>

<div class='ads'>
</div>

6. Place your merchant affiliate code between the lines of code you just inserted. You will need to copy the code from the affiliate program provider to your template. If you are yet to sign up for an advertising program such as Linkshare you will need to do so before you proceed. Alternatively you could use my banner code in the meantime to test this banner and later substitute it for your own.

<div class='ads'>PLACE YOUR BANNER CODE HERE
</div>

LinkShare_125x125ButtonV2

7. Review the code you have entered. If you have followed the steps above you will now have code that resembles this. (Your affiliate code will of course be different):

<b:includable id='main'>
<div class='ads'>

<a href='http://www.linkworth.com?a=23734' target='_blank'><img align='right' border='0' height='60' src='http://www.linkworth.com/adm/affiliate_manager/affiliate_banners/bann-36.gif' width='468'/></a>

</div>
<b:if cond='data:useImage'>

8. When you are sure you have correctly inserted the code into the template scroll up until you find this line in your template ]]></b:skin>

9. Immediately before this line add the following lines:


/* Header Banner
----------------------------------------------- */
#header .ads{width:480px; height:80px; float:right; padding:20px 0px 0px 0px}

10. Click on Save Template.

11. Click on View Blog to view your new banner.


Troubleshooting
  • If you need to change the alignment or padding around the banner to your own specifications you will need to change the CSS stylesheet code entered in Step 9
  • You can change the alignment of the banner by changing float:right; to float:left; if you would like your banner to left align.
  • If you change your template for another standard Blogger template you may need to re-enter the code in Step 9.

In this tutorial you have learned to how to insert a 468x60 affiliate marketing banner into the header of your Blogger Blogspot blog and will now be on your way to earning revenue from multiple income streams. Well done!!!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
5 Easy Ways to Make Money from Blogger
Make Money Add Banner Ads to Blogger
Add an Affiliate Banner to a Blogger Sidebar
Add Google Adsense or Banner Above Blogger Header



Saturday, May 9, 2009

5 Easy Ways to Make Money from Blogger

If you invest a lot of time and effort in your blog you probably want to monetize your Blogger Blogspot blog to reap some financial reward for all that hard work. In this article I explore 5 easy ways to make money from Blogger so that your blog will pay its way.

1. Advertising Programs

Google Adsense
Google Adsense is probably the best known advertising program available to Blogger webmasters since Google Adsense can easily be inserted into your blog with a couple of clicks. Google Adsense is a good choice if you are starting out and want to earn a bit of extra cash. Don't expect too much at first though or you may be very disappointed. In my experience you will probably only get about 1 click for every 200-300 impressions. Therefore you will need plenty of traffic to make Google Adsense work for you. See my tips on building site traffic if this is an area you would like to develop on your Blogger blog. For more about Google Adsense please refer to Blogger Guide to Google Adsense Myths and Blogger Guide to Google Adsense Placement

You can also add Google Adsense to your Blogger feeds giving you additional advertising opportunities. If you haven't burnt your blog's feed at Feedburner make it a priority. That way you can have Google advertising appearing in all your feeds. Please refer to my tutorials on How to Burn a Blogger feed at Feedburner and Blogger RSS Feeds and Feedburner for help on this subject.

Other Advertising Programs/Networks
There are plenty of other advertising programs to choose from if you decide against Google Adsense. Adbrite is worth considering if you are in the market for an alternative to Google Adsense. Another alternative worthy of consideration is Widget Bucks as they claim a higher CPM than Google Adsense. Linkworth offer a range of publisher choices to fit your blog and also have a generous referral program. Yet another possibility and one which I am using on my blog right now is to try out Chitika which allows you to insert ad units along with Google Adsense or Adbrite offerring even greater advertising opportunities for your Blogger blog.


Earn $$ with WidgetBucks!


Get Chitika Premium


2. Affiliate Marketing
Affiliate Programs are free. They provide banners you can place on your blog which when clicked on earn you revenue. Typically these programs either give you a percentage of the sale eg 5-10% or they pay a set commission per lead. Some of the largest affiliate programs are Commission Junction and LinkShare.com. Most have a referral program too whereby you can earn revenue by referring other publishers and advertisers. For example Linkshare pays $1.50 for every valid publisher (afffiliate sometimes called vendor) signup who generates a click-through to Linkshare within 30 days.

LinkShare_234x60

With so many good merchant programs to choose from it is easy to go a bit overboard on banner advertising. Be careful not to overuse banners as they can detract from the look and feel of your website.

3. Place a Donation Link or Button on Your Blog
Donations can bring in a few dollars depending on the generosity of your visitors and the quality of your blog. You may have seen that a number of Blogger bloggers have a donation link or button on their blog. These are equivalent to a tip jar on a counter. If a visitor particularly likes your blog or has benefited from your help in some way they may be only too happy to slip you a couple of bucks. Offerring a Paypal link on your blog is an easy and straightforward method for visitors to make a donation large or small. See my step by step Blogger tutorial on How to Add a Paypal Donate Button to Blogger

4. Sell E-Books or other Digital Media on Your Blog
One sure fired way to increase site traffic is to offer some digital product on your site that visitors are prepared to pay for. There are heaps of examples of Bloggers who have made a good return using this method such as Yaro Starak's Blog Mastermind, Rob Benwell's Blogging to the Bank 3.0 and Atomic Blogging by Alvin Phang.

Click here to watch The Conversion Blogging Video



5. Sell Advertising Space on Your Blog
If your blog is moderately successful in terms of the volume of traffic it receives you might consider selling advertising space to a company for its advertising campaign. The advertising slot can be leased on an ongoing basis or is good for a given number of impressions.

In this article I have discussed 5 easy ways to make Blogger blog pay its way. Do yourself a favor and start earning some revenue today.

Related Articles
Bloggers Guide to Google Adsense Myths
Google Adsense Tips for Blogger Blogs
Better Placement of Google Adsense in Blogger
Add Google Adsense to Blogger Header
Blogger Guide to Google Adsense Placement


Make Money Add Banners Ads to Blogger
Add an Affiliate Banner to Blogger Sidebar

List of Blog Know How Tutorials for Blogger Blogs



Tuesday, May 5, 2009

Blogger Guide to Google Adsense Placement

There are so many places to position Google Adsense in a Blogger Blogspot blog. This article covers the most common places to add Google Adsense ad units and linked units in a Blogger blog together with links to the various articles which explain in detail how to insert the Google Adsense ad unit into Blogger.

Included in this article about Google Adsense placement are articles that cover positioning in the header both above and below the title, in the sidebar, in the footer, between the posts, between the header and the first post, below the post title, in the middle of posts, between the end of an article but before the embedded comment form

Format of Google Adsense Ad Unit

Google Adsense Ad Units

728x90 Leaderboard
728x90 leaderboard under Blogger header
728x90 leaderboard above Blogger header

160x600 Vertical Wide Banner
160x600 vertical wide banner in sidebar or 120x600 or 120x200

336x280 Large Rectangle
336x280 below post title or 250x250 or 300x250


Google Adsense Linked Units

728x15 Linked Unit
728x15 linked unit in Blogger footer or 468x15
728x15 linked unit in Blogger header or 468x15
728x15 linked unit above Blogger header or 468x15


Placement of Google Adsense on Blogger

EASY - CHANGE SETTING ONLY

Add Google Adsense Between Posts in Blogger
Blogger has a setting which allows you to add Google Adsense between posts. Read more about how to Add Google Adsense Between Posts in Blogger


EASY - ADD WIDGET ONLY

Add Google Adsense to a Blogger Sidebar
It is extremely easy to add a Google Adsense ad unit to a Blogger sidebar using a HTML/Javascript gadget or widget. For instructions on adding an ad unit to the sidebar please refer to Add Google Adsense to Blogger Sidebar

Add Google Adsense to a Blogger Footer
It is not so popular to place Google Adsense ad units in a Blogger footer however with the increased use of footers as a place that contains valuable information it is becoming more common to place an ad in the footer particularly a linked unit. For instructions on how to place a Google Adsense 728x15 linked unit in the footer refer to Add Google Adsense to a Blogger Footer


EASY-INTERMEDIATE - MINOR CHANGE TO TEMPLATE CODE AND ADD WIDGET

Add Google Adsense or Banner Above Blogger Header
If you have occasion to display either Google Adsense or an affiliate banner above the Blogger header you can by adding a section to the Blogger template. You can add any kind of Google Adsense content or linked ad unit although I suggest that a 728x90 leaderboard would be ideal for this spot.

Add Google Adsense or Banner Above Blogger Header

How to Add Google Adsense or a banner above Blogger header

Add Google Adsense to Blogger Header
The header of a Blogger blog is a popular place to add Google Adsense particularly a linked unit. I have good success adding a linked unit below the blog title in the header of my blog.

Add Google Adsense Above the Title

Place Google Adsense Above the Title

Add Google Adsense Below the Title

Place Google Adsense Below the Title in Blogger

Add Google Adsense Between the Header and the First Post in Blogger
Some templates lend themselves well to having a full length banner below the header. The Minima template for example suits a 728x90 Google Adsense unit just below the header and before the first post. Instructions on how to Add Google Adsense Between the Header and the First Post in Blogger

Add Google Adsense Between the Header and the First Post in Blogger

INTERMEDIATE - INSERT GOOGLE ADSENSE CODE INTO TEMPLATE

Add Google Adsense to Body of Post
Positioning Google Adsense within the body of the post in Blogger is a bit more tricky as it requires adding the Google Adsense code to the template. Before adding the code it must be parsed so the Javascript can be read by Blogger

Add Google Adsense Below Post Title

Add Google Adsense Below Post Title

in this article I have pulled together a number of Google Adsense articles I have written in the past about adding Google Adsense to a Blogger Blogspot blog so that it will provide an easy reference for anyone wanting to find out about Google Adsense placing on Blogger.

Related Articles
Bloggers Guide to Google Adsense Myths
Google Adsense Tips for Blogger Blogs
Better Placement of Google Adsense in Blogger
Add Google Adsense to Blogger Header
Add Google Adsense or Banner Above Blogger Header
List of Blog Know How Tutorials for Blogger Blogs



Monday, May 4, 2009

Place Google Adsense Below Post Title in Blogger

I have had a lot of interest in my articles about placement of Google Adsense in a Blogger Blogspot blog. Today I continue the Google Adsense series with an article about how to place your Google Adsense ad unit below the post title in Blogger.

This ad placement requires pasting the Google Adsense code directly into your Blogger template. While not difficult I have rated the skill level as intermediate as it requires parsing (conversion of the Javascript into a format readable by Blogger) of the Google Adsense code first before pasting it into your template. For the benefit of newbies and beginner Bloggers I have broken down the steps to simplify the process and make it more manageable. What follows is a detailed step by step tutorial on how to place Google Adsense below the post title in a Blogger blog including how to create a Google Adsense ad unit if you don't already have one.

Google Adsense Placement Below Blogger Post Title
Steps to Place Google Adsense Below Blogger Post Title
Follow Steps 1-11 if you don't have a Google Adsense ad unit.

IF YOU ALREADY HAVE A GOOGLE ADSENSE UNIT SKIP TO #12

1. From the Blogger Dashboard click on the Google Adsense link at the bottom of the page

2. Proceed to Adsense Setup > Get Ads or sign up for Google Adsense if not already

3. Choose Adsense for Content from the Ad Setup screen

4. Choose Ad unit or Link unit from the Adsense for Content screen. In most cases you will want an ad unit.

5. Choose the Ad Type from the dropdown menu depending on your needs. I often select text only because I think they are better performers but you may have a different experience. Click on the Continue button

6. Choose the Ad Format. Most likely this will be between 336x280, 250x250, or the 468x60 banner sizes.

7. Choose your color palette according to your blog color scheme.

Tip: I find the best way to get the colors for my ads if I am not sure is to create an Adsense unit in Blogger and transfer that color scheme to the new ad unit in Google. Alternatively you can accept the default and change the color scheme later. Changing the color scheme won't affect your ad unit code for your template.

8. Accept the default font in the meantime unless you know the font that you need. You can always check this out later by reviewing your template

9. Click on the Continue button

10. Create an Ad Channel by clicking the link add a new channel. By default Google will add this to Your Selected Channels. Click on the Continue button

11. You may need to give your ad unit a more detailed name. I recommend keeping the dimensions of the ad unit in the name as it makes the unit easily identifiable. I usually add the name of the blog to the name because I have several blogs. Save and Get Ad Code by clicking on the Submit and Get Code button.

START HERE IF YOU HAVE A GOOGLE ADSENSE AD UNIT
12. Copy the Adsense code by right clicking the mouse while it is in the code box. Choose select all and then right click again and choose copy. Make sure you get all of the code

Google Adsense Code for ad unit
13. Open the Ad Converter by following this link to Centricle.

14. Paste the Google Adsense code into the converter and press the Convert Ad Code button. This will parse the code so that Blogger will read the Javascript properly. Leave this window open for now as we will be returning here. Note that pasting Google Adsense code in to your Blogger template that has not been parsed will produce errors

15. Login to Blogger if not already logged in

16. Navigate to Layout > Edit HTML

17. Back up your Template (recommended) by downloading it to your computer

18. Check the Expand Widgets Template checkbox

19. Bring up Blogger Search using CTRL + F. Copy and paste the following line of code into the text box to locate the block of code in your template beginning with this line:

<b:if cond='data:post.title'>

Code Block to Find
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a> <b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

20. Return to the Ad Converter and copy the converted code by right clicking your mouse and choosing select all followed by right clicking again to copy it

21. Paste this code directly after the above code block:


<p>
<!-- Start Google Ad-->
<!-- End Google Ad-->
</p>

22. Paste your Google Adsense ad code between <!-- Start Google Ad --> and <!-- End Google Ad -->

Add Google Adsense Code to Blogger Template to Make it Appear Below Post Title
23. Click the Save Template button

24. Take a look at your new Google Adsense ad unit in your blog by following the View Blog link.

Troubleshooting Your New Google Adsense Below the Post Title
  • Note only a placeholder will show up for about the first 10 minutes or so. If no placeholder appears go back and retrace your steps to make sure you haven't forgotten something. Check you have copied the code exactly.

  • If you need more white space between the ad unit and the start of the first line of your article add this html tag <p> before your Google Adsense code and this </p> after the last line of your Google Adsense code

  • If you have Google Adsense ad units in other parts of your blog you will find that only 3 Google Adsense ad units will display on one page at any one time according to Adsense rules. for this reason you may get a placeholder appearing for some of your earlier posts which appear further down the page. To counter this problem I suggest you set the number of posts on a page to 3 if you have no other ad units anywhere else and 2 if you have another unit some where else. Linked units are not included in this only ad units.

In this tutorial I have covered the steps involved in creating a new Google Adsense ad unit at Google Adsense. I have also provided a detailed walkthrough of the steps involved in adding a Google Adsense ad unit below the post title in a Blogger Blogspot blog. Let me know how you get on.

Related Articles
Bloggers Guide to Google Adsense Myths
Add Google Adsense to Blogger Header
Add Google Adsense or Banner Above Blogger Header
Better Placement of Google Adsense in Blogger
Google Adsense Tips for a Blogger Blog
Add a Banner or Google Adsense Above Blogger Header



Sunday, May 3, 2009

Add Outbrain Ratings Widget to Blogger

Outbrain provides a free and very stylish content recommendations and ratings widget which can be easily added to your Blogger Blogspot blog. In this tutorial I will discuss the benefits of Outbrain and also provide a step by step walkthrough of the process of adding an Outbrain widget to your Blogger blog and your Feedburner FeedFlare if you have burned your blog feed at Feedburner.

Outbrain Home Page
Benefits of Adding Outbrain to Your Blogger Blog
By adding an Outbrain content and ratings widget to your Blogger blog you will encourage visitors to record their reactions to a post they have just read. Along with features likes polls this is another good method of encouraging visitors to interact with your blog. Outbrain also makes it possible to display your most popular posts within the widget. In addition the Outbrain ratings widget may help drive more traffic to your blog when your visitors use the Recommended Posts feature which is embedded in the widget. By the same token it may also mean that the traffic doesn't stay long as visitors will be wooed away by recommended links so you will have to weigh up the benefits versus the costs for yourself. Outbrain also provides reports on widget activity

How to Add an Outbrain Ratings Widget to Blogger
1. Register at Outbrain. This is a simple sign up process that requires you to click on a confirmation email once you have requested sign up and filled out a simple form.

2. Once registered click on Get the Widget from the footer menu

3. Choose Blogger as your Blogging platform

4. Select the language of your widget if other than English which is the default

5. Click on Get the Widget button and Outbrain will automatically refer you to Blogger in a new window. Sign in to Blogger in the new browser window. Don't close the Outbrain window as we will be returning here.

Outbrain Get Widget page
6. Choose your blog from the drop down menu and click on the Add Widget button.

Add Outbrain Widget to Blogger
7. Navigate to Layout > Page Elements and reposition if necessary your new widget which will now be appearing in the sidebar of your blog. Save any changes you make.

8. Return to Outbrain in your open browser window and click on the click here link to verify your blog. You will receive a message verifying that you have claimed your blog

9. Click on the View Blog link in the menu tab section and view your new Outbrain widget in action.

Outbrain Ratings Widget as it appears at the bottom of a Blogger post


Note that once your readers start to rate your posts by clicking on them the stars will become yellow. 5 yellow stars is an excellent rating


Customizing Your Outbrain Ratings Widget
1. Return to the Outbrain window in your browser

2. Navigate to Manage Posts using the Sidebar Menu on the lefthand side

3. In the list of blogs you will see your blog listed. Click on the settings link

Outbrain Manage Blogs Screen
4. If you leave the default setting you will see recommended links appearing as pictured above in #9. If you don't want any recommendations you can set this to no.

5. If you have set up your blog with the idea of earning a little extra money you may choose to turn off sponsored recommendations. If you leave the radio button set to yes any proceeds from the sponsored links clicked on will go to charity. The charity sponsored can be selected via the drop down menu

6. Outbrain will show the most popular posts in the sidebar of your blog if this feature is enabled. To enable popular posts select the enable radio button.

7. Click on the Submit button


Adding Outbrain to Your Feedburner FeedFlare
If you already have a FeedFlare appearing at the footer of your burned Feedburner feed of your blog you can easily add Outbrain too. Check out my article on adding a Feedburner FeedFlare to Blogger if you are not sure what a FeedFlare is or how to add one to Blogger.

Go to Feedburner and choose your blog from the list of My Feeds. Select the Optimize tab and then FeedFlare from the lefthand sidebar menu. In the Personal FeedFlare section paste the following code (URL) into the text box:
http://widgets.outbrain.com/FeedFlareUnit.xml

and click on the Add New Flare button. Click on Save. Your readers will now be able to rate your blog straight from your Blogger feed.

Outbrain Troubleshooting Tips for Blogger Installation
  • When you install Outbrain on your blog resist the temptation to rate one of your posts as this vote can't be deleted once it is cast. Even when I tried uninstalling and reinstalling the widget the vote did not clear.

  • The Popular Posts feature takes a while to show any posts as it needs at least 2 visits before it will start rating the post

  • If you have other problems with Outbrain try this active Outbrain support forum for answers

In this tutorial you have learned how to install the Outbrain Ratings widget on your Blogger Blogspot blog and customize it. Also some of the benefits of the Outbrain widget were discussed along with a couple of Outbrain installation troubleshooting tips. If you have a moment let me know how you get on installing this widget. Don't forget to bookmark this post for easy reference.

Related Articles
Add a Feedburner FeedFlare to Blogger Feed