Monday, July 30, 2012

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

Author: Gagan Masoun
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

IconIconIconIconFollow Me on Pinterest

spice up your blog

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.

8 comments:

  1. When replacing The Yellow Color Lines With Your Social Profiles and Feed URLs. You must need to put full url like: http://www.facebook.com/trickyplanet.in
    Otherwise without http:// some of the site will not work. I have checked it personally.

    ReplyDelete
  2. Images or social icons not showing.. Bad post

    ReplyDelete
    Replies
    1. I checked this widget again, and Its working fine, Please be sure that you have properly changed your Social profiles URL's correctly as mentioned above (Yellow Color Lines).....

      Delete
  3. Hi! Is the RSS Email URL address different from the RSS URL address?
    Thanks so much!

    ReplyDelete
    Replies
    1. Cool, so how do I find the Email one? I signed up for Feedburner and got my RSS address, but I don't see the email one. Please can you help? Thanks! Elizabeth

      Delete
    2. Go to Feedburner Account >> Publicize >> Email Subscription >> Here you will see two type of codes. one is Subscription Form Code and second is Subscription Link Code. This Subscription Link Code is your RSS email URL. :)

      Delete