Add A Stylish CSS Animated Share Button On Your Blog

In this post, I will show you how to add this very beautiful CSS animated sharing buttons on your blog. It includes 4 social media sharing buttons, i.e, Facebook, Twitter, Google Plus and Pinterest. You can remove or add these buttons according tp your need. These diverse and attracting sharing buttons allow your readers to share your post with their friends. This widget is very useful for gaining traffic and also increases the beauty of your blog.

See the Demo Here

• Share t

• 

  

• his page

• 

  

Add Cool CSS Animated Sharing Buttons in your Blog

Step 1 : Open your blogger dashboard. Go to 'Template' and click on 'Edit HTML'.

Step 2 : Click anywhere inside the code and using the keys Control+F, open the search box.

Step 3 : Type the following code given below and hit enter to find it.

             ]]></b:skin>

Step 4 : Copy and paste the following code just above it.

             .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 : Now again search the following term in the search box. You will find it twice. You have to look for second one.

<div class='post-footer'>

Step 6 : Copy and paste the following code just above it.

             <div class='share_button'>

<ul>
<li><h1>
Share t
</h1></li>

<li><h2>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Jlf9FE4Z50JTGGHsEe5gpVN8KQqdQbceOyEIiK-Ta8IqK5LR_670iMGh_yULYseNoxu6HKkWJl7i5Mrd6gpNqYvz-n9RHI71P0UxKr4NzInOj3GbvHUL3pVUpCBuxgH4F-tdG9X1UzvS/s1600/Facebook.png"/></a></h2>

<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCgLl7nnC67wMOKUYJSCP6BpAg3XJR-QgF_1mj-x_Yvxqti2boZZGqdzWZfaDH5TD5cLXgsvLjnpFm4n4IrVdriBuils0m1VqIzmZ2Cs2k4ofVjO81Y4rDsXNRrSRcd7tO_z6c9jd_VHyP/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1>his page</h1></li>

<li>
<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi02qBrAnPW4fdJlZLLlERSwd27xtm5VsNQvEoSzCzXs5aNkGpgVmuAT14_3Xyr-Xuowztr74AVDF2pvCvRQ0nxAuG_mQxDsUZXL2TFnv5KUlR7OYz_oez74GR6iK-X1SngnPyOeXwClb2Z/s1600/Google-plus.png"/></a></h2>

<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;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2LtLZaWS3bd-BSiingoNqELFqIzRYV5YnS6cM9bcnDqxFYYoawz2vNrcjymBJWSaEmz7N3Bq0wFB7Z0Qv1WBB_6EjddG44JW6jt2vcdOCXSJMlblrw1kpFz5YdyauB6Wl_CONfYOHb6LM/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>

</div>

Step 7 : Save the template and you are done with it. You will now see a css animated sharing button below your every post.