Add A CSS Animated Share Button on Blogger

Add A CSS Animated Share Button on Blogger

Let your readers to show their love by sharing your blog post with friends and connection on social networking sites.Inthis tutorial we will see how to add CSS animated share button on blogger which contains 4 social media share button/icon(Facebook,Twitter,Google+and Pinterest)which cool hover effect Also you can replace social network by changing the links provided below.

HOW TO ADD CSS ANIMATED SHARE BUTTONS ON BLOGGER
Step1:Go to Blogger Dashbord Template Edit HTML
Step2:Press CTRL+F to enable search box,and search for ]]></b:skin> tag.
Step3:Just above ]]></b:skin> add following code.

.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);
}

Step4:Next,Search for the <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/AVvXsEgMHLRmxwI7FH0dgDBZP2FeHwgZ9OMN6Ts44LPGfpmHlTIzTtCdSDmdN1BHAQdfyWWVJbegvpbhQyKgLhP1qntTDteGWXcCSaeWYD_xPr7g9l2v_j9hm3P3R0upUC8014BEOgKmAf4YJLh3/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/AVvXsEjzuvYqr_EHjboVvo_kpSNUAJkC6zAE1ah4oH-9DrAEoYp9GccswlSYdzWGkaWc155W8CutgEoFua6NzumxaJ98KPxOr-9xaT8QdMNtc8KsTSAsG8tMriTegEoJE_IazqkiCjPR2GbZ5SZK/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/AVvXsEhPaW6iX3W2KQgwNgxZMO2ML4Zch4-mAkCe2qC1iTYr34ENNQ1iVZApjZuV0EiKRNmwWG2goN1HLir26BMguIqYtnHZ5BI4mOYv01DrAuLal4mG4UKv5iUO1Yh1tS_iO7NWZqP-UZW4b71w/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/AVvXsEj-YKLfseFyszBqS0h8bIsLgYxRDesxJ6mQdYG-yh-FpicKs8v5kidLUElM_27jmeW7MkYeC54qj6PhVU96p_3YJZSRUOiUIdgtndrI02UExDXqiMRS6zeyDsseaf8MU35f-4B4VM0VtYVh/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>

</div>

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

Step5:Click on the Save template and we're done ! Enjoy;)