Monday, May 21, 2007

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-" +'>
    <b:if cond='data:blog.pageType == "item"'>

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


    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
    Place Your Google Adsense Code here

    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.

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

No comments: