Add CSS Elegant Share buttons for Blogger

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.

Blogger is now testing out a new Social Sharing icon set made up of E-mail, Blog writer,Twitter,Facebook and Search engines hype control buttons. The set looks simple and stylish with some cool mouse over effects. These Sharing buttons are now available in your regular dashboard. These control buttons are created of genuine CSS and look incredibly stylish. They have awesome float impact and are very light too. You can add these buttons under every post of your blog and increase the user interaction in your blog. Social media share buttons help us to get our well-written content shared on different public networking systems quickly. When a part of material get distributed more and more times on different social media platforms, it helps our content to get more links, free traffic and social signals which increase the value of our content in search engines. 

Add CSS Elegant Share buttons for Blogger

Step-1 Login to Your Blogger Dashboard.

Step-2 Go to Template > Edit HTML.

Step-3 Find  the tag.

 ]]></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.