Social Icons

Thursday, 23 May 2013

Add AdSense right After Tag

This is a great tutorial which will multiply your current click through rate and add a new boom to your over all Adsense earning. With a big repository of plugins for Wordpress blogs like Quick Adsense, WP users never need to worry while adding Adsense to any part of the blog they wish but in blogger we lack plugins that could do the job automatically. Therefore this week my main focus lies in developing more of such plugins that could provide you great front end experience. Thanks our developer Ahmed Nasir the script developed this time will automatically insert your AdSense Ad right after the opening paragraph (Post summary) or the read more button(Jump Break). The read more link is distinguished by the HTML tag "<!--more-->" , we will use a simple Jquery code to tell the browser to append an Ad zone with a unique div ID, right before the more tag. In  browsers where JavaScript is disabled the Ad zone will instead display at the end of post. You can see the demo on our blog, right after reading this line...
(You will see below a 468X60 Adsense for content Ad).
Update: I have disabled the Ad display for browsers where JavaScript is disabled. 



Installing the Script on Blogger

  1. Go to Blogger > Templates
  2. Backup your template
  3. Tick the "Expand Widget Templates" box
  4. Search for <head>
  5. Just below it paste the following JQuery code only if you are not yet using jQuery script on your blog
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

6.   Next paste the following code below <head>

<script type='text/javascript'>
$(document).ready(function(){

$(&#39;a[name=&quot;more&quot;]&#39;).before($(&#39;#MBT-google-ad&#39;).html());
$(&#39;#MBT-google-ad&#39;).html(&#39;&#39;);

});
</script>

Optional: If you want to display the ad at two places i.e. below read more tag and also at the end of post then delete the highlighted yellow code. Also delete the yellow highlighted code from step#8 given  below
7.  Now search the following code:

<data:post.body/>

8.  Just below it paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="display:none;">
<div id='MBT-google-ad'>
<br/>
<center>
ADD ENCODED ADSENSE CODE HERE </center>
<br/>
</div>
</div>  </b:if>

Replace the bolded text above with your Adsense code. Remember that the code that you copy from your Google Adsense Account must be first encoded inorder to work with blogger templates. Simply copy the code and then encode it using the following MBT tool.

  • Encode your AdSense code using: MBT HTML Encoder
Copy the encoded code from MBT HTML encoder and then paste it on the bolded text that says: ADD ENCODED ADSENSE CODE HERE
      9. Save your template and you are all done!
Visit your blog and then visit any post page, you will see an Ad hanging just perfectly right after the first opening Summary paragraph. :)

No comments:

Post a Comment

Releated Post

  • Underline Hover Effect Css Navigation Bar for Blogger
    Underline Hover Effect Css Navigation Bar for Blogger
    29/05/2013 - 0 Comments

    This is a Underline  Hover Effect  Css  Navigation Bar.In this tutorial im gonna …

  • Make Money From Blog
    Make Money From Blog
    23/05/2013 - 0 Comments

    Most of people are trying to earn money from blogs.They always ask what is the best way to earn money from…

  • How to add Floating Facebook like box to Blogger?
    How to add Floating Facebook like box to Blogger?
    24/05/2013 - 0 Comments

    Everyone know that Facebook is largest social media site and Over 1 Billion people use…

  • SEO vs PPC: Which One is Better for Your Business
    SEO vs PPC: Which One is Better for Your Business
    23/05/2013 - 0 Comments

    Generating organic traffic is  not  so easy  now days. You have to make …

  •  11 Most Popular Female Bloggers of 2013!
    11 Most Popular Female Bloggers of 2013!
    23/05/2013 - 0 Comments

    Today when the biggest competitor of man out there in industry is woman, even the online earning medium too…

  • Why You Should Comment On Other Blogs
    Why You Should Comment On Other Blogs
    22/05/2013 - 0 Comments

    As far as we all understand, blogging  is  not a simple thing at  all. If you  manage a…

If you Like Post Share it with Your Friends.

Dont Miss And Other Chance Stay With Us

Get Free Updates in your Inbox
Follow us on:
facebook twitter gplus pinterest rss

Follow us on facebook

 

Sample text

Sample Text

Sample Text