Social media share buttons or bookmarking buttons are really important if you want to give users opportunity to share content with their friends and social media circle. For blogger it gets little tricky to show social media buttons just at the post area. Today! I have coded a really cool social media share buttons widget for the blogger which is very fast loading since custom images are used plus I have also included the Google plus button also. You will need to edit the theme of your blogger account. For a Demo of these sharing buttons including Facebook, Reddit, Twitter, Google Plus, Stumple Upon, Digg you should visit: Demo Of the Social media Share Buttons For Blogger.

Add Social Media Share buttons to Blogspot Blog:

1- First login to your blogger account and then go to Template>>Edit HTML , here you can see the XML coding of your template which is currently active. Please backup your template before proceeding.

2- Press CTRL+F since we need to find the snippet of code in your template so that after that we may be able to add the sharing buttons. You should add these buttons to the end of the post so that when the user finishes to read the post he may be able to share it to the Facebook, Twitter, Google plus or Technorati etc. Thus! Press CTRL+F and find “post-footer-line-1” or if you can’t find it then find “data:post.body” after finding any of the above you need to add the below code just after that:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- talk of web.com share widget -->
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>
<style>
img{
border: 0;
}
#sharewrapper{
width:100%; 
height:110px; 
background-image:url('http://3.bp.blogspot.com/-67uG_qDHc3E/UVweO9EdmkI/AAAAAAAABg8/7Y_nDOko0OI/s1600/sharebg-talkofweb.png'); position:relative; background-repeat:no-repeat;
background-position: -9% -14%;
}
#sharewrapper img{
margin: 0;
padding: 2px;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
border-radius: 36px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
border: none;
}
#sharewrapper img:hover{
-moz-box-shadow: 0px 0px 8px #000000;
-webkit-box-shadow: 0px 0px 8px #000000;
box-shadow: 0px 0px 8px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
}
#sharewrapper ul{
	list-style-type: none;
    padding-left: 33px;
    padding-top: 36px;
    width: 600px;
	overflow: hidden;
}
#sharewrapper li{
float:left;
margin: 5px;
}
.absolute-tow {
	font-size: 8px;
    left: 44px;
    position: absolute;
	font-family: verdana;
    top: 91px;
}
</style>

<div id='sharewrapper'>
<!-- Stumbleupon -->
<ul><li>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumble This Post' height='48' src='http://2.bp.blogspot.com/-pZgzrIBGhR8/UVwipHQLnKI/AAAAAAAABhk/901kMN-_e38/s1600/stumbleupon.png'/></a>
</li><li>
<!-- Delicious -->

<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Save Tis Post To Delicious' height='48' src='http://3.bp.blogspot.com/-JldiGfRavJ8/UVwioiUDotI/AAAAAAAABhM/x8kwgkGT_mY/s1600/delicious.png'/></a>
</li><li>
<!-- Reddit -->

<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Reddit' height='48' src='http://3.bp.blogspot.com/-GUZ7IcnhIVo/UVwipN-vPrI/AAAAAAAABho/43njZBzhfrc/s1600/reddit.png'/></a>
</li><li>
<!-- Technorati -->

<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Fave On Technorati' height='48' src='http://3.bp.blogspot.com/-ZZxo50eaN1w/UVwipeZpCvI/AAAAAAAABhs/ZC3bDR5Itn0/s1600/technorati.png'/></a>
</li><li>
<!-- Yahoo Buzz -->

<a expr:href='&quot;http://buzz.yahoo.com/buzz?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Buzz This Post' height='48' src='http://4.bp.blogspot.com/-KEtanCmH3pA/UVwip7EyyNI/AAAAAAAABh8/OiYI01B6gFk/s1600/yahoo.png'/></a>
</li><li>
<!-- Twitthis -->

<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Tweet This Post' height='48' src='http://2.bp.blogspot.com/-abZNuSh0LL4/UVwipwDof5I/AAAAAAAABiA/lBluALzFMP0/s1600/twitter.png'/></a>
</li><li>
<!-- Digg -->

<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This Post' height='48' src='http://4.bp.blogspot.com/-IpafZ9ZZ_gQ/UVwiouEoDAI/AAAAAAAABhU/UHRNlbiHdB0/s1600/digg.png'/></a>
</li><li>
<!-- Facebook -->

<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Facebook' height='48' src='http://3.bp.blogspot.com/-qWF7Eo8xa9s/UVwiorxJSrI/AAAAAAAABhQ/ZZDuIRlnvAg/s1600/facebook.png'/></a>
</li></ul>
<a class="absolute-tow" rel="nofollow" href="https://www.talkofweb.com/custom-social-media-share-buttons-for-blogger">Get this Widget For your Blog!</a>
</div> <!-- share wrapper -->

    <div style='float:left; border:2px dotted #000000; width:100%; overflow: hidden;'>
<p style='font-family:verdana;color:inherited'>Share and Rate this information publicly to let the world know!</p>
<div style='float:right;margin-top:-21px;'>
    <g:plusone expr:href='data:post.url' size='standard'/>
</div>
    </div>
	<!-- talk of web.com share widget -->
</b:if>

3- After you have added this, just save your template and then go to the post of your blog and get a view of the amazing sharing buttons with Google plus extra official button. The social media share buttons are genuinely made from the beautiful icons and with a special CSS3 hover effect which makes a shadowed circle around them when mouse hovers any of the button. Enjoy and don’t remove any backlinks for the widget as I worked hard for it, if you want to remove then contact me here and give me a link back in your blogroll 🙂