Add A CSS Animated Share Button on Blogger

I saw this on Paulund, a highly recommended site with a good collection of snippets, i.e., a collection of different codes that develop small utilities, all of these being applicable to web design.

In this tutorial we will see how we can add as similar button with a really cool hover effect and four social media icons on Blogger with links to share the current page on Facebook, Twitter, Google+ and Pinterest. However, we can replace these social networks later with any other just by changing the links below.


Creating A CSS Animated Share Button

Step 1. From your Blogger dashboard > go to Template > click on the Edit HTML button.

Step 2. Click anywhere inside the code area and press the Ctrl + F keys to open the blogger search box. Type or paste the ]]></b:skin> tag and hit Enter to find it. Step 3. Just above ]]></b:skin> add this CSS:
.share_button {
width: 300px;
height: 50px;
margin: 10px auto;
.share_button ul {
width: 50%;
height: inherit;
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;
.share_button ul h1 {
margin-top: 9%;
overflow: hidden;
width: 100%;
color: #4889F0;
font-size: 18px;
text-shadow:2px 2px 2px #fff;
.share_button ul li {
position: absolute;
height: inherit;
width: 150px;
margin: 0 !important;
padding: 0 !important;
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
.share_button ul li h2 {
display: inline-block;
width: 32%;
height: 40px;
overflow: hidden;
margin-top: 5%;
cursor: pointer;
border: 0 !important;
.share_button ul:first-child li:first-child{
text-align: right;
.share_button ul:last-child li:first-child{
text-align: left;
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);

Step 5. And now let's go ahead and insert the HTML button in the template. The most common place would be just after <div class='post-footer'> - find the second <div class='post-footer'> and paste the following code just above it:
<div class='share_button'>

Share t

<a expr:href='&quot;; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src=""/></a></h2>

<h2><a expr:href='&quot;; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src=""/></a></h2>
<li><h1>his page</h1></li>

<h2><a expr:href='&quot;; + data:post.canonicalUrl ' title='Share on Google Plus'><img src=""/></a></h2>

<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src=""/></a>

Note: if you want to change the icons, replace the URLs in blue.

Step 5. Click on the Save template button and we're done! Enjoy ;)


  1. nice sharing :) after I'll try it on my blog, thanks :)

  2. nice :) keep post \m/

  3. hi , i am in trouble with this i want to remove those tabs from my blog please help me .....

  4. Thank you for the tutorial! :)

    But I'm wondering can I put it in the side bar?

  5. Hello! I totally love this and customized the Icons. I looked of the text you had us put in and I was wondering if there is a way to change the "Share this page" text or change the image of it? Thank you for posting this!

    Emily at

  6. thankx a lot buddy, but I would also request you that you also upload videos of your posts

  7. thanks a lot but I have a problem
    I have done it correctly but it does not shows a animated share button instead it shows them in a column in my every post just like an image ( no animation)
    pls help thanks

  8. Not Working on my blog


Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!