Monday, June 18, 2012

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.






How to Add these sharing button below every post

  1. Go to Blogger > Design > Edit Html
  2. Backup your Template
  3. Click on Expand Widget Templates check-box
  4. 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 == &quot;item&quot;'><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>
   8. Save Your Template and See your any post.

Credits

This Widget is fully designed by PBT. If you want to share it with your reader, you have to give a back link to PBT for this Widget.

Need Help??

If you are facing any problem to implement these sharing buttons in your blog. Do comment your issue, i will try to resolve it in time.

0 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...