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


About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...