How to add Cool metro style Social Sharing Widget below Blog Post

Social Media play a very important role for every blog or website. With the help of social media, it can get more traffic, visitors and readers to your blog or website. Every social media have unique social sharing buttons designed by their developers. Therefore, we need to add these social sharing buttons in our blog or website to gain more traffic, visitors and readers. Actually, I already shared many kinds of social sharing buttons here in TrueBloggerTricks. And today, I'm gonna share to you another style. It is different from all others because each button has a different background. These social sharing buttons contains twitter tweet, facebook like and google +1. So, If you want to add this widget below your blogger blog post, then just follow the steps given below.

Steps to Add This Widget Below Your Blog Post

Steps.

Login to your Blogger Dashboard.
Go TO Template.
Click Edit HTML ---> Proceed ---> Expand Widget Templates.
Click Ctrl+F and search the code below:

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

Just below/after the <div class='post-footer-line post-footer-line-1'/>, Paste the code below:

<b:if cond="data:blog.pageType == "item"">
<style>
.promote_post_bg {
height: 103px;
background: url(http://1.bp.blogspot.com/-0XK7JZR6VAw/UIC9BwXIMyI/AAAAAAAAAN4/NjbbeWgyV5M/s1600/Cool+Social+Sharing+Widget.png) 0 -7px no-repeat;
width: 500px;
margin-left: 65px;}
.promote_twitter {
width: 130px;
height: 38px;
float: left;
margin: 0 39px 0 0;
padding: 65px 0 0 13px;
text-align: center;}
.promote_facebook {
width: 115px;
height: 40px;
float: left;
margin: 0 39px 0 0;
padding: 63px 0 0 28px;
text-align: center;}
.promote_google {
width: 65px;
height: 40px;
float: left;
margin: 0 39px 0 0;
padding: 65px 0 0 28px;
text-align: center;
}
</style>
<div class="promote_post_bg">
<div class="promote_twitter">
<a class="twitter-share-button" data-via="tbloggertricks" href="https://twitter.com/share">Tweet</a>
<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 = "//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");

</script></div>
<div class="promote_facebook">
<fb:like action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></fb:like>
<div>
<b:if cond="data:post.isFirstPost">
<script>
(function (d) {
var js, id = 'facebook-jssdk';
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));

</script>
</b:if></div>
</div>
<div class="promote_google">
<g:plusone annotation="none" size="medium"></g:plusone>
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();

</script></div>
</div>
</b:if>

Now click Save Template.

Need Help? If you are facing any problem to implement these sharing buttons in your blog. Please feel free to add your comment. I will try to resolve it in time. I hope you enjoyed this tutorial! Looking forward for your feedback. Thanks!