TOP NET GUIDE

Hello Friends !  I am back with yet another great post on how you can add some cool buttons under every post of your blog.......

These buttons are made of pure CSS and look extremely elegant. They have cool hover effect and are very light too. You can add these buttons under every post of your blog and increase the user interaction in your blog. The demo of the same can be seen just below.

 Adding these cool buttons We have two steps compleate these...........

Step:1 Adding the CSS :

We would have to add the CSS and for that so go to Blog Title → Template → Edit HTML. Search for the tag ]]></b:skin> Add the 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;
}


Now step1 completed .

Step:2 Adding the HTML

Go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for <data:post.body/> code and paste the below given code just below <data:post.body/>.