Awesome 3D Social Buttons with Rotating Effect for blogger

This Social buttons are awesome with nice 3D rotating effect. Full css were used in this trick, when you move your mouse cursor over each icon it rotates spin of 360 degrees an also spin back when cursor is removed. You will able to see nice hover effects on these buttons

These Social Buttons Includes

Facebook

Twitter

Google+

Pinterest

Feedburner reader count

Live Demo

How to add 3D Social Buttons with Rotating Effect for blogger?

1.  Go to your Blogger Dashboard > Layout.
2.  Click on the 'Add A Gadget' > HTML Javascript.
3.  Last step copy and paste below code in HTML Javascript Gadget.

<style>
#social a:hover {
background-color: transparent;opacity:0.7;
}
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<center>
<div id="social"><a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQa3Y3fIq6VR4FQieKT5taSCX3Uc98XSMZfsBbzr24og8WGLlMWfh2t40AYEwFfiQYBt07SAPEHrtaO8wbtU0XR2lzTZSQ-9isH1SrzNWIhuWtcsJYzH4K-Qknm7YpuBGorJoP7LdTS5v/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja9y72myAVKf_z0Ap-eokv2IxQrSsH6evpU5W8QpKNxAE8fLKG6OHJiqMxLrDT0A_qgmz1lDE9X4DpoSAwUNOLJZZb1Z-hiRvZs0MeLai8VgVSxO_Qesx3XBwVq0s0-FA5a7NOyQkMBynM/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8-6KbBiZDtz_a6SsazdpKx2SUKRFGAHRZSGAoI7tT4wwYdNm-DlWJvvLFmZyUlw4Ey71Br_6nHRJGPR_qklPvoNdKZsHrm3sf7dFAQN-yoHwfOEoE8Vhav7K6vC4tKeoXlCmfUXbfOiD6/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJzh_68TmJXD4C4Ctlh7bKA7kGB2GxyhAAr-Sn55cd3vyBwK5ZFQd4LN07OAglsZo1JnVCoL0jdNJO7SvWE0JPL5HJNLzLS3A8KYmj83DKU_xPxeRyjgnbDZRVgxdYAnEygJk9C8EGasP9/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHU82M6QGILKa6bm3n4REfft5AAvK5QAtduCROGaoNM-F0z5zgkWMY91oEZh2izrFMiygdv07BVdtsvBBX8HNtLoHLrIflrZ2AiC2j4fuS1dUKcZquy4Zpmk4jaSW39B8xfSZ03BsXOSGL/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivIjp5IphJUv1Lr0FOWAD7gRD2pzc23vpufYi2uOv9wj5yUfBJJROzhpuZL6TnZZTupvvv0ox4QM-xijNsjA-g_t3gA1gkZ8_E3_tMSyWImddipefW1qZpmRd40k7rnafAJG9Llp1q56_o/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div>
<br/>
<a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="Beautiful Blogger Widgets" src="http://feeds.feedburner.com/~fc/beautifulbloggerwidgets?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
</center>

Note: Replace following with your URL

YOUR-FEED-URL-HERE
YOUR-EMAIL-RSS-URL-HERE
YOUR-FACEBOOK-PAGE-URL-HERE
YOUR-TWITTER-URL-HERE
YOUR-GOOGLE-PLUS-URL-HERE
YOUR-PINTEREST-URL-HERE
YOUR-FEEDBURNER-URL-HERE

If any problems occurs please Comment