Add Rectangular Social Sharing Widget Below Each Blogger Post ~ The Next Generation Blog

Home » blogger_tricks » Add Rectangular Social Sharing Widget Below Each Blogger Post

Add Rectangular Social Sharing Widget Below Each Blogger Post

Add Rectangular Social Sharing Widget In Blogger

Hi friends, I have already provided codes to add social sharing widgets in blogger. Here is another social sharing widget for your blog. This widget looks cool and shows the counts also below the social media icons. So, let's start adding this widget:
> Login to your blogger account.
> Go to Template > Edit HTML > Proceed > Expand Widget Templates.
> Now, press ctrl+F key and search for <data:post.body/>. If you don't see this code, then search for <div class='post-footer-line post-footer-line-1'/>.
> Just below <data:post.body/> OR <div class='post-footer-line post-footer-line-1'/> paste the code given here:

<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="helperblogger" 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 and check your blog.
Keep visiting for more tips and tricks. Subscribe to my latest updates and share this post.