Icone in 3 dimensioni con collegamento ai social network.

Come installare le icone sociali con effetto in 3 dimensioni su Blogger, Wordpress o altri CMS che supportano gli inserimenti di widget.

Molti lettori (soprattutto lettrici) mi hanno chiesto informazioni su come installare i bottoni con collegamento ai social network posizionati nella parte alta della sidebar di questo blog. Ho semplicemente usato le immagini in 3D che sono state messe in rete da un disegnatore con libera possibilità di riutilizzo. Ne avevo già parlato in un post dedicato alle icone con effetto in 3D. La difficoltà di realizzare un simile widget è esclusivamente grafica perché si tratta di utilizzare due diverse immagini per ogni collegamento e di metterle una accanto all'altra in una striscia orizzontale. Per mostrare ciascuna di queste icone bisogna settarne la distanza del background in modo che venga perfettamente centrata. Si tratta quindi di un lavoro certosino di grafica. Ho già dichiarato diverse volte che le realizzazioni di questo tipo non fanno per me e di non esservi molto portato. Visto però che avevo in animo di aggiungere anche i bottoni di Pinterest e di Instagram a quelli che già avevo, ho pensato di condividere il lavoro con voi lettori.

Se qualche pulsante non vi piace e lo volete sostituire con un altro non vi resta che operare sulla immagine complessiva delle icone che è la seguente

Alcuni bottoni li ho creati da solo e mi rendo conto non siano all'altezza degli altri. Vi posto quindi il codice con la preghiera di non chiedermi aiuto su come apportare ulteriori modifiche perché come detto trattasi di attività che mi scoccia particolarmente. L'aspetto dei pulsanti sarà tale da dare l'impressione che vengano effettivamente premuti quando ci si passa sopra con il mouse.

Per l'installazione si procede come al solito. Si va su Layout > Aggiungi un gadget > HTM/Javascript e si incolla il seguente codice in Sezioni del sito

<style type="text/css">
/* Bottoni Social Network in 3D - by http://www.ideepercomputeredinternet.com */
.icone-sociali {width: 300px;}
.bottone-rss, .bottone-twitter, .bottone-facebook, .bottone-google, .bottone-youtube, .bottone-twitter2, .bottone-pinterest, .bottone-instagram { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_NaANct4juidLipLhyada9zKc4p3UliXzhz13fvazOtN50RtzaPk2xqegjVA1MT2E8PR5KRGvwf6COnQjg4MyhiNzArtw-_mebsL9zCAg7JhDTZ3D8LQEgi0nBe30E98qbtPpXaTr2BI/s590/social-ico-32-8.png) no-repeat top left; }
.bottone-facebook{ background-position: 0 0; width: 32px; height: 32px; float:left;}
.bottone-facebook:active{ background-position: -37px 0; width: 32px; height: 32px;}
.bottone-facebook:hover{ background-position: -37px 0; width: 32px; height: 32px;}
.bottone-google{ background-position: -74px 0; width: 32px; height: 32px;float:left;}
.bottone-google:active{ background-position: -111px 0; width: 32px; height: 32px;}
.bottone-google:hover{ background-position: -111px 0; width: 32px; height: 32px;}
.bottone-rss{ background-position: -148px 0; width: 32px; height: 32px; float:left;}
.bottone-rss:active{ background-position: -185px 0; width: 32px; height: 32px;}
.bottone-rss:hover{ background-position: -185px 0; width: 32px; height: 32px;}
.bottone-twitter{ background-position: -222px 0; width: 32px; height: 32px; float:left;}
.bottone-twitter:active{ background-position: -259px 0; width: 32px; height: 32px;}
.bottone-twitter:hover{ background-position: -259px 0; width: 32px; height: 32px;}
.bottone-youtube{ background-position: -296px 0; width: 32px; height: 32px; float:left;}
.bottone-youtube:active{ background-position: -333px 0; width: 32px; height: 32px;}
.bottone-youtube:hover{ background-position: -333px 0; width: 32px; height: 32px;}
.bottone-twitter2{ background-position: -371px 0; width: 32px; height: 32px; float:left;}
.bottone-twitter2:active{ background-position: -408px 0; width: 32px; height: 32px;}
.bottone-twitter2:hover{ background-position: -408px 0; width: 32px; height: 32px;}
.bottone-pinterest{ background-position: -444px 0; width: 32px; height: 32px; float:left;}
.bottone-pinterest:active{ background-position: -480px 0; width: 32px; height: 32px;}
.bottone-pinterest:hover{ background-position: -480px 0; width: 32px; height: 32px;}
.bottone-instagram{ background-position: -516px 0; width: 32px; height: 32px; float:left;}
.bottone-instagram:active{ background-position: -554px 0; width: 32px; height: 32px;}
.bottone-instagram:hover{ background-position: -554px 0; width: 32px; height: 32px;}
</style>
<div class="icone-sociali">
<a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank" title="Sottoscrivi il feed" rel="nofollow"><span class="bottone-rss"></span></a>
<a href="http://twitter.com/parsifal32" target="_blank" title="Seguimi su Twitter" rel="nofollow"><span class="bottone-twitter"></span></a>
<a href="http://www.facebook.com/parsifal32" target="_blank" title="Aggiungimi su Facebook" rel="nofollow"><span class="bottone-facebook"></span></a>
<a rel="author" href="https://plus.google.com/111056841635962157738/about" target="_blank" title="Seguimi su Google Plus" rel="nofollow"><span class="bottone-google"></span></a>
<a href="http://www.youtube.com/user/parsifal32" target="_blank" title="Canale su YouTube" rel="nofollow"><span class="bottone-youtube"></span></a>
<a href="https://twitter.com/IPCEI" target="_blank" title="IPCEI su Twitter" rel="nofollow"><span class="bottone-twitter2"></span></a>
<a href="http://pinterest.com/parsifal32/" target="_blank" title="Seguimi su Pinterest" rel="nofollow"><span class="bottone-pinterest"></span></a>
<a href="http://instagram.com/parsifal32" target="_blank" title="Seguimi su Instagram" rel="nofollow"><span class="bottone-instagram"></span></a>
</div>

Andate su Salva e posizionate il widget a piacere nella sidebar. Bisogna avere una colonna larga almeno 300 pixel altrimenti le icone si disporranno su due file. Dovrete sostituire gli URL in rosso con gli indirizzi dei vostri social e opzionalmente personalizzare le scritte in viola. Questi bottoni possono anche essere installati su un sito Wordpress andando su Widget > Testo e incollando il codice. Enjoy.