Icone social animate per il tuo blog

I Social Network ricoprono ormai un ruolo fondamentale nella nostra comunità. Sono diventati strumenti fondamentali che ci accompagnano nella vita di tutti i giorni. Per chi possiede un'attività rappresentano anche un modo semplice ed efficace di farsi conoscere al grande pubblico. Possono anche essere utilizzati come strumento di promozione del vostro sito web o blog personale o aziendale. Oggi vi mostro come aggiungere delle icone 'social' al vostro blog.

Dalla pagina di amministrazione del vostro blog, andate su 'Layout' > 'Aggiungi un gadget' > 'HTML/JavaScript'. Copiate e incollate il seguente codice:

<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/AVvXsEj_h3Q5eqmxzDfMDMl3VIpOv1Yvud2Z0mAK47qeEll9CvuKUFbs0C1TRV6MPiuDHYiMwfhTVtXJ-tOAp-0Xl0HFCka0z4ifcmhc2LDTlwz7JOTLnuHifC5AII2AYiyUoJwgu-fdtnnpS0Vd/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/AVvXsEhARbYpSvwkqzJmji7lQSQL7COZkATXX1O7kUGJknyHBFK7f_a3TXtGzEcMrX3ZI-T8QyjlturX-Qu7YHweJUnoEevJKednGxjrMbJ7GtLQdvH-dgUPwlB-AC6I8PqKGmtZOelZGAbhEDuq/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/AVvXsEiObpnziYzNpfVNINj07hJ7SMagI9XbG8SWko9KV53RbAmtfP-vtPX2Hez5CV8eKRYmzS_35Q-gONVQOpGn0iHW9yyuqYKdPJlkgA_qm6w820_PXkLGvko5uw9x-v9wxyrqz9N4HiNNtznH/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/AVvXsEhOwYhE2EvAAo_mw3SHalp0oSsVXOMTIF6O9gMJWerIRE7mPEL6qVe2nv4ooGSWmzxc_PWEZMIKQADmHVCcuYbgvTwLXoiJXRUhccsQyuJgMU_dYySFSpy_lLKG_ye4VfNh2rC86C8Y1S7Y/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/AVvXsEgw6Ifu3q5WNKMZIAi1879djOlX7_0Rc7UYtiRKQlMr-gicDDCgVGJLNafAEvT_yTo6E42Vv9v7fnR6DYEtyClLlyUQDpKQHSnN4Lw7R6dba3UhDqAZaLXVDpZMGl7PlyoSOAYSNrnvrOBW/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/AVvXsEgYOcDEfZz22FaijlMv7RmNSnFkseWGofJMkSFSnuSKnskJThmjqOd7ep9VXxoY-ab3hG3GOf0rf53_jF2GR2mTNo-kuqqV3hJ7jq2Mgv6Qr713mBp7WwxTHaoVlnfk5uZ-NK6xTTt4TQ0_/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" />
  </a> 
  <!--End Pinterest Icon--> 
 </div>
</center>

Sostituite le sezioni in rosso con i vostri profili social e url feed.

Se volete rimuovere un icona basta cancellare il pezzettino di codice relativo delimitato dai commenti. Se volete cancellare l'icona di Pinterest, ad esempio, dovete cancellare da <!--Start Pinterest Icon--> a <!--End Pinterest Icon-->.

Potete scaricare le icone e leggere l'articolo originale qui.

Live Demo