HackingUniversity - Hacks . Tricks . How-To's

06 May 2014

Add AdSense Ad right after <!--more--> Tag in Blogger

This fantastic tutorial is prepared and produced by MBT site where its admin labored evening and difficult day and eventually came out with this kind of ground-breaking widget which can multiply your adsense 10 Times once you activate and apply this script on your blog. Since you know Wordpress comes up with many in built plugins that you can activate and display your advertisement anywhere inside the post but in blogger you do not have this chance to embed adsense advertisement unit anywhere inside the post.

adsense-ad-more-tag

Well I have posted some tutorials that helps you in embedding adsense ad code right below the post title and even getting an adsense code in the middle of the blogger post. But this tweak applied is merely a simple jQuery code which tells the browser to append an Advertising zone with an unique div ID, before the more tag. As we know in blogger the more tag includes a html code like "<!--more-->" that is actually used to add a jump break to cut the post, so they used this code to manage job mechanically.

Increase your AdSense Earnings by 10 Times

Now see how exactly to configure this widget in your site so you could multiply your adsense earnings by doing nothing but posting that same awesome content you used to post earlier.

  1. Open Blogger > Template  > Edit HTML.
  2. Press Ctrl + F & search for </head> tag & paste below code above it.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

     

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

  3. Now you can remove the Red line in above code if you have already installed the jQuery in your blogger template.
  4. Now again search for <data:post.body/> tag, well you might two instances for it just below the second instance add below 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>

  5. Now you need to add your adsense code at place of the blue line in the above code, well if you get error while saving simply encode your adsense code.
  6. Now just Save your Template and refresh your blog to see the ads live visible right after the more tag.

How to Add More Tag Jump Link in Blogger

Well if you do not know about the <!--more--> tag jump link on how actually to add it to your post and display the adsense ad, well check below steps.

  1. While creating your post, you will the option like in the below image.
    blogger-jump-link-option
  2. The page breaking option you can see in the above image is the Jump Link option, clicking it once will add the <!--more--> tag automatically where your cursor will be blinking.
  3. So now adding this tag will help you in rendering your adsense ad right onto it, so add it wherever you would like to show your adsense ad.

So guys now this ends this awesome tutorial, hope it helped you out in increasing your adsense income by pretty much 10 times, well if you face any problems implementing this trick do comment below.