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



Subscribe to Blog Know How by Email

42 comments:

tsport100 said...

BTW your pages crash in IE 6 & 8

The Wizz said...

Hi tsport100. Not sure what you mean but thanks for info. Do you mean my site pages aren't working properly on IE6 and IE8? I have tested them on IE6 and IE7 but not IE8 and they work OK this end. So it would be good to get some clarification. Or do you mean you had trouble with this tweak using IE6 & 8. I have tested in IE6 works fine. Are you on broadband or dial up by the way? Any problems with this tweak make sure your adsense code is immediately above div class='post-header-line-1'

Ravi Shanker said...

Thanks a lote... :)

Ramesh said...

no dude it is not working ....

The Wizz said...

Thanks Ravi. Enjoy!

The Wizz said...

Ramesh what exactly is the problem?

Special gift said...

Can i have more than 3 ad units (336X280) in my blog

The Wizz said...

Special Gift the current rules are: 3 content units (so no more than 3x 336x280), 3 linked units and 2 search boxes. If you want more advertising units on your blog consider Chitika which can be used as well as Google Adsense. For more on advertising programs

Mehedi said...

nice information help me a lot

The Wizz said...

Hi Mehedi. Great to hear this tweak to Google Adsense is working for you.

Marty said...

It worked for me and is totally awesome!

The Wizz said...

Great Marty. Placing Adsense in this position might boost your Adsense earnings too. I'd love to hear about if this happens.

Marty said...

It definitely boosted my click through rate but the earnings are still horrible, overall.

I don't think that adsense will ever be a good source of revenue considering what my blog is about though...

It annoys me because, despite being very young, my blog is already getting pretty good traffic but I can't find any way to monetize it.

birdy said...

I know it is good place for ads. But does it ok to put the ads below title? Is it not against google term of service?

The Wizz said...

Marty I don't think anyone can rely on Adsense alone as their sole income stream from their blog. You might want to try some affiliate programs to boost your earnings. For maximum earnings with Blogger take a look at this post Get More Google Adsense Clicks on Blogger Blogspot Blog

The Wizz said...

Birdy my understanding is that ads can be placed anywhere on a blog except if ads in some way give the impression that the ads are not ads. I have not really been able to get a definitive answer on whether Google see this placement as a problem despite checking the Google Adsense forums for help.

I suggest you do you own research because I have had conflicting answers. Try Google Adsense Policies for more on this. Also try Google Adsense forum which is pretty active.

Rafay Baloch said...

My ads are not displayin today though it were displaying yesterday
http://rafayhackingarticles.blogspot.com

The Wizz said...

Hi Rafay. Seems like you have two blogs now. Good on you! If you mean rafayhackingarticles then I have just checked and Adsense ads are showing up ok. On darkhackingandcracking no ads but no content either. Is it a test blog?

David Icke Fan said...

it did not work for me I restored my previous template...
http://ickefan.blogspot.com

The Wizz said...

Dvid Icke Fan not sure why it didn't work for you. If you need help leave your email or join my email subscribers and I will be in touch

Anonymous said...

using ad converter is like cheating by with their ad host id

The Wizz said...

Converting your ad with a converter is just a way to parse the code so that it can be read. Centricle is a reputable site and converts the code only. Your ad host id stays intact. It is not converted to anyone elses. But hey thanks for pointing out that going to some places to have the code parsed is risky as it is an opportunity for unscrupulous people to capitalize at your expense.

Anonymous said...

Hello there,

I had a question regarding getting my blog affiliated with the Google adsense program. Do I have to have a .com site (and get it approved by Google adsense) first in order to get my blog approved by Google adsense?

The Wizz said...

Hi Anonymous. You can join Google Adsense without having a dot.com address. All you need is to have a Blogger blog whether it be a subdomain ie .blogspot.com or your own domain name .com. Hope this helps you

Deepika said...

Thanks!! got it at one go.

riyan said...

great post.i want to implement this on my blog.

psd to wordpress said...

How many ad units i can add. Nice information, thanks for sharing.

The Wizz said...

psd to wordpress you can have 3 content units and, 3 linked units plus 2 search boxes. There is alway Chitika if you need more

Maximits Blogspot said...

This is very cool,, thanks! :)

vibiz said...

Finally i found this wht i'm looking 4, thanks s much!

Appy said...

==" hey frend i click on monetize and it says adsense will review the application in 1 or 2 days and then my adsense account will be approved but the application always fail lol it always say ur application is rejected why da hell is that @@ im confused tellme the dolution if u can help

Movie Posters said...

parsing the adsense codes are against google TOS?

The Wizz said...

Appy after reviewing your blog I think the most likely explanation is that you only have one post. Add some more posts and then reapply. Google Adsense needs to know what your blog is about so they can put relevant ads on your blog.

The Wizz said...

Movie Posters I understand your concern and desire to not contravene Adsense TOS. I myself have never found a definitive answer on this question. However, my understanding is that parsing the code in the way suggested here is legal as what gets displayed to the visitor is the same as Google intended. The parsing of Adsense code here just makes it possible to be properly interpreted. Try Google Adsense help if you still have concerns. Also refer to Parsing Adsense code thread

The Wizz said...

Appy you will find instructions on how to add Chitika ads to Blogger in this article

Appy said...

thx for ur assistance

Khaled said...

thank you very much, your topics are very useful

best regards

you can visit my blog anytime

http://translateforfree.blogspot.com/

Ruby said...

Very helpful. Thanks!

Anonymous said...

Nice topic your topic is very use full http://goo.gl/6Brcb

Kaleem Ullah said...

Very helpful and useful thank u so much
cars

funnsms said...

Thank you very much :) Its worked for me :) i do visit this site....it has so many valuable information.

Anonymous said...

Wow! thank you so much, just learned how to parsed the adsense script and put it directly to html site. Thanks, it's working...Rome

Post a Comment