Monday, December 11, 2006

Adsense Code In Blogger Beta Template

In the early day of Blogger Beta, implementing Google Adsense code in Beta Blogger template has never been an easy job.

In the classic Blogger template, one can easily placing Google Adsense code at the top of post body, or in fact everywhere, by directly editing the HTML code of Blogger template. However, it is not that straight forward to deal with HTML code of Beta Blogger template.

Here are some tips on putting Google Adsense code in Beta Blogger template.

  • Using Adsense-aware widget is the easiest way to implement Google Adsense code in Beta Blogger template. The setup is simple as the instructions are easy and straightforward to follow.

    Once the Adsense-aware widget created completely, drag the Adsense-widget around, to everywhere that the Google Adsense is expected to be displayed.
    Note, clicking on the Add A Page Element link in Beta Blogger template page, will bring up a list of various widgets that are supported by Beta Blogger. The Adsense-widget at sidebar has only a limited set of Google Adsense templates that are fit with the size of sidebar.

    If it is expected to have Google Adsense display at the top of Beta Blogger post body, use the widget on footer instead. As usual, once the Adsense-widget is created, drag the Adsense-widget from footer to the top or bottom of the Beta Blogger post body!
    While this attempt is easier, the Google Adsense is exactly display at the top of date and title of the Beta Blogger post body!

    In addition, the Google Adsense will be shown in main page. Isn't it nice to have Google Adsense display only in individual Beta Blogger post content page? See next handy tip...

  • To get Google Adsense display in between Beta Blogger post title and Beta Blogger post body, and only showing Google Adsense while the Beta Blogger content page is in focus, one has to directly deal with HTML code of Beta Blogger template.

    While in the Beta Blogger template page, click on Edit HTML tab and tick the checkbox of Expand Widget Templates. Look for these lines of Beta Blogger template HTML code

    <div class='post-body' expr:id='"post-" + data:post.id'>
       <b:if cond='data:blog.pageType == "item"'>
          <data:post.body/>


    and place the Google Adsense code before and after the <data:post.body/> line of HTML code.


    Correction:

    1) Search for the line <p><data:post.body/></p>

    2) Next, add these lines of code (in bold) accordingly

    <b:if cond='data:blog.pageType == "item"'>
          Place Your Google Adsense Code here
          <p><data:post.body/></p>
          Place Your Google Adsense Code here
    <b:else/>
          <p><data:post.body/></p>
    </b:if>

    3) save it.

    I've made a correction in comment of this post. But it seems to me that not many readers are patient to vet the comments, so I make the correction in post.
    Update

    I think you might be interest on questions (which I do) such as how to dynamically placing Google Adsense in the middle of post content. Or more advanced technique, such as placing different Google Adsense template / size in different posts of length. For example

    1) a rather short article should has Google Adsense displayed at the top of post before the post title

    2) a rather lengthy post should has Google Adsense displayed at the top, middle, and bottom of post

    3) some other posts might have the Google Adsense wrapped inside the post body, using <div style="float: right;">, as shown in Wrap Adsense code in New Blogger template.

    Essentially, it seems that each post is displaying Adsense at "different" position within the post body, to enhance reading experience. Isn't it nice to wrap a smaller Adsense format in a short post, rather than displaying two Large Rectangle (336 x 280) Adsense format at the top and bottom of post?

    However, I couldn't make all my wishes to happen in New Blogger template. I try to make it happen with Javascripts document.write() function that I've tried (and failed) in Adsense Revenue Sharing In New Blogger, digging into web directories, forums, Google Search, etc, for days and nights, but all to no available.

    For most of the blog maintenance tips and tricks that I've found, looks like Wordpress powered blogs are more promising. For example, Wordpress vs New Blogger outlines the differences between New Blogger and Wordpress, the reasons of switching from New Blogger to Wordpress 2.1, using "trigger text" and Wordpress PHP code to dynamically display Adsense inside Wordpress post body at different position, available hundreds of amazing Wordpress templates and Wordpress plugins to enhance the feels and functionality, etc.
    However, the Beta Blogger will either not able to save the changes made, or the Google Adsense will not display correctly.

    Some of the great bloggers have found that by removing <!-- and //--> from the original Google Adsense code will solve the problem of displaying Google Adsense in Beta Blogger.

    While this is really works, but it is against the Google Adsense TOS. Try it with risk, or see the next handy tip...

  • Don't be surprised, that Beta Blogger will automatically tweaking Google Adsense code when the changes made are saved.

    This shouldn't affect Google Adsense TOS, as Beta Blogger (Blogspot or Blogger) is owned by Google Inc (NASDAQ:GOOG) as well.

    As noticed, Beta Blogger automatically replace the " character with &quot; HTML code representation. The Adsense code looks exactly the same, as you could check in the page source of New Blogger post page. The original Adsense code kept intact, except that some pure HTML code is used to represent the " characters.

    I found that the >> characters used in BloggerDigest template are also replaced with pure HTML code representation.

    Aha! Instead of tampering the Google Adsense code and against the TOS, why don't use the same trick did by Beta Blogger?

    Guess what? Just replace the <!-- and //--> as &lt;!-- and //--&gt; will do.

    While you browse the post page, take a look of the page source code. You should see that the Google Adsense code looks exactly the same as it's originally generated from your Adsense Account!
    For IE 7:
    Right-click on post page and select View Source

    For Firefox 2.x
    Right-click on post page and select View Page Source

    Note, it's more comfortable to read page source in Firefox 2.x. Get a copy of Firefox 2.x and experience it now! Firefox 2.x is no doubt a good alternative web browser to IE 7. After all, IE 7 is only made available to Windows XP and above, especially Windows Vista.
    Update
    It's totally legal to do so, as confirmed by Google Adsense team, provided the original Adsense source code keeping intact as it's generated, when it's viewed in page source.


Related information:

This article has 52 comments.

Ramani said...

Good find. Didn't strike me before. I will write about this and link to you in my next post.

Blogger Digest said...

Thanks, Ramani. After applying much of your tricks, it my my pleasure to share it with you. You are great man!

LOUI$$ said...

Thanks,but this still make some adjustment at the code.Instead of of removing the code, it better edit the code to the same types.Thanks man!

Enviroman said...

Thanks for commenting on my post Blogger Beta: Adding advertisements, hit counters, etc.. I have responded to your comment. But your hack seem to have the same effect as what I have described in this post:
Blogger Beta: How to add Adsense or permanant "sticky post" at the top of the main content?

blogger digest said...

Hi Peter, thanks for the recomendation. A link to your tips have been added in the latest post of Add A Page Element in the Beta Blogger post template.

bonniecool said...

Is this not against adsense TOS? We are changing characters of a code.

Blogger Digesst said...

Good day, bonniecool. as long as there is no changes in Google Adsense code, only a pure html code is used to represent the the special characters.

I have get inform adsense team on my finding, and confirm it is not against to TOS, as long as the orginal adsense code kept intact.

Alex said...

blogger digest, thanks for tip!

Enviroman, you solution did't work for me.

diditho said...

thankyou,
it works for me

kunshou said...

Thanks for tip!

Raj said...

Its Working on mu site.

Thanks.

Dog advicer said...

Excellent article! Topical and well researched, this has everything a blogger could want- and if it hasn't it will find it for you! I am 'beyond' impressed! Top work!!.
Lovebirds Care

Anonymous said...

Hello,

I am new to blogging and XML. I tried using the DownRight your template at http://thrbrtemplates.blogspot.com/ . I want to add google adsense code at the beginning and the end of the post, but its just not working.

I tried the following -
1> Edited the blog widget to make it allow adding page element.
2> Expanded template widgets, and
(a) tried adding after div class='post-header-line-1
(b) data:blog.pageType == "item"
(c) data:post.body
None of it worked.

Is there some way to make it work? Any pointers you can give is much appreciated.

- New2Blogger

bloggerdigest said...

Good day,

I believe you've posting duplicate comments, and I think I've reply to your questions at Wrap Adsense In Beta Blogger Post

Rakesh Kumar said...

Hi Blogger Digest,
Thanks for sharing the great adsense tip. I have applied that to my blog. it works but my problem is - i am using new blogger template and already have a adsense ad unit in the right sidebar. so when i tried to put adsense add unit in my post, it appears 3 times on the homepage and sidebar ad unit disappears. Probably it is being filtered by google because we are not allowed to show more than 3 ad unit on one page. What is want is - on the homepage, there shouldn't be any ad displayed with post. but when somebody clicks on the particular post, ad should appear with post. The same like you have. Please help me. Thanks in advance. Waiting to hear from you soon.

bloggerdigest said...

Good day Kumar,

Please refer to my comment at Wrap Adsense In Beta Blogger Post, which is located near to the bottom-side of page and highlighted in red color.

Hope that you'll get it done.

VaTsAl said...

hi my name is vatsal

http://techmaestros.blogspot.com

i am using the new blogger or blogger beta

i am unable to place the adsense after the post title

as the code that u have mentioned isnt there

plz help

vatsalcss@gmail.com

vhanded said...

Thanks for your tips, now I successfully add my Adsense code into my blog without any error, thanks! I will write a post and link it to your blog. Really thank you!

ujval said...

where I paste my google search code.I want google search at the center of my blog or at blog title.
Please guide where I paste my google seach code.

thank you
http://vista-tip.blogspot.com

bloggerdigest said...

Good day ujval,

The most effective way to add adsense search in New Blogger is to use the HTML/JavaScript widget.
Suppose that you want to add it right after blog header, then click the Add Page Element link in the footer, choose the HTML/JavaScript widget, add the adsense search code, then drag the created widget (that contains your adsense search) to the header position.
Note, I think the new adsense search code has been updated by adsense team, and the New Blogger could not saved the template if you paste the code directly into the html code of the template.

TriniMan said...

Hey brother. Thanks for all the hard work. You coders never cease to amaze me. I'm using the new Blogger with the rounders 3 column template. I cannot seem to control my ads. I would like to do a similar thing to you where:

1) show only post summaries on the main page with the "read more" option.

2)Have an ad in the top , middle and side of my post and also a link unit in the bottom.

Any help you could give me would be great!

http://easyhdtv.blogspot.com


Thanks a lot!

bloggerdigest said...

Good day TriniMan.

1) This summary of post hack can be refer to Ramini's HackOSphere.blogspot.com

2) I've visited to your site, and found that u've got it done.

P/S: You've great looking template and features added too.

Bob said...

Great tip, thanks for the help. I have used it on my site and it worked great.

http://strategiesforlife.blogspot.com

allan said...

I tried your hack to my blog but it no work.
I expand the widget,i saw the place
but that also where I post the hack for summarized post or for read more

Thanx a lot
www.successyour.blogspot.com
allan

Anonymous said...

Hi,

Been reading up your posts. I'm trying to implement the code, but what actually happened is yes, the adsense do appear, but not in the form I chose Large Rectangle(336 X 280) but instead the adsense appear is Skyscraper (120 X 600).

I wonder why?

my blog is at http://malaysiangraduates.blogspot.com/

Appreciate if you could help.

Is is because of the ...div style='float: right;'>...

bloggerdigest said...

I suppose you expect to wrap the adsense code rather than appendding at head/tail of post.

Whichever, your page source seems to me that you're copying exactly my code template (guide):

<div style="float: right;">Paste the Google Adsense code here</div>

That's why you see this statement

"Paste the Google Adsense code here"

on each of your post. You should have replace this statement as it say, with your Adsense code.

Anonymous said...

Why don't you learn some English and post something that works. Your shit doesn't work. You are just here to make a quick buck aren't you.

bloggerdigest said...

You're really rude and you don't know single thing about html. but yet dare to speak it out!

Dare you tell reply here with your blog url and speal explicit why my steps are not working?

puterisaiya@yahoo.com said...

good tips for adsense publisher
hey i got video from joel comm who makes thousand dollar with adsense. Joel comm video

Sunil Kumar said...

hey i m not able to add google ads inside or in between the blog post through this :(

http://goodtoknowit.blogspot.com

Starving Artist said...

Hey bloggerdigest!
Sorry that Anonymous was such a jerk last May! I think his problem may have been legit, however, and may have been due to his template, because I'm using the same template, and I have the same problem he originally described. I've launched a trial page to show you the issue, at http://indebted2you-beta-tester.blogspot.com

It keeps using the giant ad format, where my code is obviously for the 200x200 box.

I guess I am using your [div style="float" right;"]CODE[/div] solution on this page, but the same thing happens with either solution--i get this giant google ad.

Any thoughts?

I see it so tantalizingly well done on other blogs!

bloggerdigest said...

Good day,

Your post page source shows that your adsense code is not properly embeded:

<div style='float: right;'><script type='text/javascript'<
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>

The tips of how to legally "tweak" adsense code for New Blogger html template is documented in this post, i.e. replace < and > with &lt; and &gt;

Starving Artist said...

rockstar! you're awesome!

Anna said...

I have found a script that allows you to put Adsense ads ANYWHERE in the middle of the post: http://adsinthemiddle.blogspot.com/

Unfortunately, this only works for the old Blogger template. :(

Can you please make a hack for this to work with the new Blogger? I'm sure A LOT of people will appreciate it!

bloggerdigest said...

Good work, Anna!

Nice to know this hack for Blogger users!

Hopefully, there will be a working solution for New Blogger templates too!

MIR said...

Hi,

I wanted to have Google ad between post and title. I tried this method & its not working. I exactly did what you have told. My blog is www.mailsiread.com

Nihar said...

Hi,

Great article. I am searching in google, google groups for placing ads in the content/body from last 2-3 days. Finally i found this page. But there is a problem.

As your first way says removing < !-- and -- > works. For me it is working.

But as you said it is against adsense policies, then i followed your second way i.e., replacing < and > with < and >. It works, but the ad is not with same background as my blog background.

Appreciate if you could take a minute to check this url http://thinkersonmove.blogspot.com/2007/09/current-users-online-see-where-your.html
and let me know why the add 200X200 is coming like that.

Thanks in advance.

The first way works but i am afraid as it is against google policies.

my email id nihar.maniyar@gmail.com

I will keep checking your article for your reply.

waiting for your reply and solution

Thanks in advance
Nihar

bloggerdigest said...

Nihar, I think you're talking about ads in the middle of post.

You placed the adsense code inside the post when you're writing? That's not working and nothing to do with this hack.

Nihar said...

Yes, I am talking about ads in the middle of the post. Did you check the URL the ad is coming but not in the normal way as we get ads. Is there anything more that i need to do.
the url is http://thinkersonmove.blogspot.com/2007/09/current-users-online-see-where-your.html
I want the ad that is in the middle of the post as the ad that is after the post title or after the post body.

bloggerdigest said...

You already have the ads inside the post, as what this article mention about.

I'm still looking for a way to embed adsense inside the middle of post for New Blogger template.

You way of doing is not working. Check your page source, you'll know what's wrong with problem ads.

Rod said...

I'll have to try this out,

btw to post html code in blogger posts use this:
http://roddotnet.blogspot.com/2007/08/how-to-post-html-and-other-code-on.html

Ankur said...

Hi Blogger Digest,
Thanks for the nice article. This is working for me. But what I want is, for the main page also i want to show ads under the Title. Now if I remove the if-else conditions from above, the ads will be shown after all the post titles of the main page. I just want to show ads on the top of the main page just after the title of first post. Can you find a solution for this? or else can u let me know how to refer to the latest post through HTML code so that I can change the if-else condition accordingly.

I hope I am clear with my question.

Regards,
Ankur

bloggerdigest said...

Hi Ankur, I'm sorry to say that I couldn't find a solution for this.

Similarly, I've problem of controlling the number of times the inline ads appears in main page.

If you happen to get one, kindly keep us posted.

Many thanks.

ashok said...

Is There any problem for adsense account by changing code?

http://easy-money-4u.blogspot.com

cozuni said...

I've been searching for this for a few hours, found a few blogs before I found yours. All of them were not working properly. Luckily I found yours. Thanks a lot.

shyam_rocks said...

I have tried to apply that thing...but the problem is that I have used post breaking code.

just after "p""data:post.body/""/p"

So when I am posting ur code after "p""data:post.body/""/p"

(" instead of < >)

I am getting some weired things..sometime the breaking of post is not working some time same post is repeated..twice

So please help me and reply where to insert ur code.

top10mp3download said...

this is so nice.. thanks for this great article.. already applied on my blog. Is there any way to let ads appear only on first post so when i enter my website from direct url i can put more posts. Right now i limit the post to 2 posts only. If more than that it will break the google adsense tos.

thinsurface said...

This is awesome, even though you wrote this post nearly 2 years ago!

This last post finally helped me get it done, so for that I thank you.

Anonymous said...

Thanks for providing the ti for placing adsense code within content.

Anonymous said...

very informative, I will used that in my blog

Professional Lab said...

I must say, It's informative!
Keep writing.

Attractive Woman said...

Thanks for the great tips. I'll try it out.