Add A Cool CSS Animated Share Button on Blogger

Add A Cool and Amazing CSS Animated Share Button on Blogger.A Best Animated Share Button on Blogger another Amazing addition into Blogger for those Bloggers who love to do blogging and always looking for different ways to find out  How they can Design and Give New Amazing Look to their Blogs.Easily Add A Cool CSS Animated Share Button on your Blogger blog.This Cool CSS Animated Share Button for Blogger is a more captivating addition in your Blog.
Since in previous Tutorials you have learn a lot of different ways for customizing your Blogspot Blog by editing your Blogger Template and Adding Code manually into it for different features in blogger.Easy way to Add A Cool CSS Animated Share Button on Blogger Blog.


In this Tutorial I will tell you How you can easily Add A Cool and Amazing CSS Animated Social Share button into your Blogger.So with this Animated Share button you can Link your Facebook,Twitter,Google+ and Pinterest share button into your Blogger.Later on , if you want to change those links with any other Kind of Links share button then you can also easily replace them.

How to Add A Cool CSS Animated Share Button on Blogger

Step 1: Go to your Blogger blog and then Go to "Template" then Click on "Edit Template" button to go to Template Editor.

Step 2:  Now in the Blogger Template editor Click anywhere in Template code and Press "CTRL+F", this short key will open a search box into your Blogger Template editor.

Step 3: Now Type This Code and Search it inside your Blogger template code,
CODE:  ]]></b:skin>  
 Once you will find this code inside your Blogger Template , Just Above  ]]></b:skin> paste this CSS Code into your Blogger.

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

Step 4: You have successfully Done the First Step now lets come to the Next step.Ok Now this one was our Animated CSS Code of Share Button , Now lets Add Share Buttons into our Blogger template.So the Most adjustable place for adding Animated Share button is the Post Footer , So Search for This Tag into your Blogger template.

TAG: <div class='post-footer'> 

There you will Find upto 3 or 4 These Tags ,you have to Just put your Code right above the Second Tag inside your Blogger template.
Share Button Code:

 <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/AVvXsEiT9bV1BsJqXyZt_wrJqWFK1UGzhWJplbXndh1vkgkDAGVHYfRTwnFDbXRc0Z_d8SP8hn1xbUlqJZ8X9vWuB0l6ybNmrmA_ffrnPnsLSsrduvKqnNvrCKoKGmsq1iaIaQ69trNzQs45be-x/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/AVvXsEjPfXYnEtgTn06iZPO0D7R4sUux2xD-pXqbtFb9imp_iNKAFuZM9SAYoAjlgrRO8KL1iOpciWvjbn6_RJ9DxUiuam1TKd7GMXKTQgAuZpq6MJq-MvY1goB-iZ21tv8xCZ8QCnvrNDDLEIoK/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/AVvXsEjjaMyh_t80ubPJoi_c_BiKXzG7DxCuh0ZCKC_bZ-xloIjkLwB5Zo8mmd9oCL_N88qKwoIAguul4mh5WFOLVy_ExLV8JUorzAA7Ji_ZPayRsvVrQwffD_tls7CCmDDVFyWSd-qWin3K9O3o/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/AVvXsEhdURvyY_MCWyj9Sk4Q919LJawXQYgGjbmiNkj_2vRwf-U4uNNrCGbBbmSwS8Yc9i7OIM-KATLAiPULPbJQMMWEeOVldLyHs298U6kDDydBjNPjz-kqsQV-eHPMRnAZC2vJoFZNU8NroCCp/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>

</div>

QUICK NOTE: The Above Red Highlighted Link are the Icons of your Share button inside your Blogger.If you want to change these Icons then simply replace the above Icons link with your Own Icons.

Step 5:Once you have successfully Done All the Steps into your Blogger , Now Click on "Save" button to save these Settings.
Now open your Blog and their Will see An amazing CSS Animated Share Button in Your Blogspot Blog.