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

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.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogspot Blogger Guide to Google Adsense Placement
Google Adsense Tips for Blogger Blog
Add an Affiliate Banner to the Blogger Sidebar
Better Placement of Google Adsense on a Blogger Blog
Add Google Adsense or Banner Above Blogger Header
Place Google Adsense Below Post Title in Blogger
Add Google Adsense Below Blogger Post Content
5 Easy Ways to Make Money from Blogger
Bloggers Guide to Google Adsense Myths

Make Money Add Banners Ads to Blogger

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

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

Related Articles
Add Banner Ads to Blogger Sidebar
Add an Affiliate Banner to Blogger Header
List of Blog Know How Blogger Blogspot Tutorials

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.


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 Junction and 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 to copy 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


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?

Related Articles
Make Money Add Banner Ads to Blogger
How to Add an Affiliate Banner Below a Blogger Post
How to Add an Affiliate Banner to the Blogger Header
Add Google Adsense or Banner Above Blogger Header
List of Blog Know How Blogger Tutorials

Add Feedjit Live Traffic Feed to Blogger

Would you like to know more about the traffic visiting your Blogger blog (Blogspot Blog)? Feedjit is a free tracking tool that tracks visitors to a blog in real time and identifies what pages are visited. In this Blogger tutorial you will learn how to add a Feedjit widget to your blog which will track where visitors originate from and what pages they viewed. Adding a Feedjit widget to your Blogger blog is easy and takes less than 5 minutes. This tutorial is suitable for all Blogger bloggers (Blogspot beginners). Updated 10 October 2009.

Feedjit monitors traffic to your site and ranks it based on popularity and relevance against the traffic received by other Feedjit users in your local area. There is a choice of 4 different widgets: Live Traffic Feed, Live Traffic Map, Recommended Reading, and Page Popularity. Each of these widgets has different functions.

Feedjit Live Traffic Feed Widget for Blogger
Places a widget on your Blogger blog of the last 10 visitors. By clicking on the real time link you can actually view the last 50 or so visitors along with the keyword search phrase used to find your site. The Feedjit's Live Traffic Feed shows statistics in real-time about:

The city and country your visitors are in

The website they arrived from, if any

The page they visited on your website

Which external link they clicked to leave your site, if any

Feedjit Traffic Map
The Traffic Map widget places visitors to your site on a world map according to their physical location

Feedjit Recommended Reading
The Recommended Reading widget makes suggestions to visitors about what other blog posts they might be interested in based on general page popularity

Feedjit Page Popularity
The Page Popularity widget lists the 10 most popular pages that have been accessed by visitors on that day.


How to Add a Feedjit Live Traffic Feed Widget (Gadget) to Blogger

1. Visit Feedjit
   
   
2. Select Live Traffic Feed.
   
   
3. Click on the Customize It link under Live Traffic Feed. This will allow you to enter colors to match the theme of your blog. If you are in doubt I have found that the easiest method to get the custom colors of a site is to go to the Layout > Page Elements screen in Blogger and click on Add a Gadget and then Adsense. From the configuration screen that pops up you can get the colors of the background, border, title (heading in Feedjit), URL, text. If you use these same colors in your Feedjit widget it will blend in with the rest of your site. You can preview your widget to make sure it looks as you would like it before adding it to your blog.
   
   
4. To automatically add the widget to Blogger select the Click to Add to Blogger Link and follow the instructions. Or to manually add it which I myself prefer right click the code in the box under the heading Live Traffic Feed and select copy.
   
   
5. Navigate to Layout > Page Elements in your blog if that page is not already open
   
   
6. Select Add a Gadget in the Sidebar and then HTML/Javascript
   
   
7. Paste the code by placing the mouse in the box and right clicking and selecting paste
   
   
8. Save the widget and then using the drag and drop feature of Blogger move it to your desired location. Note HTML/Javascript widgets are best placed after your other widgets for faster loading.
   
   
9. Save Template
   
   
10. Click on View Blog to view your newly created Feedjit widget
    
    
11. Click on Options in the Feedjit widget and then Ignore My Browser otherwise the widget will record your visit each time you view your blog. The option on the widget will now change to Stop Ignoring Me which you can reverse by clicking on the link again.If you use more than one browser you will need to tell Feedjit to ignore you for each browser.

This Blogger tutorial has discussed how to add a Feedjit Live Traffic Feed widget, gadget or button to Blogger to track where visitors are being directed from and what posts they are most interested in. A Feedjit Live Traffic Feed will help you learn about the visitors to your blog and what search phrase they used to arrive. To add a Feedjit Live Traffic Feed widget to Blogger is simple and takes less than 5 minutes to install.

Related Articles
Add Google Analytics to Your Blogger Blog
Track Visitors to Your Blogger Blog
List of Blog Know How Tutorials for Blogger Blogs
Guide to Blogger Frequently Asked Questions

Avoid 6 Common Blogger Mistakes

If you want your Blogger blog to sizzle and really take off there are some pretty important blogging pitfalls that you need to avoid. In today's article I will be talking about 6 of the most common mistakes new bloggers make on their Blogger Blogspot blog and how to avoid them.

1. Avoid Poor Content
I can't emphasize enough that the standard of your content will make or break your blog. Poor content = few return visitors. Good content on the other hand will attract visitors and keep them coming back to check out what's new.

Successful bloggers write clearly, know their subject and develop their own unique voice. A conversational style is often recommended but I suggest just write naturally and that naturalness will shine through.

Post quality well researched content that is interesting and topical. To do this you need to know your audience. Who are your readers? Do you know? If you don't know your target audience it will be hard to put yourself in their shoes which is exactly what you need to be able to do when you sit down to write a post. Ask yourself what are my readers looking for that would make them visit my site and read my post. Are they looking to be entertained, informed or a bit of both? Sign up for visitor tracking such as Google Analytics if you aren't already so you can get an idea of your visitor base. For help with implementing Google Analytics please read my post on adding Google Analytics to your Blogger blog.

2. Avoid Hopeless Headlines
I've seen some pretty hopeless headlines that don't give me enough of a clue about what a post is about to entice me into reading the article. If you want to attract readers to your site you need to grab them. That means putting some thought into crafting headlines that have punch. Remember your headline needs to reel your visitors in so make sure it is well thought out and punchy. Your headlines have to stand out to be noticed as so many people read headlines in RSS feeds.

Another important consideration when deciding on a headline is SEO. Consider what your readers might search under to find your post. "Blogging pitfalls" and "common blogging mistakes" are more likely keyword search phrases than "bad blogging practices." So knowing your keywords will help you craft headlines that are keyword rich.

3. Avoid Posting Too Infrequently
Once a visitor has found your site you want them to keep coming back. One way to ensure repeat traffic is to post frquently. Many new bloggers start a blog but find it hard to maintain a posting routine that is frequent enough to retain traffic.

Just the other day I had someone comment that one of the reasons why they liked my blog was the frequency at which I post. I try to post a new article every second or third day if possible. I usually am working on lots of other articles in the background so that I might have two nearly finished and half a dozen or so at various stages of completion. Using this system I have some flexibility and a cushion if anything comes up to interrupt my posting schedule.

Whatever you do don't make the mistake of posting just for the sake of posting otherwise your readers will see through this and you will lose readership.

4. Lack of Overall Focus - Trying to Paint the Whole Wall
So many new bloggers start their site without a clear focus. What kind of focus you may ask? Well making money is not enough of a focus. I am talking about identifying your niche and sticking to it. If you try and paint the whole wall your visitors will be confused about what your blog is about and you will very likely lose traffic rather than gain it.

Having a focus is important. On Blog Know How for instance, I concentrate on helping webmasters of Blogger blogs get the most out of their blog. I particularly aim my site at the new blogger and provide detailed step by step walkthroughs with them in mind. At the same time, however, I cater for all Blogger webmasters who access my blog. What I don't do though is go outside the theme of Blogger by writing about blogging in general. Instead I write articles that may be general in nature but are tailored to Blogger webmasters.

Yes I could get more traffic perhaps if I widened the scope of my articles to include Wordpress or blogging in general put what would then make my blog stand out from a whole heap of other blogs giving advice on blogging? Having a niche earns me traffic that is focused. Site visitors come with the goal of becoming more informed about using Blogger. If they go away having learnt more than when they arrived my site will have done its job and I may have just found myself a repeat visitor.

5. Avoid Too Much Advertising on Your Blog
New blogs need to build traffic and too much advertising can be a big deterrent in
achieving this goal. When your site is very new it doesn't pay to have too much advertising at all. Err on the side of less advertising rather than more. Bear in mind of course that Rome wasn't built in a day and your site won't be either. Have faith that your traffic will build and you can gradually introduce more advertising like Google Adsense as visitor numbers increase.

6. Avoid Too Many Social Bookmarking Buttons
Too many social bookmarking buttons can clutter up your blog and slow it down. Many people still don't know too much about social bookmarking so avoid the temptation to overuse these icons. Rather than use a whole bunch of popular icons like Digg and Technorati which can lead to a cluttered look and feel I use a single consolidated button like Add This. Share This is another popular button for sharing your posts.

To install a social bookmarking button on your Blogger blog follow the step by step instructions contained in my article on Add This

This article has discussed 6 common mistakes new bloggers make when developing a new Blogger Blogspot blog and given suggestions on how to avoid them.as visitor numbers increase.

Hide Remove Navbar from a Blogger Blog

The more professional you want your site to look the more you are likely to want to remove the navbar from showing above the header of your Blogger Blogspot blog. Removing or actually hiding the navbar is very easy to do as it only requires a small tweak to your template. This tutorial is suitable for bloggers at all levels but is written with new bloggers and the beginner blogger in mind and provides step by step instructions to guide you through the process of hiding the navbar from your Blogger blog.

How Useful is the Navbar of a Blogger Blog?
Blogger provides the facility to search your blog by entering keywords or a search phrase into the Search Blog box. This is a useful feature and if you remove the Blogger navbar you will lose the search facility from your blog. If you are using a custom template with a search box already built in this won't be a problem but if you are using one of the Blogger templates deleting the navbar will leave your blog without a search function. Another useful feature of the navbar is the follow button which encourages bloggers to start following your blog.

The random blog feature is not particularly useful unless you have a lot of time on your hands and just feel like a browse. For most serious bloggers looking to create a professional look and feel to their blog the navbar can be a distraction. And let's face it you've worked hard enough getting the traffic to your site right? without encouraging them to leave it too quickly.


The other main feature of the navbar is the ability to navigate back to your layout menu or posts quickly no matter where you are in your blog when signed in. Personally I like this feature and use it a lot. Its particularly good if you are on a page other than your homepage and want to quickly go to another of your blogs as you can get there in 2 clicks. The same goes if you want to visit some other area of your Google account such as Google Analytics or Google Webmaster Tools. You can get there in 2 clicks too when the navbar is enabled.

UPDATE October 10, 2009: Blogger have now created another reason to think twice before you remove the Blogger Navbar as they have recently added a Share button so that readers can quickly add your blog to their Twitter, Facebook and Google Reader accounts. The facility to Email your posts is also available when using the Blogger Share button from an individual post page.

To navigate with the navbar disabled you simply have to double click the back button in your browser to navigate away from the home page of your blog. If you are in another part of your blog then it can be annoying not to have the navbar functionality. The way I have gotten around it is to usually disable the navbar and click on blogger.com in the google search box on the toolbar of my browser. Provided I am signed in to Blogger this will take me straight to the dashboard.

Overall my view is that what you lose on convenience you gain on professionalism. Losing the navbar is a sacrifice but it is a small price to pay for a much improved look to your blog.


How to Get Rid of the Navbar on your Blogger Blog

1. Login to Blogger and navigate to Layout > Edit HTML

2. Find the Template Credit Section

3. Insert the following code directly below the template credit section. Select the code and right click to copy to the clipboard of your computer. Right click to paste into your template:

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

4. Click on the Save Template button

5. Click on View Blog to view you blog without the navbar



Troubleshooting
If you later decide that you are not happy with the missing navbar all you need do to reinstate it is to remove the code you inserted. This works as the code you inserted actually only masks the navbar rather than deletes it.

In this tutorial you have learned about some of the advantages and disadvantages of the Blogger navbar and how to hide, disable, remove or delete the navbar in order to promote a more professional looking blog.

Related Articles
List of Blog Know How Blogger Tutorials

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.



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



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.



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.

Related Posts
Google Adsense Tips for Blogger Blogs
Blogger Guide to Google Adsense Placement