Social Media Sharing Buttons for Blogger

Social media is one of the best way to drive your hits and help fill for seo. Now i am shearing code helps you to shear you Facebook, Tweet You Article, Add to Delicious, Post your article on digg, submit in Stumble. Button is in 3D effect and you visitor attract to your shearing button and force to shear your article.

For Adding this Code follow some simple steps.

Sign in your Blogger Account.

Click on Design
Click on Edit HTML
 

 Take a backup of your Template click on Download Full Template

 

Click on Expand Widget Templates

 

Search given code below or place sharing buttons code on your desire place.
 <p><data:post.body/></p>

Paste entire code just below in above given code.

 

Copy Entire code  don't change or modify code this may cause of your code doesn't work properly.

<!-- sharebox start www.blogtechworld.com-->
<div class="sharebox">
<center>
<a expr:href="&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="" rel="nofollow" target="_blank" title="Share on Facebook"><img alt="" border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9NT-zQ0EhBWuIsIU9s1iJBqbZy5QLTwqqasyXKw03YUpgjrXavvXCQ6GkL5E9xqFkDgIJMmzFGUJijtttgmVxodOdFpZ0ubXdIeB79a_lZlOh9qFLvQj3DCtdCyuO2Nt2-5kWWLA4jHsF/s1600/facebook.png" width="70" /></a>
<!--www.blogtechworld.com-->
<a expr:href="&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="" rel="nofollow" target="_blank" title="Share on Twitter"><img alt="" border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9pd9eL03xr2QRUoCjD_jCpGGz_zSW9njF7rNlFu5HGpsAw5QGQgWaRFlJ07Bos5viokZEC8wzHvpBnjUvmuxhF94iRtkS4aKHIe6EjCBuE6NA8ZjFPaupQUvEeFJwit88daY4rm2TcHre/s1600/twitter.png" width="70" /></a>
<!--www.blogtechworld.com-->
<a expr:href="&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="" rel="nofollow" target="_blank" title="Add to Delicious"><img alt="" border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicFL8RBd0AUNUYS5o3ZqHcDMqEVZeLXxxd7MKTq3JTSMj98mShaNt7V2pBU9j1hnXq76QbV5fu46Kt2LiFktRUFRo2BBCNcIhjSpiOP-yesSXBiX8akF40XSQiv8kbSRni7PefBDLt6XMk/s1600/delicious.png" width="70" /></a>
<!--www.blogtechworld.com-->
<a expr:href="&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="" rel="nofollow" target="_blank" title="Digg This Post"><img alt="" border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8DkXKK_Ovx71tYGXR-ADPmiqfY3hme5EkBkoNMPTcG2tLcZUh5c2s1rPMzeCrIJRsxkxlIJvQFl1rTDoq-wcyI2q01zAvBln06GU1T6uUCO1K-6cgkGK9JJ1940LHZjZIVgRSYPUpeAH9/s1600/digg.png" width="70" /></a>
<!--www.blogtechworld.com-->
<a expr:href="&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="" rel="nofollow" target="_blank" title="Stumble This Post"><img alt="" border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXruXsaDqh_tADTbvENuSlxWEsTluCVhPOdnA-dpnh2b2RTWxNXLtlY-g1Co7SL3vxfKhxkotXCuntt802IYQY94wNx8H5uygZ5n8HYKI_KEoJMhyphenhyphen4jZ66E6yS40ZnRlRT3k8G11dWPXfI/s1600/stumbleupon.png" width="70" /></a>
</center></div>
<!-- sharebox end www.blogtechworld.com-->

Save Template and Click on Preview and Enjoy New social media sharing buttons on your Blog.

Floating social media sharing buttons for Blogger

Accordance with my promise to my readers, I am providing a tutorial on how to add a Mashable-like floating bar of social media buttons to a Blogger blog (or a Word Press blog or just for any website). From now you will not have to go into your template HTML to install (or remove) them as I have made it, using widget. Only you have to drop the whole code into a HTML/JavaScript gadget.

I also have included Face book Share, Retweet, Stumble Upon, Digg and Google +1 (plus one) buttons in the bar. Each of them comes with a live counter. The corners of Face book Share button and counter are rounded to blend with the rest of the buttons i.e. it will not work in Internet Explorer .Suppose later if you want to add more social bookmarking or sharing buttons, you can also do that.

<!-- floating page sharers Start www.blogtechworld.com-->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from blogtechworld.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.blogtechworld.com/2011/10/floating-social-media-sharing-buttons.html">Add this</a></div>
<!-- floating page sharers End --></div>

Copy Give code and Don't Change it.

Layout>Add a Gadget>HTML/JavaScript (Copy given code below and Paste it)

Note :- If Your Social Media Shearing Button Not Showing on Proper Place
Search margin-left:-250px and Change Numeric Value to Move on Proper Place.

Save and Enjoy............