How to Add Adsense Code Below First Post Description In Readmore

Putting Adsense Code in our blog need to be tricky  in order to gain more money from our visitors. Here, we will add adsense code right after the first snippet in your read more i.e. in your homepage. We will use the read more scripts that we use in my previous tutorial. Below is the process of making it.
add adsense code below first post

Click this for the live demo

Note:


The Ads in image above is not  an ad from Adsense, it is from Bidvertiser. I used it only for clarification of  below tutorial.

How to Add Adsense Code or Any Code Below First Post Description In Readmore


Step 1. Please follow the  procedure from step 1 to the last step of that tutorial (How To Create Magazine Style With Post Summaries And Thumbnails On Blogger).
Step 2. In step 4 of that tutorial,  you have added a certain lines of scripts. Below that scripts, you add your adsense code or any widget as shown in the blockquote below
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<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>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading >></a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Your Adsense Code Here/ Widget Here

Note: 


Your adsense code or any widget will not work if it is not being parsed properly. You can  use our parsing tool for free.

Step 5. Since you have added a new widget below your first post in read more, the margin will be changed accordingly. You may play the margin of your read more by using the css below
.post {
margin: 86px 0 -48px 0;

Note:


Add that above CSS code above the tag ]]></b:skin>
The first nemerical value  (86px) is responsible for the top margin.
The second  one (0) is for the right margin.
The third one (-48px) is for the bottom margin and
The last vaue (0) is the right margin.

Step 6. After you have set this in your blog  you may now click the save buttom and you're done.
If you have a little difficulty setting its margin. Don't hesitate to call me and  I'm glad to help you.
Happy Blogging Buddies!!!

No comments:

Post a Comment