Icone sociali Touch Me per RSS, Twitter, Facebook e Google+.

Icone sociali Touch Me per Feed RSS, Google Plus, Twitter e Facebook.

Credo che non esista sito che non abbia collegamenti con i vari social network. Le interazioni degli utenti sono infatti fondamentali per aumentare il volume del traffico. La più o meno naturale selezione che è avvenuta in questo come in altri campi ha portato all'emergere di tre network che si suddividono presumo più del 90% delle condivisioni globali, almeno per quello che riguarda l'Italia, l'Europa e il Nord America.

Si tratta naturalmente di Twitter, Facebook e Google Plus. Le loro icone insieme a quella per la sottoscrizione dei feed le ho già presentate in moltissimi widget. Ricordo i bottoni animati e le icone in tre dimensioni. E' la volta del widget che è stato chiamato "Touch Me" dai suoi ideatori che non so chi siano ma che hanno usato le icone di Design Kindle.

L'effetto è molto bello con Chrome e Firefox e non è disprezzabile neppure con Internet Explorer anche se in questo caso resta solo l'effetto colorazione e manca l'effetto movimento

L'installazione è molto semplice visto che basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare in Sezioni del sito questo codice

<style type="text/css">
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjljXg3z4Ena3zDk2VFGXKgMusYNb1prx0git1kdR3chsi0_OWeXNk3vKsxnfgfCnOZzvY90o97OMG9J7a_axLWXam3_uD-XpMpJZS_U0Eu2dUMTVtmzw9gCOVbSHomPCwNjiK2mX_ck-k/s454/social-touchme.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<a class='rss' href="URL DEI FEED" rel='nofollow' target='_blank'></a>
<a class='googleplus' href="PROFILO GOOGLE PLUS" rel='nofollow' target='_blank'></a>
<a class='facebook' href="PROFILO FACEBOOK" rel='nofollow' target='_blank'></a>
<a class='twitter' href="PROFILO TWITTER" rel='nofollow' target='_blank' ></a>
</div>

Si salva e si posiziona con il trascinamento del mouse. Le icone sono state inserite verticalmente in una sola immagine il cui URL è colorato di viola. Al passaggio del mouse si avrà l'effetto hover che mostrerà l'icona corrispondente colorata. I valori in pixel sono stati calibrati appositamente per questo effetto. I più bravi nella grafica possono inserire anche nuove icone scaricate da Design Kindlle, modificando l'immagine e creando altri CSS. Si devono anche incollare l'URL dei Feed, quello del Profilo di Facebook, del Profilo di Google Plus e del Profilo di Twitter. Si può anche velocizzare o rallentare la transizione CSS3 modificando i parametri di durata della transizione stessa (0.2s).