Add A CSS Animated Share Button on Blogger

In this article we will learn how we can add as similar button with a really cool hover impact and four social networking icons on blogger with links to share the current page on Facebook, Twitter, Google plus and Pinterest. However, we can replace these social Networks later with some other just by changing the links below.

Make A CSS Animated Share Button

Step # 1: Login to your account and go to Template > Edit HTML

Step # 2: Find the ]]></b:skin>   tag 

Step # 3: above ]]></b:skin> tag 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 # 4: Now let's go ahead and add the HTML button in the template. 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'>
<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/AVvXsEjKgkqBbmUN0icrGtXZL4gu8ku1VMUzJ28zlbP4TyZta9H8WEZFJghNPCc7Z7hWr3bFyXIJ73n8fyqhMhgjOs4ukUMyMJf_PhWUR_I5-QLWh-Qj05iLCi8bmAapDqxq9ieXQA-cnQViaaU7/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/AVvXsEjVnYN1_caO1MddU7yPrY6X9AqA3qD1yPlD_PVqaIxOCqYA5kX_6eMIArva21L7LIrRgi15uRB0z9ZhJsEqiNOVUuP6qMI-3h-DkCCWl9SIRud4_yOESr-qP1xU3ujE3OygMZZ-flzZpq2o/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/AVvXsEjslXrOdAJ3Mn7droONDR7j12sZCMiSheEwCPar0BFjcH9jgggAqX9d98s0MysboYOhAKkhBCA_kz1VpvtE4NQAHj0_cwV7IBG4JO8k2semQAAdCcDaor-2NpLMeSBX9_Emwvs0iw5h4pmB/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/AVvXsEi9gochBtZaaqnrydUUv3fObAXujHWo3bdI-3F4CYRqpydkulxyQFoxlj3CpzPtHqUAg9f68hx4896Vemz6fzCPAab-pK70g3PQ9t-dNyVR7nzxCU9K9-2KzelPCevt1pQ133cnEpoQV90o/s1600/Pinterest.png"/></a></h2></li></ul>
</div>

Important Note; if you want to change the icons, than replace the URLs in blue.

Step # 5: Save Template.
Done!

Share on Google Plus

About Unknown

My Name is Usman Ali and i am SEO Consultant, Online Mentor who has been working since 2012. Blogging is my pession. I can help you in Make Money Online, Blogging, Teachnology, Tips and Tricks, How to and Specially SEO Related issues.