How To Add CSS Social Sharing Widget to Blogger?

In today’s tutorial, we’re going to take a look at how to create social sharing buttons with CSS and HTML. As you know, each social media platform has it’s own sharing button, that use an HTML tag with a few attributes and JavaScript. If you want to share something with the world, it’s a wise decision if people also quickly fall upon the discuss control buttons.

I am fairly sure there is a important connection between visibility of share buttons and actual shares of your posts. The widget is light in size and looks elegant. In every post after scrolling the widget will pop up at the lower bottom of the screen. The gadget contains four public discussing control buttons – Facebook or myspace, Tweets, Google+. 

There is a close key too to close down the floating share buttons. you can add more if you like or remove the one you do not want and add yours. All you need to have is fair knowledge of HTML and CSS. You can get the program code of any public networking share button from the well known public networking platform’s website.

Other Social Sharing Widgets

1. Social Sharing Widget with Counter for Blogger
2. Below Post Title or Post Footer Social Sharing Widget
3. Below Post Responsive Social Sharing Buttons For Blogger
4. Responsive Blogger Social Sharing Buttons with Counter

How To Add CSS Social Sharing Widget to Blogger?

Social Sharing Widgets are always been my favorite blogger widgets. Its too important that you have installed any social share widget on your blog as it really helps users to share your content on social network sites and though it helps as building social network back links and increases your blog SEO Score. Let’s start the tutorial and learn How To Add CSS Social Sharing Widget to Blogger?

Step-1 Login to Your Blogger Dashboard.

Step-2 Go to Template > Edit HTML.

Step-3 Find below code by pressing ctrl+f

]]></b:skin>

Step-4 Paste below given code just above ]]></b:skin>.

 @import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*=”zocial-“]:before {
  font: 2.5em/2em ‘zocial’, sans-serif;
  color: white;
  line-height: 2.2;
}
.post-social .facebook {
  background: #3B5998;
}
.post-social .twitter {
  background: #4099FF;
}
.post-social .googleplus {
  background: #db5a3c;
}
.post-social .social {
  float: left;
}
.post-social .zocial-facebook {
  margin: 0 15px;
}
.post-social .zocial-twitter {
  margin: 0 25px;
}
.post-social .zocial-googleplus {
  margin: 0 25px;
}
.post-social li {
  min-width: 180px;
  width: 210px;
  height: 80px;
  cursor: pointer;
  list-style: none;
  text-align: left;
  float: left;
}
.post-social li:hover [class*=”zocial-“]:before {
  opacity: 0.5;
  text-align: right;
}
.post-social li:hover iframe {
  opacity: 1;
}
.post-social li iframe {
  margin-top: 30px !important;
  opacity: 0;
  transition: all .3s ease-in-out;
}
.post-social li .fb_ltr {
  margin: 30px 20px !important;
}

Step-5 After search for <data:post.body/> code.

Step-6 Paste the below given code just below <data:post.body/>.
* You show more than one <data:post.body/> so make sure that you have selected the right code.

    <ul class=”post-social”>
      <li class=”facebook”>
          <span class=”social zocial-facebook”></span>
        <div class=”fb-like” data-send=”false” data-layout=”button_count” data-width=”250″ data-show-faces=”true”></div>
      </li>
      <li class=”twitter”>
          <span class=”social zocial-twitter”></span>
        <a href=”https://twitter.com/share” class=”twitter-share-button” data-via=”Rushtips”>Tweet</a>
      </li>
      <li class=”googleplus”>
            <span class=”social zocial-googleplus”></span>
        <g:plusone size=”medium”></g:plusone>
      </li>
    </ul>

    <script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
    <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 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”;
      fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘facebook-jssdk’));</script>

Step-7 After save template and you are done.

Conclusion: