Pure CSS Elegant Share buttons for Blogger
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.
After seeing the demo in order to add these buttons under every post follow these steps.
Adding the CSS
First of all 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;
}
Adding the HTML
Now we have to add the HTML.
First 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/>.
NOTE : There maybe 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>
After adding the codes save the template.
You are done now. Now you and your visitors can see these awesome and elegant pure CSS share buttons on your blogger blog.
