HashOut: 2007/03/13
This blog has moved. We welcome you to our new home at http://hashout.org

How to insert Google Adsense ads before or after each post in the new version of Blogger?

If Ad revenue is crucial to your blog then the best place to display your ads is within the main contents of your website or blog as that is what the visitors came looking for. Secondly, it should be "above the fold", i.e. on the visible portion of the page when the page is first loaded as most users don't even scroll down to read the entire post.

In this post I will show how to insert ads after each post title and before the post body (content) in the new version of Blogger. You do not have to insert the code manually into each of the posts. All you have to do is insert the code once into the template. The AdSense server will then automatically display the first three AdSense ad units on the page and there won't be any violation of the TOS too!

Here are the steps:

Note: Before you proceed with any template modifications, it is always a good idea to take a backup copy of your template so that you are safe just in case you or the Blogger server goofs up.


  1. Sign in to the new Blogger
  2. Click on Layout under the Manage: section of one of your blogs. Or click Template if you are already on Posting or Settings tab
  3. Click Edit HTML
  4. Click Download Full Template in order to make a backup of your template on your hard-disk drive.
  5. Click to check the Expand Widget Templates checkbox
  6. Now search for the following line in your template:

    <p><data:post.body/></p>

    and insert the AdSense 336 x 280 Large Rectangle code just before the line as shown below:

    <script type="text/javascript">&lt;!--
    google_ad_client = "pub-YOURPUBLISHERIDHERE";
    google_ad_width = 336;
    google_ad_height = 280;
    google_ad_format = "336x280_as";
    google_ad_type = "text_image";
    google_ad_channel = "";
    //--></script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <p><data:post.body/></p>

    Replace YOURPUBLISHERIDHERE with your AdSense publisher ID. To find out your publisher id, sign in to your Google AdSense account, click My Account tab and check AdSense for Content under Property info section.
  7. Hit SAVE TEMPLATE.
  8. You're done! Now take a look at your blog.
» Continue reading

Read more on , , , ,

Blog Study: Acquire Wisdom and Live With Passion

Screenshot of Sam Chan's blog Acquire Wisdom and Live With PassionSam Chan of Acquire Wisdom and Live With Passion needs some suggestions to improve his blog. Well, frankly speaking, I feel the blog is quite good enough for its purpose. However, Sam can surely make certain changes to help his blog visitors. Here they go:


  1. The first thing I noticed was that there are a lot many posts on the home (index) page. I feel that could increase the time required to download the complete page resulting in visitors with slow download speeds abandoning the blog without even having a look at it.
  2. If ads are an important source of income for Sam then I feel they should be placed somewhere above the fold i.e. somewhere at the top of the page so that visitors don't have to scroll down to view the ads. They should preferably be placed after the post title and within the post body. AdSense's Large rectangle is the format that will give best results.
  3. The search box can be placed somewhere at the top right corner of the page which is kind of default location for search boxes. Further Sam can use Google CSE to tightly integrate the search facility into the blog and also monetize user searches.
  4. Even though Sam has changed the default background image of the standard blogspot template "Thisaway Green", it would be advisable to further customize the template so as to have a unique identity.


The best part of Sam's blog, as told by Kerry Dale Hancock Jr is that he "knows how to put the perfect picture with all his posts."
» Continue reading

Read more on , , ,

The run for runs

The record for most runs in a World Cup career goes to Sachin Tendulkar of India for his 1,732 runs. He also holds the record for the highest number of runs in a World Cup-673 in World Cup 2003. The highest score ever in a World Cup match is 188 not out by Gary Kirsten of South Africa, against the United Arab Emirates at Rawalpindi, Pakistan in 1996. » Continue reading

Read more on ,

Peek-a-boo post body contents-hack for New Blogger

The original Blogger hack for show/hide links for posts only deals with the classic template. The same hack can be modified a little to implement it on the new Blogger layout template. Here is the step by step procedure.

Note: Before you proceed with any template modifications, it is always a good idea to take a backup copy of your template so that you are safe just in case you or the Blogger server goofs up.


  1. Sign in to the new Blogger
  2. Click on Layout under the Manage: section of the blog you want to implement this hack on. Or click Template if you are already on Posting or Settings tab
  3. Click Edit HTML
  4. Click Download Full Template in order to make a backup of your template on your hard-disk drive.
  5. Click to check the Expand Widget Templates checkbox
  6. Paste the following two lines into your style sheet i.e. anywhere in between the <b:skin> and </b:skin> tags:

    .posthidden {display:none}
    .postshown {display:inline}

  7. Add the following code to your template, anywhere between the <head> and </head> tags:

    <script type="text/Javascript">

    function expandcollapse(postid) {

    whichpost = document.getElementById(postid);

    if (whichpost.className=="postshown") {
    whichpost.className="posthidden";
    }
    else {
    whichpost.className="postshown";
    }
    }
    </script>

  8. Now search for the following lines in your template:

    <div class='post-body'>
    <p><data:post.body/></p>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    and replace them with the following lines:

    <span class='posthidden' expr:id='data:post.id'>
    <div class='post-body'>
    <p><data:post.body/></p>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    </span>
    <a expr:href='"javascript:expandcollapse(\"" + data:post.id + "\")"'>
    [+/-] show/hide this post</a>

  9. Hit SAVE TEMPLATE.
  10. You're done! Now take a look at your blog.


An alternative to the show/hide method is to use post summaries. Each method has its own advantages and disadvantages. The advantage of this method to expandable post summaries is that only the template needs to change, with no modification required for your posts. However, you can only display the post titles using this method and it is applied to all posts leaving you with no choice to apply it selectively to long posts only.
» Continue reading

Read more on , ,