Blogger Tips

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 this widget:

1. Firstly, login to your Blogger Dashboard and go to Template and then click on the Edit HTML button
(don't forget to make a backup of your template)

2. Search (CTRL + F) for the following tag:

]]></b:skin>

3. Paste the following CSS code just above it:

.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(http://4.bp.blogspot.com/-WzNU2IHbPUw/T0tzV4pdJUI/AAAAAAAAA9g/zpcW79rwjDA/s1600/technorati.gif) no-repeat;}
.mini-facebook{background:url(http://2.bp.blogspot.com/-GLdDN18ez0s/T0tzkMMN_OI/AAAAAAAAA9o/SotoFVp-n6U/s1600/facebook.gif) no-repeat;}
.mini-tweet{background:url(http://3.bp.blogspot.com/-EhUjF27bY6c/T0tzyzWbpVI/AAAAAAAAA9w/udfjwp25Y3c/s1600/tweet.gif) no-repeat;}
.mini-del{background:url(http://3.bp.blogspot.com/-EUzXfWgxw7Q/T0t0Fcu-1XI/AAAAAAAAA94/j-sKpYQpWRY/s1600/delicious.jpg) no-repeat;}
.mini-stumble{background:url(http://1.bp.blogspot.com/-X-5Vt1_irbM/T0t0VsULXeI/AAAAAAAAA-A/gLqH65DlX48/s1600/stumbleupon.png) no-repeat;}
.mini-digg{background:url(http://3.bp.blogspot.com/-8AQN6eSDWsQ/T0t0kQViaMI/AAAAAAAAA-I/D8kpuTno4sA/s1600/Digg.png) no-repeat;}

4) Now search - using "CTRL+F" - 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='"post-body-" + data:post.id'>

5) Add the following code directly below it:

<b:if cond='data:blog.pageType == "item"'>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' /><tr>
<td /><script type='text/javascript'></script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
</td>
<td><div class='ads-right-min'>
<a class='mini-del' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Add To Del.icio.us'>Add This To Del.icio.us</a>
<a class='mini-tweet' expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " " + data:post.url' target='_blank' title='Post this article on Twitter'>Tweet/ReTweet This</a>
<a class='mini-facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Share On Facebook'>Share on Facebook</a>
<a class='mini-stumble' expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Stumble This'>StumbleUpon This</a>
<a class='mini-tech' expr:href='"http://www.technorati.com/faves?add=" + data:post.url' target='_blank' title='Add To Technorati'>Add to Technorati</a>
<a class='mini-digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Digg This'>Digg This</a>
</div>
</td>
</tr>
</table>
</div>
</b:if>

Replace YOUR PUBLISHER ID with your AdSense account ID. You'll find it with 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) Save template... and just go to one of your post to see the changes.

- Add Floating Social Media Sharing Buttons Below Blogger Post Titles
It is becoming increasingly important to make our posts appreciated and shared on social networks and one of the best ways to get traffic to our blog/website and boost sharing stats is to add social sharing buttons. In this tutorial we will see how to...

- Add Facebook Like Button Below Post Titles
This Facebook Like button will allow visitors to Like your post and share it to their Facebook friends. In this post we will see how we can add a Like button for each individual Blogger post, and not a Facebook fan box for the entire blog (which is also...

- Add Twitter Retweet Button To Blogger
Did you know that Twitter can help drive traffic to your Blogspot blog? In today's Blogger tutorial I show you how to add a free Twitter Retweet button to your Blogger posts. Adding a Tweetmeme Twitter Retweet button to Blogger will help promote your...

- Add A Facebook Share Button To Blogger
An easy way to have your readers share your articles on Facebook is to add a Facebook Share Button to your Blogger blog (Blogspot blog). It only takes a few minutes to put a Facebook Share Button on your Blogger blog. Sharing your content on Facebook...

- Integrated Digg Button For Blogger Blogspot
Today I am going to show you how to add a large integrated Digg button to a Blogger Blogspot blog. The button will display next to the text of the first paragraph in your Blogger posts. This tweak is not difficult but you will be changing your template...

Blogger Tips