HackingUniversity - Hacks . Tricks . How-To's

25 August 2013

How to Add Adsense Ad in the Middle of Blogger Post

Google-Adsense-logoThis was a secret mystery which everyone was unaware that if they could place the AdSense ad code right in the middle of blogger post and that too automatically. And people just used to think that this could be done only in Wordpress with the support of its awesome plugins, but well there are people who have achieved a great knowledge in customizing blogger and they came up with a nice solution to automatically ad AdSense ad code right inside middle of blogger post.

So now we have already posted on how you can add Adsense code below post title in blogger but if you were wondering on how you can add the Adsense ad unit in the middle of blogger post, well now your search ends here check below steps.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for <data:post.body/> tag, now you can may find this code twice or thrice so you need to check which is the right one.
  3. Make sure to backup your Template before proceeding to next step.
  4. Now you need to replace the above code with below code.

    <div expr:id='&quot;aim1&quot; + data:post.id'/>
    <div style='float:right;border:1px solid #aaa;background: #f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYgkvX43v5QVgvVHh2JGAhd14cf92HYpXIjQ3if__jssG5O8Xc9O-dCc4mDWPbQTATsR8aN4MTmDaNMqA26BzS_ruK5xJkdwU6YKUocNHebGrkGtilt-HYzX8qgrVKLc_ZHxzOO1-1opUq/s0/bg-pattern.png) repeat top left;padding:10px;clear:both; margin:10px 0;border-radius:3px;box-shadow:inset 0 0 3px 2px #ccc'>

    Paste Parsed Adsense Code Here

    </div>
    <div expr:id='&quot;aim2&quot; + data:post.id'>
    <data:post.body/>
    </div>
    <script type='text/javascript'>var obj0=document.getElementById("aim1<data:post.id/>");var obj1=document.getElementById("aim2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf("");if(r>0){obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1)}</script>

  5. Now just replace the blue line with your Parsed Adsense Ad Code (Parsing AdSense ad code means to make few lines HTML friendly, so just use our converter)
  6. Now I have styled the widget using few lines of CSS code, so you might wanna change it according to your blog design.
  7. You can even change the position of Adsense ad code by changing the value in Red color in above code.

So now enjoy guys using this this simple trick to manage your Adsense ad unit right inside blogger post and aligning it in the middle automatically.