Social Sharing buttons below every Post in Blogger with Cool Background Message

Hello Friends!!! Social Media play a very important role for every blog, so we must care about it more. Twitter, Facebook and Google Plus are the popular social channels. We generally add only the simple buttons designed by their developers, but we want some unique and attractive button for our blog. To think about this, i developed these sharing buttons with cool background. By this a visitors easily attract to your post and must like and share post in social media. So if you are ready to add these sharing buttons in your blog below every post, then follows these simple steps.

DEMO

How to Add these sharing button below every post

Go to Blogger > Design > Edit Html
Backup your Template
Click on Expand Widget Templates check-box
Find this below code using CTRL+F

]]></b:skin>

5. Just before it, Add the following code

.pbt_promote_post_bg {
    height: 103px;
    background: url(http://4.bp.blogspot.com/-2WtIT0M2FME/T9_m6wgcnnI/AAAAAAAABYw/AAD1aeaysWI/s1600/sharing-widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;
}

.pbt_promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;
}

.pbt_promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;
}

.pbt_promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}

6. Now, Find this code

<data:post.body/>

7. Paste the following code, just below <data:post.body/>

<b:if cond='data:blog.pageType == "item"'><div class='pbt_promote_post_bg'>
<div class='pbt_promote_twitter'>
<a class='twitter-share-button' data-via='probloggingtool' 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='pbt_promote_facebook'>
<div>
<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>
<fb:like action='like' colorscheme='light' font='verdana' expr:href='data:post.link' layout='button_count' send='false' show_faces='false'></fb:like>
</div>
</div>
<div class='pbt_promote_google'>
<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>
<g:plusone size='medium'></g:plusone>
</div>
</div></b:if>