How To Add Rotating Hover Effect Social Icons in Blogspot or WordPress

Today I am going to show you How to Add Rotating Hover Effect Social Icons in Blogspot or WordPress. This is a simple piece of code. No need to modify the HTML of website or blog. Just add the code in Sidebar and get a beautiful Rotating Hover Effect Social Icons for free. The social Icons contains RSS Link, Email subscription, Facebook, Google Plus, Twitter and Pinterest. You can change some basic codes to modify the looking. A good looking eye catching beautiful Social Icon widget will certainly catch the visitors eye. They may subscribe to it. And certainly will raise the direct visitor from social sites.

See the DEMO of Rotating Hover Effect Social Icons

Steps to Add Stylish Rotating Social Icons in Blogger

Steps to Add Stylish Rotating Social Icons in Blogger:

  • Go to Blogger > Dashboard
  • Click Layout
  • Click Add Gadget and select HTML/javascript
  • Copy/Paste the following code

Steps to Add Stylish Rotating Social Icons in WordPress:

  • Go to WordPress > Dashboard
  • Click Appearance> Widget
  • Drag and Drop Text to the Sidebar.
  • Copy/Paste the following code

Code:

<style> #social{border:0 px!important} #social img{-moz-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;transition:all .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)} #social a:hover,.rmlink1 a:hover{background-color:transparent;opacity:0.6} </style> <center> <div id="social"> <a title="Rss Feed" href="http://feeds.feedburner.com/DhakaResults" target="_blank"> <img border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Rss Feed Icon"/> </a> <a rel="nofollow" title="Get Free Updates Via Email" href="http://feedburner.google.com/fb/a/mailverify?uri=DhakaResults&amp;loc=en_US" target="_blank"> <img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Email Icon"/> </a> <a rel="nofollow" title="Facebook" href="http://www.facebook.com/resultsAndcircular" target="_blank"> <img border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Facebook Icon"/> </a> <a rel="nofollow" title="Follow Our Updates On Twitter" href="http://www.twitter.com/shemul49rmc" target="_blank"> <img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Twitter Icon"/> </a> <a title="Follow Us On Google+" rel="author" href="https://plus.google.com/101611663127869024919" target="_blank"> <img border="0" style="margin-right:1px;" src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png" alt="Google+"/> </a> <a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/shemul49rmc" target="_blank"> <img border="0" style="margin-right:1px;" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /> </a> </div> <br/> </center>

  • Replace DhakaResults with your feed name
  • Replace http://www.facebook.com/resultsAndcircular with your Facebook Page Name
  • Replace http://www.twitter.com/shemul49rmc with your Twitter Name
  • Replace 101611663127869024919 with your Google Plus Id
  • Replace http://pinterest.com/shemul49rmc with your Pinterest Name
  • Now Save your Gadget

Ok, Its Done !

Code Backup

If any problem, let me know.

Check Also

Add Visitor Counter Widget In Your Blogspot or WordPress Blog Without Plugin

Visitor Counter is essential to show your reader is that how much popular your blog …

Leave a Reply

Your email address will not be published. Required fields are marked *

*