Add Spinning Social Media icons to Blogger – Blogger Widgets ~ 4Ever-Software

Spinning Social Media Icons – Blogger Widgets

How to Add Spinning Social icons to Blogger Blog? Last week i Publish a post “Add Social Buttons With Email Subscription Form“. Today i am back to talk about How to add Spinning Social icons/Button to Blogger. Social Media Icons widgets use for to increase Your blog traffic. Social Network is one of the bast way to increase visitors and Add your link to social sites and share your blog links with your friends and public (People) to Increase Blog traffic. Actually these posts is about Blogger Widgets and How to Increase Blogs Visitors/Traffic.

These social Media icons created with HTML and CSS. How it will work? When you you place your mouse cursor over each icon they spinning and when you Clicking on it will be open your social sites links. And one more thing social icons use for to Increase your Facebook Like, Increase Twitter Followers Etc…

Paul Crowe Created great social icons with 3d effect, Now i give you 5 different social icon with spinning effect for your blogger widgets. So copy the code and direct paste into Blogger. You can see the Demo of every spinning social icons, Don’t forget to click on Social icons and follow Us:

How to Add Spinning Social icons to Blogger – Blogger Widgets?

Go to Blogger Dashboard.
Click on Layout > Add a Gadget.
Into New Popup Window click on HTML/JavaScript.
Paste Following code Below and Click Save, You are DONE!

01.Spinning Social icons Style

Style 1 Live Demo:

<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="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-RSS-Email-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a>   <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a>  </div><br/>

Important: Replace the Green colors (Enter- Your-….-Url-Here) with You Social Profiles URLs.

02.Spinning Social icons Style

Style 2 Live Demo:

<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="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Email-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a>   <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a>  </div><br/>

Important: Replace the Green colors (Enter- Your-….-Url-Here) with You Social Profiles URLs.

03.Spinning Social icons Style

Style 3 Live Demo:

<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="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Subscribe on Youtube" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Youtube-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a>   <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a>  </div><br/>

Important: Replace the Green colors (Enter- Your-….-Url-Here) with You Social Profiles URLs.

04.Spinning Social icons Style

Style 4 Live Demo:

<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="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Email-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a>   <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a>  </div><br/>

Important: Replace the Green colors (Enter- Your-….-Url-Here) with You Social Profiles URLs.

05.Spinning Social icons Style

Style 5 Live Demo:

<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="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Subscribe on Youtube" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Youtube-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a>   <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a>  </div><br/>

Important: Replace the Green colors (Enter- Your-….-Url-Here) with You Social Profiles URLs.

4Ever-Software