1. Technical

Responsive Awesome Style Social Share widget for Blogger

Written by Posted on Less than 0 min read
0
Responsive Awesome Style Social Share widget for Blogger
Responsive Awesome Style Social Share widget

Today , We share four different style social sharing widgets. It’s fully customisable and responsive design.

We used different CSS effects and Social fonts.

It’s social widget take less load time and attractive design.

In this widget , we use four popular social media plugins facebook , twitter , linkedin and google plus.

It’s fully worked on different web browsers and devices.

If you’re faced any problem and bugs related to widget codes then simply comment below here.

First check out all four social sharing widget demos.

Recommended Social Sharing Widget –

  1. New tabbed Social Share , subscribe and connect widget for Blogger
  2. Social Sharing Widget for Blogger in WP Style
  3. How to easy use Floating Social Sharing Header Bar Widget For Blogger
  4. Ice Cube Social Sharing Widget below blogger Post 2013
  5. Social Bookmarking Widget for Blogger & WordPress Blogs

Features of Widget :

  • Based on Pure CSS Style Widget 
  • Social Media Icons (facebook , google+ , linkedin , twitter) 
  • Looks Attractive and Stylish 
  • Responsive Effects 
  • Easy to Installation on Blogger 

How Add Social Widget on your Blogger Template

  1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown 
  2. Select the Template > Click on Edit HTML > Proceed 
  3. Press CTRL + F and find the code </head>
  4. Add Below CSS Code just before </head> tag 
  5. Press CTRL + F and find the code <data:post.body/>
  6. After finding the above code, copy paste the following HTML Code just below it. 
  7. Save your Template Now! All work Done!
    Here , We provide 4 different style Social sharing widget and It’s codes to use in your blogger blog.

    I. Responsive Awesome Style Social Share widget 1 [ DEMO ]

    CSS CODE

    <style type='text/css'>
    /*<![CDATA[*/
             /*Responsive Awesome Style Social Share widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/*/
    @charset "utf-8";
    /* CSS Document */
    .social-share {
      display:inline-block;
      position:relative;

    }
    a.social-share {
      color:#fff;
      background:green;
      padding:1%;
      border-radius:5%;
      text-decoration:none;
      display:inline-block;
      font-family:"Open Sans",georgia;
      font-size:normal ! important;
      box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share span:after{
      color:#fff;
      border:solid;
      border-color:green transparent; 
      border-width:0px 24px 18px 0px; 
      box-shadow:0 4px 0 #fff;
      bottom:8px; 
      content:""; 
      left:100%; 
      position:absolute;
      z-index:199;
       -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:hover {
           box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:hover span:after{
        box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }


    a.social-share:active {
           background:#fff;
      color:#000;
           border:2px solid #fff;
           box-shadow:none;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:active span:after{
        box-shadow:none;
      border:solid;
      border-color:#fff transparent; 
      border-width:0px 24px 18px 0px; 
      -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    .social-content {
      margin-left:4%;
      display:inline-block;
      position:absolute;
      padding:8px;
      border-radius:20px;
    }

    .social-content span.square{
      margin-left:4px;
      background:#fff;
      display:inline-block;
      position:relative;
      width:110px;
      height:40px;
      padding:8px;
      border:2px solid green;
      box-shadow:2px 2px 2px green;
    }

    .social-content span li.fa-facebook{
      margin-top:4px;margin-right:10px;margin-left:2px;
      color:#3B5998;

    }

    .social-content span li.fa-twitter{
      margin-top:4px;margin-right:10px;
      color:#00aced;
    }

    .social-content span li.fa-linkedin{
      margin-top:4px;margin-right:10px;
      color:#007bb6;
    }

    .social-content span li.fa-google-plus{
      margin-top:4px;margin-right:8px;
      color:#dd4b39;
    }

             /*Responsive Awesome Style Social Share widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/*/
        /*]]>*/
    </style

    HTML CODE

    <b:if cond='data:blog.pageType == &quot;item&quot;'>      <!--Responsive Awesome Style Social Share widget for Blogger @ http://www.digitalhubinc.com/ --> 

    <div id="fb-root"></div><script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=408184442589211";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script> <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/><div id='content-wrapper'><a class='social-share' href='#'><span>Social Share </span></a><div class='social-content'><span class='square'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-facebook fa-2x '></li></a><div class="fb-share-button" data-type="button"></div></span><span class='square'><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-twitter fa-2x'></li></a><a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true" data-count="none" data-via="twitterapi">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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </span><span class='square'><a expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-linkedin fa-2x'></li></a><script data-counter='right' type='IN/Share'></script><script src='//platform.linkedin.com/in.js' type='text/javascript'>lang: en_US</script></span> <span class='square'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-google-plus fa-2x'></li></a><!--//--><div class="g-plus" data-action="share" data-annotation="none" data-height="24"></div><script type="text/javascript">(function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script> </span></div></div>
      <!--Responsive Awesome Style Social Share widget for Blogger  @ http://www.digitalhubinc.com/ -->  </b:if>


    It’s a simple responsive and Square block Social Sharing Widget.

    II. Responsive Awesome Style Social Share widget 2 [ DEMO ] 

    CSS CODE

    <style type='text/css'>
    /*<![CDATA[*/
             /*Responsive Awesome Style Social Share widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/*/
    @charset "utf-8";
    /* CSS Document */
    .social-share {
      display:inline-block;
      position:relative;

    }
    a.social-share {
      color:#fff;
      background:green;
      padding:1%;
      border-radius:5%;
      text-decoration:none;
      display:inline-block;
      font-family:"Open Sans",georgia;
      font-size:normal ! important;
      box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share span:after{
      color:#fff;
      border:solid;
      border-color:green transparent; 
      border-width:0px 24px 18px 0px; 
      box-shadow:0 4px 0 #fff;
      bottom:8px; 
      content:""; 
      left:100%; 
      position:absolute;
      z-index:199;
       -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:hover {
           box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:hover span:after{
        box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }


    a.social-share:active {
           background:#fff;
      color:#000;
           border:2px solid #fff;
           box-shadow:none;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:active span:after{
        box-shadow:none;
      border:solid;
      border-color:#fff transparent; 
      border-width:0px 24px 18px 0px; 
      -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    .social-content {
      margin-left:4%;
      display:inline-block;
      position:absolute;
      padding:8px;
      border-radius:20px;
    }

    .social-content span.circle-share{
      margin-left:4px;
      margin-top:8px;
      background:#fff;
      display:inline-block;
      position:relative;
      width:110px;
      height:40px;
      padding:8px;
      border:2px solid green;
      box-shadow:0px 4px 0px green;
      border-radius:100px;
    }

    .social-content span li.fa-facebook{
      margin-top:4px;margin-right:10px;margin-left:2px;
      color:#3B5998;

    }

    .social-content span li.fa-twitter{
      margin-top:4px;margin-right:10px;
      color:#00aced;
    }

    .social-content span li.fa-linkedin{
      margin-top:4px;margin-right:10px;
      color:#007bb6;
    }

    .social-content span li.fa-google-plus{
      margin-top:4px;margin-right:8px;
      color:#dd4b39;
    }

             /*Responsive Awesome Style Social Share widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/*/
        /*]]>*/
    </style>

    HTML CODE

    <b:if cond='data:blog.pageType == &quot;item&quot;'>      <!--Responsive Awesome Style Social Share widget for Blogger @ http://www.digitalhubinc.com/ --> 

    <div id="fb-root"></div><script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=408184442589211";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script> <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/><div id='content-wrapper'><a class='social-share' href='#'><span>Social Share </span></a><div class='social-content'><span class='circle-share'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-facebook fa-2x '></li></a><div class="fb-share-button" data-type="button"></div></span><span class='circle-share'><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-twitter fa-2x'></li></a><a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true" data-count="none" data-via="twitterapi">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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </span><span class='circle-share'><a expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-linkedin fa-2x'></li></a><script data-counter='right' type='IN/Share'></script><script src='//platform.linkedin.com/in.js' type='text/javascript'>lang: en_US</script></span> <span class='circle-share'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-google-plus fa-2x'></li></a><!--//--><div class="g-plus" data-action="share" data-annotation="none" data-height="24"></div><script type="text/javascript">(function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script> </span></div></div>
      <!--Responsive Awesome Style Social Share widget for Blogger  @ http://www.digitalhubinc.com/ -->  </b:if>

    It’s a simple responsive and Eclipse block Social Sharing Widget.

     III. Responsive Awesome Style Social Share widget 3 [ DEMO ]

    CSS CODE

    <style type='text/css'>
    /*<![CDATA[*/
             /*Responsive Awesome Style Social Share widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/*/
    @charset "utf-8";
    /* CSS Document */
    .social-share {
      display:inline-block;
      position:relative;

    }
    a.social-share {
      color:#fff;
      background:green;
      padding:1%;
      border-radius:5%;
      text-decoration:none;
      display:inline-block;
      font-family:"Open Sans",georgia;
      font-size:normal ! important;
      box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share span:after{
      color:#fff;
      border:solid;
      border-color:green transparent; 
      border-width:0px 24px 18px 0px; 
      box-shadow:0 4px 0 #fff;
      bottom:8px; 
      content:""; 
      left:100%; 
      position:absolute;
      z-index:199;
       -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:hover {cursor: pointer;
           box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:hover span:after{
        box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }


    a.social-share:active {cursor: pointer;
           background:#fff;
      color:#000;
           border:2px solid #fff;
           box-shadow:none;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:active span:after{
        box-shadow:none;
      border:solid;
      border-color:#fff transparent; 
      border-width:0px 24px 18px 0px; 
      -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    .social-content {
      margin-left:4%;
      display:inline-block;
      position:absolute;
      padding:8px;
      border-radius:20px;
    }

    .social-content span.circle-share{
      margin-left:4px;
      margin-top:8px;
      background:#fff;
      display:inline-block;
      position:relative;
      width:110px;
      height:40px;
      padding:8px;
      border:2px solid green;
      box-shadow:0px 4px 0px green;
      border-radius:100px;
    }

      .social-content span.circle-share:hover,.social-content span.circle-share:active{
      margin-left:4px;z-index:999;cursor: pointer;
        margin-top:8px;
      background:#fff;
      display:inline-block;
      position:relative;
      width:110px;
      height:40px;
      padding:8px;
      border:2px solid green;
      box-shadow:0px 4px 0px green;
      border-radius:100px;
    }

    .social-content div.circle-sharer{
      z-index:1;

      opacity:1;
      text-align:center;
      color:white;
      font-family:"Open Sans",georgia;
      font-size:normal ! important;
      box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
      margin-left:-10px;
      top:-45px;
      background:green;
      display:block;
      position:relative;
      width:110px;
      height:40px;
      padding:8px;
      border:2px solid green;
      border-radius:100px;
      z-index:999;
    }

    .social-content div.circle-sharer:hover,.social-content div.circle-sharer:active{
      opacity:0;
     z-index:-1;

       -webkit-transition:color 1s ease-in;
       -moz-transition:color 1s ease-in;
       -o-transition:color 1s ease-in;
       transition:color 1s ease-in;
      -webkit-transform: translate(40px,0px);
      -moz-transform: translate(40px,0px);
      -o-transform: translate(40px,0px);
      transform: translate(40px,0px);
      -webkit-transition: all 1.3s;
     -moz-transition: all 1.3s;
     transition: all 1.3s;

    }


    .social-content span li.fa-facebook{
      margin-top:4px;margin-right:10px;margin-left:2px;
      color:#3B5998;

    }

    .social-content span li.fa-twitter{
      margin-top:4px;margin-right:10px;
      color:#00aced;
    }

    .social-content span li.fa-linkedin{
      margin-top:4px;margin-right:10px;
      color:#007bb6;
    }

    .social-content span li.fa-google-plus{
      margin-top:4px;margin-right:8px;
      color:#dd4b39;
    }

             /*Responsive Awesome Style Social Share widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/*/
        /*]]>*/
    </style>

    HTML CODE

    <b:if cond='data:blog.pageType == &quot;item&quot;'>      <!--Responsive Awesome Style Social Share widget for Blogger @ http://www.digitalhubinc.com/ --> 

    <div id="fb-root"></div><script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=408184442589211";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script> <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/><div id='content-wrapper'><a class='social-share' href='#'><span>Social Share </span></a><div class='social-content'><span class='circle-share'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-facebook fa-2x '></li></a><div class="fb-share-button" data-type="button"></div><div class='circle-sharer'>facebook</div></span><span class='circle-share'><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-twitter fa-2x'></li></a><a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true" data-count="none" data-via="twitterapi">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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><div class='circle-sharer'>twitter</div></span><span class='circle-share'><a expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-linkedin fa-2x'></li></a><script data-counter='right' type='IN/Share'></script><script src='//platform.linkedin.com/in.js' type='text/javascript'>lang: en_US</script><div class='circle-sharer'>Linkedin</div></span><span class='circle-share'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-google-plus fa-2x'></li></a><!--//--><div class="g-plus" data-action="share" data-annotation="none" data-height="24"></div><script type="text/javascript">(function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script><div class='circle-sharer'>gplus</div></span></div></div>
      <!--Responsive Awesome Style Social Share widget for Blogger  @ http://www.digitalhubinc.com/ -->  </b:if>

    In this widget , When you’re touch the block then block open and close showing horizontal fade effect.

     IV. Responsive Awesome Style Social Share widget 4 [ DEMO ]

    CSS CODE

    <style type='text/css'>
    /*<![CDATA[*/
             /*Responsive Awesome Style Social Share widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/*/
    @charset "utf-8";
    /* CSS Document */
    .social-share {
      display:inline-block;
      position:relative;

    }
    a.social-share {
      color:#fff;
      background:green;
      padding:1%;
      border-radius:5%;
      text-decoration:none;
      display:inline-block;
      font-family:"Open Sans",georgia;
      font-size:normal ! important;
      box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share span:after{
      color:#fff;
      border:solid;
      border-color:green transparent; 
      border-width:0px 24px 18px 0px; 
      box-shadow:0 4px 0 #fff;
      bottom:8px; 
      content:""; 
      left:100%; 
      position:absolute;
      z-index:199;
       -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:hover {
           box-shadow:0 4px 0 #fff;cursor: pointer;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:hover span:after{
        box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }


    a.social-share:active {
           background:#fff;cursor: pointer;
      color:#000;
           border:2px solid #fff;
           box-shadow:none;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    a.social-share:active span:after{
        box-shadow:none;
      border:solid;
      border-color:#fff transparent; 
      border-width:0px 24px 18px 0px; 
      -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
    }

    .social-content {
      margin-left:4%;
      display:inline-block;
      position:absolute;
      padding:8px;
      border-radius:20px;
    }

    .social-content span.circle-share{
      margin-left:4px;
      margin-top:8px;
      background:#fff;
      display:inline-block;
      position:relative;
      width:110px;
      height:40px;
      padding:8px;
      border:2px solid green;
      box-shadow:0px 4px 0px green;
      border-radius:100px;
    }

    .social-content span.circle-share:hover,.social-content span.circle-share:active{
      margin-left:4px;z-index:999;cursor: pointer;
      margin-top:8px;
      background:#fff;
      display:inline-block;
      position:relative;
      width:110px;
      height:40px;
      padding:8px;
      border:2px solid green;
      box-shadow:0px 4px 0px green;
      border-radius:100px;
    }
    .social-content div.circle-sharer{
    z-index:1;
      text-align:center;
      color:white;
      font-family:"Open Sans",georgia;
      font-size:normal ! important;
      box-shadow:0 4px 0 #fff;
     -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
     transition: all 0.3s;
      margin-left:-10px;
      top:-45px;
      background:green;
      display:block;
      position:relative;
      width:110px;
      height:40px;
      padding:8px;
      border:2px solid green;
      border-radius:100px;
      z-index:999;
    }

    .social-content div.circle-sharer:hover,.social-content div.circle-sharer:active{
      opacity:0;
     z-index:-1;
       -webkit-transition:color 1s ease-in;
       -moz-transition:color 1s ease-in;
       -o-transition:color 1s ease-in;
       transition:color 1s ease-in;

      -webkit-transition: all 1.3s;
     -moz-transition: all 1.3s;
     transition: all 1.3s;

      -webkit-animation-name: spin;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -webkit-animation-duration: 10s;
    }

    @-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        }
    }

    .social-content span li.fa-facebook{
      margin-top:4px;margin-right:10px;margin-left:2px;
      color:#3B5998;

    }

    .social-content span li.fa-twitter{
      margin-top:4px;margin-right:10px;
      color:#00aced;
    }

    .social-content span li.fa-linkedin{
      margin-top:4px;margin-right:10px;
      color:#007bb6;
    }

    .social-content span li.fa-google-plus{
      margin-top:4px;margin-right:8px;
      color:#dd4b39;
    }

             /*Responsive Awesome Style Social Share widget for Blogger By Ghanshyam Singh @ http://www.digitalhubinc.com/*/
        /*]]>*/
    </style>

    HTML CODE

    <b:if cond='data:blog.pageType == &quot;item&quot;'>      <!--Responsive Awesome Style Social Share widget for Blogger @ http://www.digitalhubinc.com/ --> 

    <div id="fb-root"></div><script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=408184442589211";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script> <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/><div id='content-wrapper'><a class='social-share' href='#'><span>Social Share </span></a><div class='social-content'><span class='circle-share'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-facebook fa-2x '></li></a><div class="fb-share-button" data-type="button"></div><div class='circle-sharer'>facebook</div></span><span class='circle-share'><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-twitter fa-2x'></li></a><a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true" data-count="none" data-via="twitterapi">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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><div class='circle-sharer'>twitter</div></span><span class='circle-share'><a expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-linkedin fa-2x'></li></a><script data-counter='right' type='IN/Share'></script><script src='//platform.linkedin.com/in.js' type='text/javascript'>lang: en_US</script><div class='circle-sharer'>Linkedin</div></span><span class='circle-share'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><li class='fa fa-google-plus fa-2x'></li></a><!--//--><div class="g-plus" data-action="share" data-annotation="none" data-height="24"></div><script type="text/javascript">(function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script><div class='circle-sharer'>gplus</div></span></div></div>
      <!--Responsive Awesome Style Social Share widget for Blogger  @ http://www.digitalhubinc.com/ -->  </b:if>
     
    In this widget , When you’re touch the block then block open and close showing rounded-angle fade effect.

    Widget Customisation 

    No widget customisation required but if you want remove any social button then you go to simply remove any social button section.

    Change font – 

    Add font file after <head> tag :

    <link href=’http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700′ rel=’stylesheet’ type=’text/css’/>

    If  you’re face any problem and bug then contact with us. If you like this widget then share this article and comment below here.

    Member since

    More from admin

    VipsPMV1.2
    1. Technology

    Affordable and Flexible Project Management Suite

    Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
    Written by
    1. Blog

    Conversation with Digital Publishing Experts [Google+ Hangout]

    Live Google+ Hangout on March 1 (no charge) This just in… Friday, March 1, I’m hosting a free, live, on-air Google+ Hangout with several of the featured experts who will be speaking at the upcoming Digital Publishing Online Intensive. Date: Friday, March 1Time: 10 am PT/ 1 pm ET RSVP & Watch live: https://plus.google.com/u/0/events/cenfhnb3pnkmcjlb7l43sbi47ro Got questions […]
    Written by
    Next
    No Comments
    Leave a comment
    Comments to: Responsive Awesome Style Social Share widget for Blogger

    Recent Articles

    Good Reads

    AMETHYST

    Unlock the Power of Gemstones: Discover the Perfect Stones for Positive Energy!

    Gemstones have been a source of fascination for centuries due to their unique colors, properties, and potential to influence emotions and energy. In addition to their aesthetic value, gemstones have been highly regarded by many cultures for their alleged ability to attract positive energy and prosperity. This article​ will discuss the ⁤arrangement of different gemstones […]
    Written by

    Worlwide

    VipsPMV1.2

    Affordable and Flexible Project Management Suite

    Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
    Written by
    AMETHYST

    Unlock the Power of Gemstones: Discover the Perfect Stones for Positive Energy!

    Gemstones have been a source of fascination for centuries due to their unique colors, properties, and potential to influence emotions and energy. In addition to their aesthetic value, gemstones have been highly regarded by many cultures for their alleged ability to attract positive energy and prosperity. This article​ will discuss the ⁤arrangement of different gemstones […]
    Written by
    bathroom-lighting-ideas

    Transform Your Bathroom: Unleashing Its Full Potential with Smart Lighting Ideas

    Bathroom lighting may not be a top priority for many homeowners in Singapore, but it can greatly impact our‌ experience in the ⁤space. To achieve optimal ⁤bathroom lighting, there are several factors to consider and tips to keep in mind when⁢ discussing lighting ‌concepts with your interior design‍ firm in Singapore. Why is Bathroom Lighting […]
    Written by

    Trending

    A Walk Through The Tucson Bead Show-665623f6

    Turquoise Gemstone Jewelry Collection – Rananjay Exports

    Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
    Written by
    Reliable Packers and Movers in Navi Mumbai-e7e8f17b

    Why have reliable packers and movers in Delhi NCR gained popularity in 2021?

    24 March 2020, the evening when the Government of India ordered a nationwide lockdown for 21 days. Because the deadly Coronavirus crept into the world and turned it into a sinking ship, put unforeseen pressures on all of us with its destructive intentions. Soon after, it turned into a giant monster. Omicron, the new variant […]
    Written by