How To Add Adsense Inside Post

Adsense inside post is a good place to increase click-through rate. There are many articles about how to add Adsense inside post. Now, Blogger template is not just "a default". Many tutorial, hacking, and coding how to make a template more stylish to representative personality, passion, function, and purpose of blogging itself. One of the them is about summary post.



And this post is about how to add Adsense inside post for template default version, auto read more with thumbnail script, and read more with snippet both top and bottom post

No demo live for this tutorial but we have tested and works well

CSS Code

First, we create a CSS code. Go to Template > Edit HTML and add this code below before ]]></b:skin>

.ad-inside{
float:right;
width:336px;
margin:0 0 30px 30px;
padding:0;
}
.ad-inside p{
float:left;
background:#ededed;
padding:2px 5px;
font-size:11px;
color:#000;
line-height:normal
}

Note :
- float on the right
- ad size 336*280px
- You can edit and adjust the position and size

Read also

• Responsive Google Adsense
• How To Make Responsive Adsense Link Ad Unit
• Type And Functions Conditional Tag Code Blogger

Now, we go to HTML


Template Default Version
Default version is a default template from Blogger. No added auto read more.

1. New Template

For new template, the HTML code like this

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>

Then, please note code <data:post.body/> (you can see 2 codes. choose the first one)

Adsense At The Top
For Adsense at the top, copy and paste this code below before <data:post.body/>

<div class='ad-inside'>
<!-- YOUR ADSENSE CODE HERE -->
<p>Advertisement</p> <!-- optional code -->
</div>

Adsense At The Bottom
For Adsense at the bottom, copy and paste this code below after <data:post.body/>

<div class='ad-inside'>
<!-- YOUR ADSENSE CODE HERE -->
<p>Advertisement</p> <!-- optional code -->
</div>

And This is the complete code both Adsense top and bottom post for default template new version

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
     <div class='ad-inside'> <!-- Ad Top -->
    <!-- YOUR ADSENSE CODE HERE -->
    <p>Advertisement</p> <!-- Optional code -->
  </div>
        <data:post.body/>
     <div class='ad-inside'> <!-- Ad Bottom -->
    <!-- YOUR ADSENSE CODE HERE -->
    <p>Advertisement</p> <!-- Optional code -->
  </div>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>

2. Old Template

For old template, the HTML code like this

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

Please note code <data:post.body/>. Some template have 1 but others have 2. If you have 2 codes, choose the second one

Adsense At The Top
For Adsense at the top, copy and paste this code below before <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ad-inside'>
<!-- YOUR ADSENSE CODE HERE -->
<p>Advertisement</p> <!-- Optional Code -->
</div>
</b:if>

Adsense At The Bottom
For Adsense at the bottom, copy and paste this code below after <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ad-inside'>
<!-- YOUR ADSENSE CODE HERE -->
<p>Advertisement</p> <!-- Optional Code -->
</div>
</b:if>

And This is the complete code both Adsense top and bottom post for default template old version

<div class='post-body entry-content'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='ad-inside'> <!-- Ad Top -->
      <!-- YOUR ADSENSE CODE HERE -->
      <p>Advertisement</p> <!-- Optional Code -->
    </div>
  </b:if>
  <data:post.body/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='ad-inside'> <!-- Ad Bottom -->
      <!-- YOUR ADSENSE CODE HERE -->
      <p>Advertisement</p> <!-- Optional Code -->
    </div>
  </b:if>
  <div style='clear: both;'/> <!-- clear for photos floats -->  
</div>

Template Support Script Auto Read More With Thumbnail

For template support script auto read more with thumbnail, we use script auto read more with thumbnail like this below. Please note the code. Make sure the auto read more code similar with your template. For other auto read more, maybe in next post.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 500;
summary_img =70;
img_thumb_height = 230;
img_thumb_width = 280;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
*/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+' ...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0;margin:0"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

And

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Adsense At The Top
For Adsense at the top, copy and paste this code below before <data:post.body/> (choose the third code)

<div class='ad-inside'> <!-- Ad Top -->
<!-- YOUR ADSENSE CODE HERE -->
<p>Advertisement</p> <!-- Optional Code -->
</div>

Adsense At The Bottom
For Adsense at the bottom, copy and paste this code below after <data:post.body/> (choose the third code)

<div class='ad-inside'> <!-- Ad Bottom -->
<!-- YOUR ADSENSE CODE HERE -->
<p>Advertisement</p> <!-- Optional Code -->
</div>

And This is the complete code both Adsense top and bottom post for template support script auto readmore with thumbnail

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' itemprop='articleBody'>
<data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.timestamp/>&quot;,&quot;<data:post.author/>&quot;);</script>    
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ad-inside'> <!-- Ad Top -->
<!-- YOUR ADSENSE CODE HERE -->
<p>Advertisement</p> <!-- Optional Code -->
</div>
<data:post.body/>
<div class='ad-inside'> <!-- Ad Bottom -->
<!-- YOUR ADSENSE CODE HERE -->
<p>Advertisement</p> <!-- Optional Code -->
</div>
</b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Template Support Read More With Snippet

First, please check this post about create summary post no Javascript required from BloggerBuster.com because this tutorial based on that post

Adsense At The Top
For Adsense at the top, copy and paste this code below before <data:post.body/> (choose the second code)

<div class='ad-inside'> <!-- Ad Top -->
<!-- YOUR ADSENSE CODE HERE -->
<p>Advertisement</p> <!-- Optional Code -->
</div>

Adsense At The Bottom
For Adsense at the bottom, copy and paste this code below after <data:post.body/> (choose the second code)

<div class='ad-inside'> <!-- Ad Bottom -->
<!-- YOUR ADSENSE CODE HERE -->
<p>Advertisement</p> <!-- Optional Code -->
</div>

And This is the complete code both Adsense top and bottom post for template support read more with snippet

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
       <div class='ad-inside'> <!-- Ad Top -->
      <!-- YOUR ADSENSE CODE HERE -->
      <p>Advertisement</p> <!-- Optional Code -->
    </div>
      <data:post.body/>
       <div class='ad-inside'> <!-- Ad Bottom -->
      <!-- YOUR ADSENSE CODE HERE -->
      <p>Advertisement</p> <!-- Optional Code -->
    </div>
      </b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Basically, this is not only for Adsense. You can put another ads or banner image inside post with that.

Let me know if you have suggestion for another template version. I'll try to help