Wednesday, February 23, 2011

Blogger: move Adsense to the end of post and above comments


When hosting your blog at blogspot.com, it is very easy to add Ads to your blog. Just go to the Dashboard, click on the Monetize tab and follow the instructions. You could add Ads at the end of each post and the sidebar.

But there is a major "flaw" of adding the Ad to the end of the post. The Ad is added below the comments. When your readers are reading that single post (not the homepage of the blog which may contains multiple posts), they first see the post itself, then the comments, and the last, the Ad. That means your best and most popular posts get punished because they tend to have too many comments (such as this post). The readers would not have the patience or interest to go over all the comments, until when they could see the Ad.

In this tip, we show you how to move the Ad before the comments area. The template we are using may not be the same as yours, but the idea should be similar. You should also remember to make a copy of the current template before doing any changes to it, because what works for us may not work for you. To make a copy of the current template, go to the Dashboard, click on the Design tab, then the Edit HTML sub-tab, you will see the Download Full Template link.

Now let us begin.

Step 1: go to the Dashboard, click on the Design tab, then the Edit HTML sub-tab.

Step 2: in Edit Template section, check the Expand Widget Templates option.

Step 3: in the textbox of the current template, look for this piece of code:
        <div class='post-outer'>
        <b:include data='post' name='post'/>

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <b:if cond='data:mobile == &quot;false&quot;'>
            <div class='inline-ad'>
              <data:adCode/>
            </div>
          </b:if>
          <data:adStart/>
        </b:if>

To better explain the code, we have colored them.

You can see the second line (in yellow) includes the post itself. After that are the comments (in green). The Ad section (in red) is below the comments section.

Step 4a: move the code in red to between yellow and green. The Ad should be below the post and above the comments now. Click the PREVIEW button. If you are satisfied, go to step 5. (Note: you could not see the result of a single post in the preview. You have to save the template first.)

Step 4b: Each post usually has a footer. If you want to move the Ad above the footer and right at the end of your post to get better attention, skip step 4a and do the following:

  Step 4b-1: cut the red piece of code off its original location.

  Step 4b-2: in the textbox of the current template, look for this piece of code:
    <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

  This piece of code is the pure post body.

  Step 4b-3: paste the code you just cut (the red one) right after this piece of code. Now it looks like this.
    <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <b:if cond='data:mobile == &quot;false&quot;'>
            <div class='inline-ad'>
              <data:adCode/>
            </div>
          </b:if>
          <data:adStart/>
        </b:if>

  Click the PREVIEW button to see the result.

Step 5: Click the SAVE TEMPLATE button to activate it.

9 comments:

Kenichi said...

hola amigo La Que es verda Que Me interesan tu tutoriales Pero mira Tengo Un proble y no es de Sí COMO solusionarlo Yo Tengo Un foro de PREGUNTAS enlase foroactivo here Con él y Pero-le-blogger No Se Como hace parr Que la publicasiones Que Tenga ayi en le foro me Salaga la blogger .. Que Sera Que Me peudes Con Ayudar ESA inconita Que Tengo ... Aquí agraesco que te ...

shabs said...

THANK YOU!!!! This really helped!

practicalrambler. said...

Thanks very much, very helpful tip!

Regan Clem said...

Awesome. Thank you very much. This seems like the way they should have it set by default.

Anonymous said...

Thanks a lot, information was helpful. i love the layout and everything about this blog. it's just too beautiful.once again thanks...
website design

dicksonkho said...

Thank you...
This is What I looking for....
It's helpful for me.

Walidin said...

where can i put adsense code: '<script async src="//pagead.... </script>'
among that 3 sections

MACDONALD said...

Wow thanks for putting up this post, it works like magic

Jahirul said...

Woow Awesome post!!! This is really helpful for me. You made my day. I just loved this article. You helped me a lot so I just wanna say so much thanks to you.

 
Get This <