This time I thought of introducing a great social sharing widget for you to place it under the post content. This is a blogger xml modification which needs to be added to your template. I have seen many of the bloggers have added the default addthis and sharethis widgets to share the content. But as far as I can see, most of them are not looking great if your blog's colours are not matching or if it's extremely dark.

Earlier I explained how to add a nicely aligned addthis sharing widget to your blog post footer. This was done by modifying the original addthis code. For this new widget I'm introducing I used the same concept, but only added the addthis share button to share with other networks.

Sometimes when you add the different sharing buttons from different networks, you will find it difficult to align the buttons horizontally as well as vertically. But I hardly see something nicely aligned buttons used in blogger platform apart from wordpress.

In this widget, I have initially added the networks of stumbleupon, twitter, google plus, facebook and addthis share buttons on the widget. Once added it successfully, it will be visible as follows. But you have to note that this widget will be successfully placed, only if your post content's width is more than 520 pixels.


If the above condition is okay, you can add this widget on your blog.

Step 1 : Go to Edit HTML from the Panel. Then tick on the Expand the Widget Template.

Step 2 : Now find the below code.

<div class='post-footer-line post-footer-line-1'>

Step 3 : Now paste the below code just after the code <div class='post-footer-line post-footer-line-1'>

<!-- Tricksfinder Sharing Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Tricksfinder Sharing Script End -->

<!-- Tricksfinder Horizontal social buttons Start -->
<div class='promote_post_bg' style='padding:80px 0 10px;'>
<!-- StumbleUpon -->
<div style='float:left; padding-top:1px; margin-left:10px;  margin-right:30px;'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
</div>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='false' show_faces='false'/>
</div>
<!-- Addthis Start -->
<div style='float:left; padding-left:30px'>
<a class='addthis_counter addthis_pill_style' margin-left='30px'/>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f70472777fa5939' type='text/javascript'/>
</div>
<!-- Addthis End -->
<div class='promote_buttons'>
<center>A widget created by <a href='http://www.tricksfinder.com/2012/12/tricksfinder-social-sharing-widget.html' target='blank'>Tricks Finder</a>. <a href='http://www.tricksfinder.com/2012/12/tricksfinder-social-sharing-widget.html' target='blank'>Get this</a> if you like.</center>
</div>
</div>
<div style='clear: both;'/>
<style>
.promote_post_bg {
    height: 73px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw-n36OKMbvhnNdXaLhmAM2SGURK9xwZ5mN2ET2tuMb0L8AZ2HptjYBQV7hQVg_-uEe8D5uWszzGEzTwq95TeYSCBFnMXLicSI5ZIobRdXoT41XS-pXz-V4_5bZssMIc0Mb1VUw0r7Hm6m/s1600/tricksfindersharing+widget+img.png) 0 -7px no-repeat;
    width: 520px;
    margin:0 auto;
}
.promote_buttons {
    padding: 30px 0 10px;
    align:right;
}
</style>
<!-- Tricksfinder Horizontal social buttons End -->

Step 4 : Save the template. That's all you have to do. Now you will have a nice social sharing widget at the bottom of your blog.