Pubblicato il 08/02/13e aggiornato il

Come inserire delle icone circolari ruotanti nella sidebar.

Come installare in una sidebar di Blogger le icone dei social network che ruotano al passaggio del mouse
I collegamenti con i social network sono essenziali per tutti i siti in quanto consentono di creare delle sinergie fondamentali per aumentare il traffico. Oltre ai bottoni con contatore che permettono di condividere articoli nei vari social è utile inserire nel layout del blog le icone con i collegamenti ai nostri account. Ricordo tra l'altro di aver già presentato dei bottoni animati e dei pulsanti in tre dimensioni. Vado adesso a illustrare dei bottoni con collegamento a Facebook, Twitter, Google Plus e i Feed RSS che ruotano al passaggio del mouse. 

Tale comportamento si visualizzerà con i browser che supportano le trasformazioni CSS3 mentre con gli altri, segnatamente Internet Explorer, si vedrà l'icona statica. Ecco l'effetto che si vede con Chrome


Si possono scegliere icone diverse da quelle che ho preso per il test e volendo se ne possono mettere anche altre aggiungendo delle semplici righe. Si va su Layout > Aggiungi un gadget > HTML/Javascript, opzionalmente si digita il titolo del widget e, in Sezioni del sito, si incolla il seguente codice

<style type='text/css'>
#icone {
width:100%;
margin-left:-15px;
margin-bottom:10px;
display:block;
clear:both;
}
.icone_sociali{display:table}
.icone_sociali ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:center;
padding:5px 5px 0 0
}
.icone_sociali ul {
padding:0;
float:right;
margin-bottom:0;
}
.icone_sociali li.icona {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.icone_sociali li:hover {
-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;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}
.icone_sociali a:hover {
border:none !important;
}
</style>
<div class='icone_sociali' id='icone'>
<ul>
<li class='icona'><a href='http://facebook.com/ideepercomputeredinternet' target="_blank"><img border='0' src='https://lh3.googleusercontent.com/-ONpos3G83Sc/URTCsMHGW0I/AAAAAAAAgM0/ii7JSIMpkAY/s48/facebook.png'/></a></li>
<li class='icona'><a href='http://twitter.com/parsifal32' target="_blank"><img border='0' src='https://lh3.googleusercontent.com/-j-QBVXtPGL4/URTCyI32ByI/AAAAAAAAgNM/QxcOpJA3-O8/s48/twitter.png'/></a></li>
<li class='icona'><a href='https://plus.google.com/111056841635962157738' target="_blank"><img border='0' src='https://lh6.googleusercontent.com/-58Ip34ev7qo/URTCucZEcTI/AAAAAAAAgM8/ievde1R3FRg/s48/google.png'/></a></li>
<li class='icona'><a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN' target="_blank"><img border='0' src='https://lh4.googleusercontent.com/-SbLlGLI_oeM/URTCwBWPsjI/AAAAAAAAgNE/K_4z1E_O0Ws/s48/rss.png'/></a></li>
</ul></div>

Si salva l'elemento pagina e si posiziona con il trascinamento del mouse quindi si salva la disposizione.


La riga margin-left:-15px; serve per centrare le icone nella sidebar. Si modifica il valore numerico fino ad avere una posizione ottimale.  La riga margin-left:6px; determina la distanza in pixel tra le varie icone e può essere aumentata se si ha una sidebar molto larga. La durata della rotazione è di 0.4s cioè di quattro decimi di secondo, valore che può essere personalizzato in tutte le sue occorrenze. Gli URL in rosso rappresentano gli indirizzi delle immagini e i collegamenti ai social. Le icone possono anche essere lasciate invariate ma dovrete inserire gli URL dei vostri account.

Le icone possono essere ordinate in modo diverso e per aggiungerne altre basta inserire una nuova riga prima del tag </ul> che individua la fine dell'elenco. La riga di codice generica è la seguente

<li class='icona'><a href='URL DEL SOCIAL' target="_blank"><img border='0' src='URL DELLA IMMAGINE'/></a></li>

Il tag target="_blank" serve per aprire il link in un'altra scheda e può anche essere tralasciato.




10 commenti :

  1. La trovo un'idea carinissima. Quello che vorrei chiederti, però, Ernesto, è se, non avendo pagine personali, tranne che il feed, si potrebbero usare più genericamente come condivisione del blog o sito su fb, twitter e g+ degli utenti. Nel caso, come?

    RispondiElimina
  2. ciao ernesto, nel codice l'ultimo collegamento quello del feed..... non ho capito... devo inserire il codice com'e' aggiungendo solo il nome del mio blog, oppure devo aggiungere il collegamento del mio feed?

    RispondiElimina
  3. @ Veronica
    Puoi togliere la riga della icona del feed. Volendo al suo posto ne puoi aggiungerne un'altra a tua scelta secondo la sintassi inserita alla fine dell'articolo

    @ nanussa
    Quello è il mio indirizzo feedburner. Puoi metterci il tuo se ce l'hai. Alternativamente puoi mettere uno di questi due URL
    http://nomeblog.blogspot.com/feeds/posts/default
    http://www.nomeblog.com/feeds/posts/default
    a seconda che tu abbia un blog gratuito o con dominio personalizzato.

    RispondiElimina
    Risposte
    1. No, scusa, mi sono espressa male. è che ho solo il feed ma né pagina fb né altro. Perciò mi chiedevo se si potevano trasformare in bottoni di sharing. Sai, quelli che nella sidebar se si linka il post condividono il post, e se invece si è in home condividono la home.
      Si può?

      Elimina
    2. dimenticavo. Io nel frattempo spulcio nel tuo sito. In questo momento ho tre pagine aperte contemporaneamente.

      Elimina
    3. @ Veronica
      Non queste icone. Ci vogliono dei bottoni più complessi con gli script dei vari servizi. Per esempio i bottoni di condivisione di Twitter, Google Plus e Facebook che ho nella sidebar li puoi trovare qui
      http://www.ideepercomputeredinternet.com/2012/11/blogger-bottoni-facebook-googleplus-twitter-contatore.html
      Ma ho visto che è un post che hai già commentato ...

      Elimina
    4. ok grazie ernesto, con feedburner sono un po' in conflitto....non ci ho capito molto con i link vari...ma tu mi hai dato una soluzione ottima!!
      come sempre grazie mille dell'aiuto!!! :)

      Elimina
  4. eh, sì. Ci provo da un po'. Ma il fatto di registrarmi su facebook (ma non basta l'account che ho già?) mi sembra noioso. E poi: ma è normale che chiedano il numero di telefono? Francamente non ne vedo il motivo.

    RispondiElimina
  5. @ Veronica
    Posso capire che sia scocciante ma se uno crea una applicazione su Facebook vogliono essere sicuri della sua identità per evitare malware o cose simili. Non è certo il tuo caso ma c'è gente che sfrutta l'anonimato per pratiche illegali.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.