Add Stylish Social Sharing Widget to your Blogger

Best Movies Sites: TOP 10 MOVIE WEBSITES

facebook twitter google plus
In this tutorial i would like to explain how to add a Social sharing bookmarking widget to your blogger blog. This social bookmarking buttons look something professional, because each button has a different background. This buttons contain Twitter tweet buton, Facebook like button as well as Google +1 button. Now lets go to the subject and add it to your blog as shown below.  If you wanna see demo you can see the below image as a demo▼

beautiful Social sharing widget

questio icon.png How to Add This Widget to Your Blog
To add this beautiful social sharing widget to your blog follow the simple below steps:

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

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

Now what you have to do is copy and paste the below code just below/after the above code

<b:if cond='data:blog.pageType == "item"'>
.promote_post_bg {
    height: 103px;
    background: url( 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;
    <div class='promote_post_bg'>
        <div class='promote_twitter'>

       <a class='twitter-share-button' data-via='labstrike' href=''>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src=&quot;//;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>


      <div class='promote_facebook'>

<iframe allowTransparency='true' expr:src='&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 = '';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
            <g:plusone annotation="none" size='medium'></g:plusone>
<p style="display:none;">Widget by<a href="">LabStrike</a></p>

Now you're done . Save your template. I hope you like this post. Happy Bloggong:)