CSS Share buttons for Blogger

0 Reviews Post a Review Posted by: Unknown Published On: 07:49 Avaliability Product Avaliable For Sale

widget

Add to Cart

View Cart Checkout

Hello guys,Social interaction is very important today for Bloggers because of the ever increasing number social account users. Now it has become a great way for bloggers to increase their blog's visibility.
Now I am posting css share buttons for blogger. These are made in pure css without any images and is extremely light. It is colorful and also have some cool effects.

You can put this under each post to get likes for the post

Adding The Code
Paste the below code just after the second occurrence of  <data:post.body/>

<ul class="post-social">  
 <li class="facebook">  
    <span class="social zocial-facebook"></span>  
   <div class="fb-like" data-layout="button_count" data-send="false" data-show-faces="true" data-width="250">  
 </div>  
 </li>  
 <li class="twitter">  
    <span class="social zocial-twitter"></span>  
   <a class="twitter-share-button" data-via="BloggerSizzle" href="https://twitter.com/share">Tweet</a>  
  </li>  
 <li class="googleplus">  
     <span class="social zocial-googleplus"></span>  
   <g:plusone size="medium"></g:plusone>  
  </li>  
 </ul>  
 <script src="https://apis.google.com/js/plusone.js" type="text/javascript"></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>  
 <br />  
 <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>  
 <style>  
 @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;  
 }  
 </style>