Add Beautiful Social Sharing Widget Below Blogger Posts

Add Beautiful Social Sharing Widget Below Blogger Posts

Social networking is very helpful for bloggers in these days. Because with the help of social sharing they can get get more visitors. Today, I will guide "How To Add Beautiful Social Sharing Widget Just Below Blogger Posts". You can add three different social buttons with different background for each button just below of blogger posts.

This buttons contain Twitter tweet buton, Facebook like button as well as Google +1 button. Just follow the steps given below. I hope you like this tutorial.

How To Add Beautiful Social Sharing Widget Below Of Blogger Posts To Blogger?

1. Go to Blogger Dashboard > Template.
2. Backup your Template before making any changes to your blog
3. Click on Edit HTML
4. Tick Expand Widget Templates.
5. Search (Ctrl + F) the code below:

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

6. Copy and paste the below code just below/after the above code:

<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTI_JW2DMMZOocSLrWO44QF6bKW1qK2zeXcC25Yx5wFZY8lC0dwNiVKGo29NmdzQ_5DBB6oZLkqWX06zPcM3Q-9wNXCcTUFeIa-SaA4H_eu9w2DdaPb2SSVD0AgUZaX8CuWUoG5249qvtV/s1600/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='' 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 expr:href="data:post.canonicalUrl" layout='button_count' send='false'
                show_faces='false' font="verdana" action="like" colorscheme="light"></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>
<p style="display:none;">Beautiful Social Sharing Widget Below Of Blogger Posts by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p>
</b:if>

7. Now save your template and you are done.