Show Adsense Ads With Addthis Sharing & Social Widget Below Post Title In Blogger/Blogspot

Adsense by Google is the most effective CPC ad network available for a normal blogger by any means. Adsense have the industries highest cos...

Show-Adsense-Ads-With-Addthis-Sharing-&-Social-Widget-Below-Post-Title-In-BloggerBlogspot-Adsense by Google is the most effective CPC ad network available for a normal blogger by any means. Adsense have the industries highest cost-per-click rate and it’s still the best option to make money out of his/her blog for an average blogger as well as also for a professional blogger. Adsense is a contextual ad network that means it first analyze site contents and then show most relevant ads for that content. And so visitors usually get interested to these promoted ads because they are based on the same interest. To get more Adsense clicks from your blog, you should focus on ad placement. You can try heatmap or Google In-Site Analytics and find out the place where visitors usually clicks more. Although this depends on site design, visitors mentality, contents behavior and many other thing, but placing Adsense just below post title could be a better place. Although you cannot generally put a widget in content area of blogger (Blogger doesn’t allow it – you will get template error), but yet you can add Adsense there by following some simple tips. We are using this hack for a long time and getting positive feedback too. If you have noticed, we use Adsense and Addthis sharing tool widget just below post title in article pages. Let me today show you how to do so.

We will use HTML escaped Adsense code and Addthis vertical toolbox with a combination of Google +1 badge, Facebook like button and Twitter follow and tweet button. The result will look something like the following. You will also find a working demo in any article pages of our blog.

Show-Adsense-Ads-With-Addthis-Sharing-&-Social-Widget-Below-Post-Title-In-Blogger-Blogspot-

Ok, now create a new Adsense 300x250 block (Or 336x280 block if your article area width is more then 650px), then get the code and paste it into this HTML escape tool. Click on Convert to escaped characters button and then get the converted code.

Now log in to your blogger account, click on Design from blogger dashboard. Then click on Edit HTML (Go to Template> Edit HTML if you are using new blogger dashboard). Then click on Expand Widget Templates. Before making any change, backup your template so that you can restore your template if anything goes wrong.

Now find the ]]></b:skin> and paste the following codes just above it.

/* Adsense below post title with Addthis and Social Badges by abctrick.net */
.boxround {
 margin : 0 auto;
 padding : 10px;
 background : url(http://2.bp.blogspot.com/-FlZECiOQKWs/T0pUQiQeYrI/AAAAAAAAF8c/6Kqxlbcvysk/s1600/white_leather.png) repeat #eeeeee;
 border : 1px solid #ccc;
 -moz-border-radius-topright:10px;
 -moz-border-radius-bottomleft:10px;
 -webkit-border-top-right-radius:10px;
 -webkit-border-bottom-left-radius:10px;
 border-radius-topright:10px;
 border-radius-bottomleft:10px;
}
#addthis-left {
 float : left;
}
.addthis_toolbox .vertical {
 float : left;
 width : 215px;
 padding-left : 5px;
 min-height : 185px;
 position : relative;
}
.addthis_toolbox .vertical a {
 position : relative;
 display : block;
 width : 150px;
 padding : 4px 0 4px 34px;
 text-decoration : none;
 color : #626262;
 transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -webkit-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
}
.addthis_toolbox .vertical a:hover {
 color : #8f8f8f;
 text-decoration : none;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
}
.addthis_toolbox .vertical1 {
 float : left;
 width : 215px;
 min-height : 185px;
 position : relative;
}
.addthis_toolbox .vertical1 a {
 position : relative;
 display : block;
 width : 150px;
 padding : 4px 0 4px 15px;
 text-decoration : none;
 color : #626262;
 transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -webkit-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
}
.addthis_toolbox .vertical1 a:hover {
 color : #8f8f8f;
 text-decoration : none;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
}
.addthis_toolbox .vertical1 .more {
 border-top : 1px solid #eee;
 padding : 2px 0 0 0;
 margin : 10px 10px 0 10px;
 text-align : center;
}
.addthis_toolbox .vertical span {
 position : absolute;
 left : 14px;
 top : 4px;
}
.addthis_toolbox .vertical .more {
 border-top : 1px solid #eee;
 padding : 2px 0 0 0;
 margin : 10px 10px 0 10px;
 text-align : center;
}
.addthis_toolbox .vertical .more a {
 padding : 0 0;
 margin : 0;
}
.addthis_toolbox .vertical .more a:hover {
 background : none;
}
.addthis_toolbox .vertical .more span {
 display : none;
}
.googleplus {
 padding-left : 15px;
 padding-top : 5px;
 padding-bottom : 3px;
 display : inline-block;
}

Now we need to put Addthis jQuery script as well as, Google +1 and Twitter script in the template. Find </head> tag and put the following code right above it.

<!-- Addthis jQuery - Remove if you already have this -->
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'></script>
<!-- Twitter Button jQuery - Remove if you already have this -->
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
<!-- Google +1 Button jQuery - Remove if you already have this -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>{lang: 'en'}</script>

Now find out <div class='post-header-line-1'/> and place the following tag just below it.

If you can’t find it then try finding <data:post.body/> and paste those code above it.

<!-- Adsense below post title with Addthis and Social Badges by abctrick.net Starts -->
<b:if cond='data:blog.pageType == "item"'><!-- Remove -->
  <div class='boxround'>
    <table border='0' cellpadding='0' cellspacing='0' width='98%'>
      <tr>
        <td width='330'> 
        REPLACE THIS LINE WITH CONVERTED ADSENSE CODE 
        </td>
        <td><div class='boxround-right-min'>
            <div class='addthis_toolbox'>
              <div class='vertical'>
                <div class='googleplus'>
                  <g:plusone annotation='bubble' size='medium'/>
                  <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
                  <br/>
                  <a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a><br/>
                  <a class='twitter-follow-button' data-lang='en' data-show-count='true' href='https://twitter.com/YOUR_TWITTER_ID'>Follow @YOUR_TWITTER_ID</a> </div>
                <a href='YOUR_GOOGLE_PLUS_URL' style='text-decoration:none; background-color:transparent!important; margin-left:-20px!important' target='_blank'><img alt='' src='https://ssl.gstatic.com/images/icons/gplus-16.png' style='border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; vertical-align: middle; border-left-width: 0px;'/> Follow On Google+</a> 
                <a class='addthis_button_facebook'>Share On Facebook</a> 
                <a class='addthis_button_stumbleupon'>Stumble This Post</a> 
                <a class='addthis_button_reddit'>Submit On Reddit</a> 
                <a class='addthis_button_email'>Email To A Friend</a>
                <div class='more'> <a class='addthis_button_expanded'>More Destinations</a> </div>
              </div>
            </div>
          </div></td>
      </tr>
    </table>
  </div>
</b:if>
<!-- Remove -->
<!-- Adsense below post title with Addthis and Social Badges by abctrick.net Ends -->

Here you need to made some changes. First of all, replace the REPLACE THIS LINE WITH CONVERTED ADSENSE CODE of 7th line with your converted Adsense code. Then replace YOUR_TWITTER_ID twice with your own twitter ID. Atlast replace YOUR_GOOGLE_PLUS_URL with your Google+ page URL. Then click on SAVE TEMPLATE. You should now get a nice elegant Adsense with Addthis and Social Widgets just below of your post title in article pages.

Bonus: Using this tutorial, Adsense and Sharing widget will show only in article pages. If you want to get this widget and show Adsense ads only below first post title on all pages including homepage and index pages then replace <b:if cond='data:blog.pageType == "item"'> from the HTML code with <b:if cond='data:post.isFirstPost'>.

Troubleshooting: Adsense is showing only blank space instead of ads.

Solution: Make sure that you have putted the converted (Escaped) Adsense code in your blogger template. If you directly implement the tag into the template then it will show blank space. Also it take 5-10 minitues to active new ad zone for Adsense. So wait for 5-10 minutes and then it should start showing ads.

Hope you will be able to get desired result now. Comment here if you face any problem.

13 comments :

  1. I have done all. but nothing has changed. see at http://extratelecombd.com 

    ReplyDelete
  2. I am seeing 1 ad unit and 2 link unit under post title in article pages. It's done.

    ReplyDelete
  3. pls check now. ads has not shown.

    ReplyDelete
  4. I have checked your blog. The reason for adsense not shown up is you have pasted adsense code wrongly. You have escaped line breaks. Use the following code.

    http://3.bp.blogspot.com/-tq4vOAVSOKc/T8Hjhk2P0OI/AAAAAAAAHMI/0dMcDuD_x2M/s1600/sshot-1.png

    Do not merge lines. Code have to be exactly like this.
    Also, the widget shows TEMPLATE ERROR because you have posted the HTML in wrong place. Paste it above

    ReplyDelete
  5. check korlam. erkomoi ache. r amar template-e option-ta nai.

    ReplyDelete
  6. Then please sent me your template.xml in reyad[at]abctrick.com . I will try check tonight.

    ReplyDelete
  7. instead of addthis sharing can i use related posts? how would i do this. @lyricsbod

    ReplyDelete
  8. Dude how to remove the backgound? help me i already put all your code..here is my blog..
    Funny Pinoy Picture,Pinoy Meme,Pinoy Pick-Up Lines

    ReplyDelete
  9. If you are talking about the leather like background image, then remove the background : url(http://2.bp.blogspot.com/-FlZECiOQKWs/T0pUQiQeYrI/AAAAAAAAF8c/6Kqxlbcvysk/s1600/white_leather.png) repeat #eeeeee;



    And if you are asking about the wired looking whitis backgound behind Google+1 to Twitter follow button, then it's happening because you are using another social widget which is overlapping my widget. Best thing is to replace googleplus of my code only (occours two times) with something like googleplus2.


    Thanks.

    ReplyDelete
  10. nothing changed

    ReplyDelete
  11. Thank you..it works perfectly in my blog. :)
    http://mabzicle.blogspot.com

    ReplyDelete
  12. thanks i'm using it for my blog : http://www.everytechpro.blogspot.com/

    ReplyDelete
  13. Implementation is helpful, bunch of tips are really advisable.Very cool insight, thanks 4 sharing. I’ll use it for my new site!

    ReplyDelete