CSS Animated Social Share Buttons for Blogger!!!

Social sharing buttons are those buttons of a site by which visitors can share its post on several social networking site. By default blogger has a few social sharing buttons located at the bottom of each post. But these buttons are not effective, because they are not attractive.

• Related Post: Open Heart - Social Sharing Widget for Blogger

Basically social sharing buttons becomes more effective when they are attractive. And today I am gonna share a CSS animated sharing button widget for blogger. This is a very attractive social share widget with a really  cool hover effect. This widget includes four social media icons, these are Facebook, Twitter, Google+ and Pinterest. Lets have a look at the below demo...


Demo:--->Mouse Hover

• Share t

• 

  

• his page

• 

  

Tips: Now the question is which place is the perfect place to add this widget. You can add this anywhere in your blog. But my personal recommendation is to add this widget in the Post Footer. And here I am showing how to add this widget in the Blogger post footer.


Adding CSS Animated Share Button to Blogger:

• First Log Into your Blogger Account and go to Dashboard.
• Then click on Template option and click on Edit HTML button. You will land on the HTML page.
• Here in the HTML page find ]]></b:skin> tag and Paste the following CSS 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); }

• Then again find <div class='post-footer'> tag here. You may find this tag several times. But you need to Paste the following code just Above the Second one.
<div class='share_button'> <ul> <li><h1> Share t </h1> </li> <li><h2> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qivSc5rd2rqIR_Mzt4c85leIoArlFTxuzW9YPoB0X50ZfnuKOuA4wGdmVfVJoY57VZrrVZyYqZVjJ97py5zk6cGA6lvH5SlIk162bBFukqB-_K6XellxlFQxFQFNkQxmGUoVQ_ZMAvmZ/s1600/Facebook.png"/></a></h2> <h2> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6orCb0M4YM5EiF8yqZDgJTf8qmdk7PZ1zRVgGjwhNROYhRDR3m4z_z-a9ZL4AU7jPFVDetnuMpnyEQTc5_pwiPJRanjErOwTDNPMZc7hVTQKnfcvRysjWv3ctUXHGznReR4akimkEw4q9/s1600/Twitter.png"/></a></h2> </li> </ul> <ul> <li><h1> his page</h1> </li> <li> <h2> <a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha45zJTCWZnugx0RzCOYA0dSP5paJS3T_ymVfDCZ-8czGajHUQxwWsMNjok_j_OZmFgz4Q7HQpyc4PmX094p1kQxTwolOlNCoYrcdFaA2NRpm5ftObGnkUsj0s7a-LtBFkUQxuiXFRh2WB/s1600/Google-plus.png"/></a></h2> <h2> <a href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjgXTcobnaKmOcLAQouzrTJeJqYaHW_gBQ-TnPK8VF7VLY_OlmZmgCwYhqx3R0uuxeejDZcGCnf6c5RgxeZVQHtdLG_dpzCaUpZ9TjjPohhNukGrQXmxNA1Ubr867hG_McDZCMX8NcOxwJ/s1600/Pinterest.png"/></a> </h2> </li> </ul> </div>

• Now click on Save Template button to add this widget.

That's it. Now view your blog and you will see this social sharing widget in your blog.

Stay with www.iTTimebd.com for more IT related Post