Add Beautiful Social Sharing Widget Just Below Of Blogger Posts

This tutorial will show you How To Add Beautiful Social Sharing Widget Just Below Of Blogger Posts. 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.

Social Sharing Widget Preview

Social Sharing Widget Demo

LIVE DEMO

How To Add Social Sharing Widget

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

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

• Now Paste the Code Shown Below just below/after it

<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAoj-PDhhMbpkYfAG81bgHZPmHC9Qy46neIloe7CBnBswW8ZkbFUhXEcD2esKofP8Y45wUREt57BMOf2rHeoGvW_tkhgU4mxhJNG_gFnzDtc8BiM-n_ccOcVZXp4guc15c6d6hcFd4T7g/s1600/latesthack.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='latesthack' 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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>

      </div>

      <div class='promote_facebook'>

    
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>      </div>
        <div class='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 annotation="none" size='medium'></g:plusone>
        </div>
    </div>
</b:if>

• Now save your template

Like it? Share it.