Pubblicato il 06/12/16 - aggiornato il  | 6 commenti :

Come installare i bottoni dei social con effetto 3D su Blogger.

Come installare un widget su Blogger che mostra le icone con collegamento ai social network e che sono animate con effetto 3D.
Uno dei widget che mi sono stati più spesso richiesti è quello dei bottoni per i collegamenti ai social network con un effetto tridimensionale. Infatti quando si passa sopra a uno di questi bottoni con il mouse è come se si schiacciasse. In realtà passandoci sopra con il cursore si effettua una trasformazione con il CSS3 che mostra un'altra icona con un effetto animazione.

Le icone non sono immagini singole ma sono state tutte riunite in un'unica immagine per utilizzare l tecnica del CSS Sprite che serve per rendere il sito più veloce. La richiesta di un solo indirizzo ai server è ovviamente molto più rapida della richiesta di una dozzina di indirizzi web. La scelta delle varie icone avviene impostando un diverso posizionamento del background.

L'effetto tridimensionale è dovuto al passaggio da un pulsante a quello che gli sta immediatamente accanto e che graficamente ricorda la forma di un bottone premuto. Tale effetto è stato realizzato inserendo un bordo nella parte alta. Tanto per dare una idea ecco l'immagine che fa da sfondo

icone-3-dimensioni

Come vedete ci sono 16 bottoni di cui 2 doppi di Twitter. Ne ho messi due di Twitter per indirizzare i lettori al mio account personale e a quello specifico del sito su cui vengono ripubblicati i commenti dell'autore. Il widget è largo 300 pixel e può essere posizionato in una sidebar che abbia almeno pari dimensioni. Lo si può installare anche in una sidebar più stretta magari tralasciando qualche account.






Si va su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript, opzionalmente si digita un titolo, quindi in Sezioni del Sito si incolla questo codice

<style>
.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/AVvXsEh9WbP0QOn-NpYaTNHTWZ6Em_Gu5k5k2PWt9xm7SHlu9ymea7Sbc86siWOqRKhTQCSBLfCQUD7-4a2eBXaEXOkAGr4VwYDjOCKbAQZyvtSyhrLFnD24YaVoZ_ilfpxujQrbFFnCgxa4Svk/s590/social-ico-ottimizzate.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" target="_blank" title="Seguimi su Google Plus"><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>

Si salva e si posiziona nel Layout quindi si salva la disposizione.


Gli URL colorati di rosso sono quelli dei miei account che dovranno essere sostituiti dai vostri.






Le espressioni colorate di blu sono quella che il lettore visualizzerà nel tooltip quando ci passerà sopra con il mouse. Si può eliminare un account mantenendo la stessa sintassi. Per esempio si possono cancellare le due righe evidenziate di giallo per non mostrare due icone di Twitter.

I social supportati sono Facebook, Twitter, Google+, Youtube, Pinterest, Instagram e i feed RSS. Chi abbia un po' di pazienza può aggiungere altre icone alla immagine con lo stesso stile seguendo le istruzioni di questo post.  Se si vogliono visualizzare le icone di condivisione sociale alla fine del post con effetto animato si può invece consultare l'articolo su come inserire le icone sociali su mobile e desktop.

Aggiornamento: Questi bottoni in 3D possono essere installati anche nel modello di Blogger per essere mostrati o sotto il titolo o alla fine dell'articolo su desktop e su mobile. 


6 commenti :

  1. Ho inserito i miei URL di twitter e fb, ma premendo i bottoni mi fanno accedere ai miei rispettivi account come amministratore. Spero che questo non avviene per i visitatori del blog.

    RispondiElimina
    Risposte
    1. Perché nel tuo browser sono memorizzati i cookie per il login. È ovvio che i visitatori apriranno il tuo profilo senza accedere come succede a te quando apri il profilo di un altro
      @#

      Elimina
    2. Ok, Grazie. Complimenti per il tuo Blog veramente utilissimo. Non sapevo un'acca di blog. Grazie a te ne ho costruito uno decente.

      Elimina
  2. Nel bottone di youtube non mi compare il mio canale. Io non ho "youtube.com/user/....." ma ho "youtube.com/channel/UC0g2kjSFJ81x8j6RJdNE7BQ?view_as=subscriber"...come faccio a scriverlo in HTML?

    RispondiElimina
    Risposte
    1. È la stessa cosa. Io a suo tempo impostati un VanityURL per Youtube che adesso non so se sia più possibile usare. Puoi incollare queato indirizzo
      https://www.youtube.com/channel/UC0g2kjSFJ81x8j6RJdNE7BQ
      che rimanderà comunque al tuo Canale Youtube
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy