Add 3D Social Buttons With Rotate Spin Effect To Blogger

Today, I am back with beautiful 3D Social Buttons With Rotate Spin Effect For Blogger Blogs. You can see live demo on my Beautiful Blogger Widgets. These buttons created with the help of useful CSS trick. With CSS rotate when you place your cursor over each icon they spin 360 degrees, they spin back 360 when the cursor is removed.

You will see hover effect on these buttons.These buttons are related to your RSS feed, Email RSS, Facebook, Twitter, Google+, Pinterest and Feedburner reader count.

Thanks to Hitu for making this beautiful widget. Please ask via comments if you are facing any problem.

Live Demo 3D Social Buttons With Rotate Spin

How To Add 3D Social Buttons With Rotate Spin Effect To Blogger?

1. Go to Blogger Dashboard > Layout.

2. Click 'Add A Gadget' > HTML Javascript.

3. 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/AVvXsEhzA6NpqruWICGl9UpJbEcOUZGd-HxCX9Ufz7kZ7fA_RgYd2Z4g88AbEkv72Ou7LDOiWQlAnuGLMdHP2-aysxPQyCPhsAG6WabIqajqteSt0o4YIZMiwTWzpa6ZVpzV1xSgccN5trWYJwgB/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/AVvXsEgZocXjAT0TQC8Cl0IL0PhmzCjCVH_IvO59if3Hw_-HHAxrfRS18OlFj9Jn7AmI7MszX10BcL_URWyutQuV08v-8xBh9NZ_PdYFwyIsn7YzQu2wXBg4HA40kJzauCrIiGNN0kVZ3B3q0y_1/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/AVvXsEgxyha7KcnCR6rtcFRHBW2adWa-kndk_Br9KIuDVxLprfZja6TkaKw0uYMivvYZfix94yGPV96tgEZcuB0toV5mpTdyMY4IlHpXGj5881QBr-hcTILUrZiyel8OteHWtrJmRgtQrKYiO_Z4/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/AVvXsEjV5GgaJkht_4x9Nt33GOF6iR7R6ZlcsFiq997gJIz3DKFRU4uZdyVmwuGcbMd4ZT5pjvM0wcar_FKTqA1ThSaqLG48QXr-pGa4IkWIJ3W115Pk2CwCLpOVeCs2cUwDu1crW3OjC5oH271l/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/AVvXsEidGrvF_JusG4NgXi9Nn5AAJJa1Yj4ZYu9SVLCIDerKHrDuu7v4kfCpxVx-7dxqkRAfwAaaK7mroyseHh_ThgP1sXZq_e7J9mWmoPsEjehgzumc5TulyO49oqtu98nB-08Eibw-jqqtR-k9/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/AVvXsEhNdYf1t5klyYozkg-bAga4k8yBVSWxGAXvGDU8wgrNF8cIj5KyDVIk750EdomEA7q9qnO6tm1n1d6LcyVlbM9e7qlPJnLPTJqFfnxFdx1r9nQVtzrFqjKLm4OZfJkx7-NEZcmlVH6MO6_K/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div>
<br/>
<img alt="All-coder" src="http://feeds.feedburner.com/~fc/YOUR-FEEDBURNER-USERNAME?bg=ff9933&amp;fg=000000&amp;anim=1" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0976563) 1px 1px 5px; border: 0px; box-shadow: rgba(0, 0, 0, 0.0976563) 1px 1px 5px; padding: 5px; position: relative;" />
</center>

Note: Replace the following sections with your social profiles and feed URLs.

• 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-USERNAME

4. Save it.

That's it you have a very cool subscribe section on your blog. Thanks for reading it.