Friday, December 28, 2012

1 Spinning Social Icons in CSS3



                              In developing of any website Social Networking is main Part. Early days there were few sources to share and spread our site through them and we almost not cared and concerned about the Beauty or Attractiveness of those Sources. 

                            But now there are plenty of Social Networking Sits Finally web designers have touch the Quality and Beauty of the sources which are mainly Icons to attract the visitors. Using CSS and HTML Web Designing languages they have come across to create various kinds of Beautiful Icons with various behavioral patterns. So I'll show you then the Spinning Social Icons !


SPINNING SOCIAL SHARING ICONS



  1. Pick Up your Style from below one of those

  2. Copy the Code 

  3. Go to blogger Dash Board > Layout 

  4. Add a Gadget > HTML/Java Script

  5. Copy Your Customized Code


U Turn






<style>
/* CSS3 Spinning Social Icons Start Blogging Industries */

p#bi_socialicons img {
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

p#bi_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

/* CSS3 Spinning Social Icons End Blogging Industries */
</style> 



<center>
<p id="bi_socialicons">

<a href="http://www.facebook.com/cashdrd/">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
   
<a href="http://www.twitter.com/duleenR/">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
   
<a href="https://plus.google.com/u/0/100901203927278526304">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
  
<a href="http://www.feeds.feedburner.com/BloggingIndustries/">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
   
<a href="https://www.youtube.com/channel/UCn3Cg0dauV-977h1985jBzw?feature=guide">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</p>
</center>



Clock Wise







<style>
/* CSS3 Spinning Social Icons Start Blogging Industries */

p#bi_socialicons 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;
}

p#bi_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* CSS3 Spinning Social Icons End Blogging Industries */
</style> 



<center>
<p id="bi_socialicons">

<a href="http://www.facebook.com/cashdrd/">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
   
<a href="http://www.twitter.com/duleenR/">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
   
<a href="https://plus.google.com/u/0/100901203927278526304">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
  
<a href="http://www.feeds.feedburner.com/BloggingIndustries/">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
   
<a href="https://www.youtube.com/channel/UCn3Cg0dauV-977h1985jBzw?feature=guide">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</p>
</center>


Negative Clock Wise






<style>
 /* CSS3 Spinning Social Icons Start Blogging Industries */

p#bi_socialicons 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;
}

p#bi_socialicons img:hover {
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
}


/* CSS3 Spinning Social Icons End Blogging Industries */
</style> 



<center>
<p id="bi_socialicons">
    

<a href="http://www.facebook.com/cashdrd/">
<img border="0" src="http://3.bp.blogspot.com/-ck0bnvgk5uI/T_fxhb7Ay-I/AAAAAAAACRY/yZR4hu8omnE/s1600/helperblogger.com-facebook.png" /></a>
    

<a href="http://www.twitter.com/duleenR/">
<img border="0" src="http://4.bp.blogspot.com/-P_NkdPIsSQQ/T_fxjUKUF2I/AAAAAAAACRs/KXfA3LnHej8/s1600/helperblogger.com-twitter.png" /></a>
    

<a href="https://plus.google.com/u/0/100901203927278526304">
<img border="0" src="http://1.bp.blogspot.com/-uSOHwlVeA68/T_fxiHgtoJI/AAAAAAAACRc/-UZ8ujxc7Ic/s1600/helperblogger.com-google_plus.png" /></a>
    

<a href="http://www.feeds.feedburner.com/BloggingIndustries/">
<img border="0" src="http://2.bp.blogspot.com/-2sRpqFhID4A/T_fxipoh7DI/AAAAAAAACRo/kn_qiQKBT-o/s1600/helperblogger.com-rss.png" /></a>
    

<a href="https://www.youtube.com/channel/UCn3Cg0dauV-977h1985jBzw?feature=guide">
<img border="0" src="http://3.bp.blogspot.com/-2wY3FQCZgoM/T_fxkMsCqtI/AAAAAAAACR4/jsNUZdVcCCg/s1600/helperblogger.com-youtube.png" /></a>
</p></center>


SPINNING SOCIAL SHARING ICONS Customization


Look Down the Colour Coded Codes and You will find those codes again in Following Styles, 

You have to do is, Change those with your Links. 


Red Colour Urls       - Your Facebook Profile Page Url

Orange Colour Urls  - Your Twitter Profile Page Url

Yellow Colour Urls   - Your Google+ Page Url

Green Colour Urls    - Your Feedburner Url
 
Blue Colour Urls      - Your Youtube Channel Url



Now your Widget is Ready to Use, Be Spinning !

  Warning  :  Don't Copy from this Post Without Linking Back to the Post


1 comment:

  1. In this tutorial you will learn how you can use CSS to create spinning social media icon on the hover event to draw more attention to your social media icons.
    website design

    ReplyDelete