Wednesday, 30 May 2012

Add Beautiful Social Sharing Widget Just Below Of Blogger Posts



Social bookmarking gadgets are the easiest ways to boost traffic on your blog and earn more money.Till today we have shared many kind social sharing and bookmarking widgets but this one is little different from all of them because each button has a different background.This button contains a twitter tweet button,facebook like button and google +1 button also the installation of the widget is one step installation you just have to add some piece of code in your template.If you want to see the demo of widget then scroll down,you will find the demo at the bottom of the post,also don't forgot to use them :) Now without waiting anymore let's see how to add it to blogger blog.

How to Add This Widget To Blogger?


  1. Go to Blogger Dashboard > Template
  2. Take a backup of your template
  3. Click on Edit HTML
  4. Hit Proceed button
  5. Check Expand Widget Template checkbox.
  6. Find below code in your template,

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

add below piece of code just above it,

<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://lh3.googleusercontent.com/-AK_TNwyWxJw/T8XDa2Q6TpI/AAAAAAAAB04/UCczorSYj0s/s1600/helperblogger.com-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 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>
</b:if>


Now save your template and you are done.

I hope all of you will surely like this widget.Enjoy Buddies :) hAvE a NiCe DaY....

                                                                     Demo ▼








29 Comments : Read Them Below Or Add One

  1. This widget trule so nice. I am happy to using on my blog

    ReplyDelete
  2. bro,,akto help kran na r akto vlovbe bujiya bolun

    ReplyDelete
  3. thanks, it looks great, i have added it to my blog, but facebook and gplus count does not work, have a look
    http://premium-area.blogspot.com

    ReplyDelete
  4. Nice Post...

    JayRyan'sBlog was inviting you to be a Guest Post Author..

    Thank you so much.

    -jayryan09-

    ReplyDelete
  5. i have posted problem above about 10 days ago, no response yet! :(

    ReplyDelete
    Replies
    1. I just visied your blog and noticed that this widget id working on your blog,then whats the problem?????

      Delete
  6. wow this is really cool. nice widget. tanq for this post.

    @Programming Tips-CODERS HUNT

    ReplyDelete
    Replies
    1. This widget looks familiar.. If I am not wrong this widget is from LatestHack.. Am I right..??

      JayRyan'sBlog

      Delete
    2. No I have published it before latesthack also I have visited the latesthack just today for first time,I have got this widget on google but I don't know the real author of widget that's why I have didn't added any credits....

      From next time if you are commenting then pls don't add any links otherwise we have to delete it as considering it as spam...

      Delete
  7. Please help I cant find first code in my templete even after expanding widgets.

    Can you tell if there is any other alternative.

    ReplyDelete
    Replies
    1. then find out this

      <data:post.body/>

      add widget code just below.after it,

      Delete
  8. how i can change size on thix widget

    my website > www.fun4everr.com

    ReplyDelete
  9. Hello bro, I use a customized template for my blog. I've also customized it a lot. I could find class='post-footer-line post-footer-line-1 in my blog template. It has been removed. Where should I add it? Plz help. Plz have a look at my blog here http://itcongress.blogspot.com

    ReplyDelete
    Replies
    1. find



      and add widget code just below/after it,

      Delete
  10. Dude can you help me please????? In this post you said to find a line I cant able to find this line. please please help........ :'(

    ReplyDelete
  11. Used on my website, looking good, thanks :)

    ReplyDelete
  12. This one is great too.Kudos

    Thanks

    Blogger Whale

    ReplyDelete
  13. so nice dear ..
    donate your car here as charity
    click here

    ReplyDelete
  14. i added the code but nothing shows up?

    ReplyDelete
  15. I cannot find neither (div class='post-footer-line post-footer-line-1'/) nor (data:post.body/) . What should I do ?

    ReplyDelete
  16. How can i center the widgets to middle?

    ReplyDelete
  17. It's not working.. my blog jibbzofficial.blogspot.com

    ReplyDelete
  18. The main types of social networking services are those that contain category places , means to connect with friends, and a recommendation system linked to trust.

    ReplyDelete
  19. I posted in My Blog But Its Not Working

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete

If you want to be informed about any replies then click on "Subscribe by email" (present below of comment box).PLEASE DO NOT SPAM