Pure CSS Elegant Share buttons for Blogger

Posted On // 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.

13 comments

29 September 2013 at 10:03

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.

Reply
Ghost Rider Author
1 October 2013 at 04:52

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 !

Reply
KUlwant Author
2 October 2013 at 05:41

Very nice and colorful blog and good design

Reply
vasant sakpal Author
5 October 2013 at 11:42

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

Reply
8 October 2013 at 08:06

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!!

Reply
14 October 2013 at 07:01

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

Reply
Nitish Author
6 November 2013 at 09:05

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

Reply
Nitish Author
8 November 2013 at 06:57

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

Reply
Anonymous Author
15 November 2013 at 06:49

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

Reply
Anonymous Author
16 May 2015 at 07:40

Nice

Reply
Richard Chola Author
28 July 2015 at 06:55

great

Reply
Hasnain Naeem Author
28 November 2015 at 23:01

having bugs, please update.

Reply
Anonymous Author
10 January 2016 at 23:01

give me this script cyberlikes.com

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Pure CSS Elegant Share buttons for Blogger |