Get me outta here!

Sunday, July 6, 2014

Add Adsense Right After Tag & Before Post Footer

This great tutorial is prepared and developed by MBT blog where its admin Mustafa Ahmedzain worked hard day and night and finally came out with such a revolutionary widget which can multiply your adsense earning up-to millions once you activated this plugin on your blog. Since there is going a hardest competition between blogger and wordpress also other CMS platforms but major is blogger and wordpress to daily millions of blog writers and readers. Adding google adsense ad unit on anywhere is possible on wordpress because they have over thousands of plugins and specially on Google Adsense they have a huge collection. But in blogger you don't have this chance to embed adsense ad unit anywhere of blog post.

Thanks to Mustafa  Ahmedzai and his company's co-developer Ahmed Nasir, this time they came out with an awesome plugin which will automatically insert your AdSense Ad right after the opening paragraph (Post summary) or the read more button (Jump Break). The tweak muhammad applied is just a simple jQuery code which tells the browser to append an Ad zone with a unique div ID, right before the more tag. As we know in blogger the more tag includes an html code like "<!--more-->" so they used this code to handle job automatically. Now see how to configure this widget on your blog so that you can multiply your adsense income more.

Credit: The entire of this tutorial goes to MyBloggerTricks. Please give credit to its original author if you wish to share this tutorial through your blog.

Installing the Script on Blogger

1. Go to Blogger > Template
2. Backup Your Template
3. Click on Edit HTML
4. Now search for <head>
5. Simply below this tag add the following jQuery script (You should add this script if you're not using jQuery in your template earlier)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
6. Again paste the following code after <head> tag
<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> 
Please Note: If you want this adsense ad unit to display only after more tag, then please remove the script highlighted with yellow background. Also delete the script highlighted on step #8

7. Now search for the following code
<data:post.body/>
8. Found it? Good, now add the following script right after <data:post.body/>
<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>
9. Now replace bolded text  with your Adsense code. Remember that the code that you copy from your Google Adsense Account must be first encoded in order to work with blogger templates. Simply copy the code and then encode it using the following TWB tool.
  • Encode your AdSense code using: TWB HTML Encoder
Copy your parsed Adsense code then simple replace with ADD ENCODED ADSENSE CODE HERE
Save your template and you're done!

0 comments:

Post a Comment