Pure CSS Elegant Share buttons for Blogger

Dhiraj Barnwal Sunday, 29 September 2013 13 comments
Share button Blogger
Hey Folks ! After a month without posting and digging the books for my exams 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.







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.
Labels:
Google+ Pinterest

13 Comments to Pure CSS Elegant Share buttons for Blogger Post Yours! Read Comment Policy ▼

I would prefer to thank you for the efforts you might have created in writing this article. I’m hoping the same best get the job done from you in the long term as well. In fact your creative writing abilities has inspired me to start my personal Blog Engine blog now.

Great css sharing widget. It looks good on my blog. But can you please tell me how to change the width and height of these boxes ?

Thanks !

Very nice and colorful blog and good design

Hi, your shared css and HTML works for me. but I am unbale to continue. I need more button like shareholic which I currently used atleast with 5 to 6 top sharing option. Are you planning for doing such a thing in future?
Once again thank you verymuch for sharing.

Out of topic :- I like your domain name ( allbloggertricks) sounds good and interesting

Hey,
Can you make a post on how you put the bottom Share Box, when reader completes its post it just popups from bottom! I really liked it and want it.. with your new social share! Please make a post.. Thanks!!

Hey is this possible to place the whole code in a html widget instead of placing it to template html. Will it work fine?

cool one. but i'm not getting the fb,g+ and twitter icons..in my widget..help please.thank you:)

For me the twittr button isn't appearing..please help.! Anyways great and cool widget..thanks a tonne.:)

Hey bro!!!! need your help.
there is going something wrong with my template and i don't understand the problem....
When i add a widget(for example facebook slideout widget) into my blog then my blog's dropdown menu stop working means it's not drop....so please give me some advice.........

give me this script cyberlikes.com