3D Social Buttons With Rotate Spin Effect For Wordpress And Blogger

Today, I am back with beautiful 3D Social Buttons With Rotate Spin Effect For Wordpress And Blogger Blogs.You can see live demo on my Blogs Daddy. These buttons created with the help of useful CSS trick.With the 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.

Live Demo 3D Social Buttons

Add The Social Icons With Css Effects To Your Blog

Wordpress Users

• Go to Wordpress Dashboard -> Apperance -> Widgets
• Add A text Widget to Your Sidebar and Paste Given Below Code In It.

Widget Code Here

<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"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuGd527cE0rD83VFuka88c_BQtNBN2I0G2UC2gUrhU62DzeVk-7OHFg1bN5RNbd6PwJY9_sNooRLvjR6qeJY5HAZCPUqJz7VFIE_UZ7IUvnPDpIJfrg7PfgiK0sC0EroI5Sp2Lx7m2MLdQ/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <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/AVvXsEjP63u-PxNnfZ_iChmQsm7MWuK9oUkVB60Oz-kKnkBJ0WdpG2lD7Gkq6Kj_VgpOmSOvOJAPWo5Gkm2yU890K3q1jDTJAYkiPSZG3pQwVVGK4UvUP7Bsh3Q0vF5JyX9UMc2D5nm1L2iYKyLn/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <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/AVvXsEjSHTT0japXBNv2C8i57jwm_dl3VyB_yKzsbeqrxvrz3epkJeEIkHjz52-aASZKYL5Z22fwTvTnomjqEJ4k1y_zazl0gV6AGHZLBiDGl23ghH9V_P0P3-g3pYjjcIPHw9zEBhX4IPgcG0ED/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <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/AVvXsEjTqmwlDH-JG8h75oW88cGg7UqzyiGTNWzDwZXNvTDYxHaNnbQj1AXDy45CV6kLJv6qZBHwxmuIVu1We9Cb_d2QwvmrtMWgQ4-a4friHnVBvB8zdJiNID1j__c7vPyGk4vXznfKu6vUYieA/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <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/AVvXsEi1eFnTHf4WS2qhkYIaSCRqNQACv9AL3F1k7K9yVXqp_AQEtrtAoPjbFQ9swuECbJF8SN3KA1PUC_52ZocOkkCqV96z-Pmg133RdtyMzzgohfH8hrAfpR37idpRaH2ryA_S-N9xvHN0EWKs/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <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/AVvXsEjkOqpBUCwWhFdCgvDJTZ7YOIMayH7wVpF4Fam4YAmdFTXbLgFlxEx8vYDGjPn_uTspbpkA0Ka5A4KRvrsCOQmXJfTMuFLcyRMAnFMzkFYN7clkK_25oist_Ziv_jJz6aftfyh7wNrPM37O/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Note - Replace The Yellow Color Lines With Your Social Profiles and Feed URLs.

Blogger Tutorial

• Go to Blogger Dashboard -> Layout -> Click 'Add A Gadget' ->HTML Javascript
• Copy Given Below Code and Paste In HTML Javascript Gadget
• It's All Done Save Your Gadget

Widget Code Here

<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"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuGd527cE0rD83VFuka88c_BQtNBN2I0G2UC2gUrhU62DzeVk-7OHFg1bN5RNbd6PwJY9_sNooRLvjR6qeJY5HAZCPUqJz7VFIE_UZ7IUvnPDpIJfrg7PfgiK0sC0EroI5Sp2Lx7m2MLdQ/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <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/AVvXsEjP63u-PxNnfZ_iChmQsm7MWuK9oUkVB60Oz-kKnkBJ0WdpG2lD7Gkq6Kj_VgpOmSOvOJAPWo5Gkm2yU890K3q1jDTJAYkiPSZG3pQwVVGK4UvUP7Bsh3Q0vF5JyX9UMc2D5nm1L2iYKyLn/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <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/AVvXsEjSHTT0japXBNv2C8i57jwm_dl3VyB_yKzsbeqrxvrz3epkJeEIkHjz52-aASZKYL5Z22fwTvTnomjqEJ4k1y_zazl0gV6AGHZLBiDGl23ghH9V_P0P3-g3pYjjcIPHw9zEBhX4IPgcG0ED/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <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/AVvXsEjTqmwlDH-JG8h75oW88cGg7UqzyiGTNWzDwZXNvTDYxHaNnbQj1AXDy45CV6kLJv6qZBHwxmuIVu1We9Cb_d2QwvmrtMWgQ4-a4friHnVBvB8zdJiNID1j__c7vPyGk4vXznfKu6vUYieA/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <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/AVvXsEi1eFnTHf4WS2qhkYIaSCRqNQACv9AL3F1k7K9yVXqp_AQEtrtAoPjbFQ9swuECbJF8SN3KA1PUC_52ZocOkkCqV96z-Pmg133RdtyMzzgohfH8hrAfpR37idpRaH2ryA_S-N9xvHN0EWKs/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <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/AVvXsEjkOqpBUCwWhFdCgvDJTZ7YOIMayH7wVpF4Fam4YAmdFTXbLgFlxEx8vYDGjPn_uTspbpkA0Ka5A4KRvrsCOQmXJfTMuFLcyRMAnFMzkFYN7clkK_25oist_Ziv_jJz6aftfyh7wNrPM37O/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/BlogsDaddy?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

 Note - Replace The Yellow Color Lines With Your Social Profiles and Feed URLs.

Visit your blog and enjoy blogging.Credits goes to Paul Crowe (spiceupyourblog.com) for making this beautiful widget Ask via comments if you are facing any problem.