Sunday, March 4, 2012

Add Social Bookmarking Buttons near Adsense Ads

The main advantages of this widget is that you can increase your AdSense impressions along with CTR - and of course, fill up the empty space besides Adsense units, making your blog look more attractive.

Adding the social bookmarking buttons at the top of your blogger post, will make things easier when your readers will want to share your posts via the networking sites. The widget includes buttons for Del.icio.us, Twitter, Facebook, StumbleUpon, Technorati and Digg.

How to Add Social Icons Near AdSense Ads

1. Login to your Blogger Dashboard, then go to Template and hit the Edit HTML button (please make sure that you backup your template)

2. Click anywhere inside the code area and search using CTRL + F for the following tag:
]]></b:skin>
3. Before this tag, paste the following CSS code:
.ads{margin-bottom:10px; border-top:solid 1px #DEDEDE; padding-top:10px; font-size:13px;}
.ads-right-min{border-left:solid 1px #DEDEDE; height:250px; padding-left:10px;}
.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited{
font-size:12px;
color:#222;
display:block;
height:22px;
line-height:22px;
margin-bottom:16px;
padding-left:32px;
}
.ads-right-min a:hover,
.bottom-share-links a:hover{color:#666;}
.mini-tech{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Gyd6XMAmMiIf2vsws5L3MKgFzdh72dspK6tupSW6pe5X3k7g87yUzObiri7sYKTmTO1ztzfIZbw3E2c0eZ9JiaEEKUy__JGX45XVgjMMALzgSNteUdpmQAu99yuCO4Y-uIGsya0a9Omc/s1600/technorati.gif) no-repeat;}
.mini-facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicK_DZ4Miv6XZhSdU-lm_Zn_I10a3CIBkuNP7djAwBwxtfklKIbATri91YA159T9EIyoeIvHT2uMN21dSpaSOT0feuOXdNY0Dwx024I7xEqt3n7QpJD51M1taN6K8Q95iXM2HHJHyAdF14/s1600/facebook.gif) no-repeat;}
.mini-tweet{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZVxk_n0wvDXCH8E7t6ItnwSkG9G8_eBNLcmhpS42v_HBRn79NYFsrg_2wcYe5QHyc_74crlHPPuGNbz5n7T32tYdAlLV1cq3JUYwBt5mUUdYJM34cl3oz0x0g-2guGLmNTwnLBrQ0QPt-/s1600/tweet.gif) no-repeat;}
.mini-del{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_dyZB0G-OYU4WMPJEGJfU45W5_kHlDd-Y35_uEb4nEVWXVcH2j6d9Q0JLNzzkMGrFqWYjWFuJFvHjb3Ss0rw-jTGqquht-T4RQA0D6A9Mc63EjQHXm6T6Uacb3rFvXUyDtk7dXgIKdBl/s1600/delicious.jpg) no-repeat;}
.mini-stumble{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBK-RW5UfR3FZtzxuYEvMuRgJArx4sl1mQZ5ftxVMIMBMJmL7FIGv_B2nMuqsK_Qlg-FRS9I_CYMWAtAJiT0tFHGMiNgztXQnfKv9BreVet15SATBXVjuSNm8vp2Cp_p115COzWqc2Xa68/s1600/stumbleupon.png) no-repeat;}
.mini-digg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhscH3ChlGfcs-2x7G-f6zifCgQp3BWfZ5RCR7abFU0ulu0d2lkKfFj0JRhu0LCIT_IV-WDI0PbENtX92VIcPSM4GlJJuzOOnufJcgQBZIVgMD5D5iUVlT2U1nUPqPvHBtjl3AA7bFBeFoH/s1600/Digg.png) no-repeat;}

4. Now search for the following line:
<div class='post-body entry-content'>

If you can't find it, search for this one:
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

5. Add the following code directly below it:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='354'>
&lt;script type=&#39;text/javascript&#39;&gt;&lt;!--
google_ad_client=&quot;pub-YOUR PUBLISHER ID&quot;;
google_ad_host=&quot;pub-1556223355139109&quot;;
google_ad_width=300;
google_ad_height=250;
google_ad_format=&quot;300x250_as&quot;;
google_ad_type=&quot;text_image&quot;;
google_ad_host_channel=&quot;0001&quot;;
google_color_border=&quot;FFFFFF&quot;;
google_color_bg=&quot;FFFFFF&quot;;
google_color_link=&quot;0000FF&quot;;
google_color_url=&quot;008000&quot;;
google_color_text=&quot;000000&quot;;
//--&gt;&lt;/script&gt;
&lt;script src=&#39;http://pagead2.googlesyndication.com/pagead/show_ads.js&#39; type=&#39;text/javascript&#39;&gt;
&lt;/script&gt;
</td>
<td><div class='ads-right-min'>
<a class='mini-del' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Del.icio.us'>Add This To Del.icio.us</a>
<a class='mini-tweet' expr:href='&quot;http://twitter.com/home?status=Reading &quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Post this article on Twitter'>Tweet/ReTweet This</a>
<a class='mini-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share On Facebook'>Share on Facebook</a>
<a class='mini-stumble' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This'>StumbleUpon This</a>
<a class='mini-tech' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Add To Technorati'>Add to Technorati</a>
<a class='mini-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This'>Digg This</a>
</div>
</td>
</tr>
</table>
</div>
</b:if>

Note: Replace YOUR PUBLISHER ID with your AdSense account ID. You'll find it by going to the Home tab on your "Account settings" page. It should look something like this:

pub-5623269265862168 (copy only the numbers and then paste them)

6. Click the 'Save template' button and now you should be able to see the social bookmarking buttons near AdSense ads by visiting one of your posts.

No comments:

Post a Comment

Search This Blog

Recent Post

Recent Posts Widget

Blog Archive

Popular Posts