Pubblicato il 18/04/13 - aggiornato il  | 11 commenti :

Icone ruotanti con collegamenti ai social network.

Widget di icone che ruotano al passaggio del mouse con collegamenti ai vari social network.
Continuo la presentazione di widget che mostrano icone con link ai social network più importanti che abbiano però una loro caratteristica particolare. Dopo aver illustrato come installare le icone in tre dimensioni è adesso la volta delle icone ruotanti. Le immagini le ho prese da Elegant Themes e possono ovviamente essere sostituite da altre che incontrino maggiormente i vostri gusti.

Per la loro installazione non occorre modificare il template visto che vanno posizionate in un elemento pagina nella sidebar o nel footer. Anche i social network che ho proposto possono essere modificati escludendo i codici di quelli che non ci interessano e magari sostituendoli con altri. Ho anche inserito le icone per la sottoscrizione dei feed e per la iscrizione alla Newsletter di Feedburner.

Quando si passa con il mouse sopra a una delle icone ci sono due effetti quello della trasparenza e quello della rotazione che si interrompono quando il cursore non punta più nessuna icona

icone-ruotanti-link-social-network

Si va su Layout > Aggiungi un gadget e si scorre verticalmente fino a trovare HTML/Javascript. Si può inserire opzionalmente un titolo e in Sezioni del sito si incolla questo codice

<style type="text/css">
#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>
<div align="center"><div id="social">
<a title="Segui i nostri feed" href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGkK6Z425YUH0EdErEz1wlEHhGFlA1f9gySv9IkFRifA1i8sG57YxaXmtl8am7mtpkEsS5Tg7rXSxrUe4OEkQC6PUnphNXxo9NJpYYpdJpk7UfCMS0QA20ZpIl2oYXJ3cQhk9PfdXMpE/s32/rss.png" style="margin-right:1px;" alt="Icona RSS"/></a>
<a rel="nofollow" title="Iscriviti alla Newsletter" href=http://feedburner.google.com/fb/a/mailverify?uri=ideepercomputeredinternet/zUQN" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAAb_zGI6NrjsrvSilzouHXIf3OIjm4P2mV9FDjOPs3Swvsr2nw7bEvJU7U3W2_EXBMe4Sljw3B4xgVL88bYD-_0gG4N_KOeVacvE0vr1TexELuLX-MtSWDQf0q_AOrb7l6-5kXAWrk4k/s32/email.png" style="margin-right:1px;" alt="Icona-Email"/></a>
<a rel="nofollow" title="Segui la Pagina Fan" href="https://www.facebook.com/ideepercomputeredinternet" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpg3qzLj-Fw3bJuNYdwQYrl435wWB3OjL8C2X0qZmYdl4135nBzZNYbQ76Y47I_HwSrce4chbhBzU1-7vP7KiR-i9yopwNfismbzlT9rKEvaYFYoNuSmPH3j8l0qMXXVhYEgyN4lyx8Zw/s32/facebook.png" style="margin-right:1px;" alt="Icona-facebook"/></a>
<a rel="nofollow" title="Seguici su Twitter" href="https://twitter.com/ipcei" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEorqW5UCEpO8jt8aM_BCT-cC-DVYHiS0rVzAKNE2Ims6mmWo50grsAGi5z3waHE5F2bjlqXBXiCuQCPNmUhaeZbZZ6eAC8QjOHcY26yDoPJ-4Jc9d9xdlBFSP3iG4SA-Pnmyjdti8Xng/s32/twitter.png" style="margin-right:1px;" alt="Icona-twitter"/></a> 
<a title="Aggiungimi su Google+" rel="nofollow" href="https://plus.google.com/111056841635962157738" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh7to7IpDKZ319uRrDbYKkC4oJ6On3cjvYvX9Vbd7hnoTtQ1wzkwa9fh4YMzpDE92Ocy9fZI7W2KbYQ837OZG-MiO4XWh85KKPbRMsjiSmob0bNAtkK3KnrdTdioj8Kq3lEfAQ8rbdqwk/s32/googleplus.png" alt="Icona-google+"/></a> 
<a title="Segui i miei Pin" rel="nofollow" href="http://pinterest.com/parsifal32/" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHgacYoGAgX8ERxZlaxSM3YelFM0Sx_YSt9clLk5qvt796_C9taLf0BQQbnBAn1LEQ4BRCSaHZc054pOMu4eEROmfuJQjboFb4jZ_aD5gkI71Fixm0hE32Qr2sCZ1XFQdPxOBvraxKnLQ/s32/pinterest.png" alt="Follow Me on Pinterest" /></a>
<a title="Seguimi su Youtube" rel="nofollow" href="http://www.youtube.com/user/parsifal32" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN9l9GRTLa-CXvPpLopW8HxOfFFTZFy82NERWRUsWyCcOKgasoL0YClw8PgqQ2JyvPQxQ60x5LP_uvWoSDSdHGwEuMpR0p7prp2AnB4b-OS23z5vk9P8e564CbiXS0t2x7f8qly7SIp6o/s32/youtube.png"/></a>
<a title="Seguimi su Instagam" rel="nofollow" href="http://instagram.com/parsifal32" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9lgBbBOD8yiie8EtkHN3ShDZQlmxrNvRqRhFB9NMtFMid_n8zdGmpuQHXMNw0AF-K-1Egj6d9tXw8iQP7HKb9xonBLPuDupRmdqhCYFKrtm4mrUFqRAM048p6aNFrLUISeMjh293qzlk/s32/instagram.png"/></a>
<a title="Seguimi su Linkedin" rel="nofollow" href="http://www.linkedin.com/in/parsifal32" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjl1-shnO_Ezp9khQyKP_dzYXjH0MuEA7Az7cyQbnSYnrRJfuxMUuO_hwOxS2qU3GRzQnXRiSXCRciaVK1Q6QQxo2__Wht4EesQuAre8pdnEOscTXImZ5v0WdBw7ibTRjBC3QpRL4bseY/s32/linkedin.png"/></a>
<a title="Seguimi su Tumblr" rel="nofollow" href="http://ernesto-tirinnanzi.tumblr.com/" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ax0V_kXo2m4tSbVOeuG70jQvduwBUcKEIIFGLjHF1qfNhRmw83waH318PzgNIubD3p7HvBP26AcDyBFI0DKh_57LEnkB-JVK20c6Hz5dljvOTZ8lc97DI-3FR54EhmtMWsCJl0NqEpE/s32/tumblr.png"/></a>
<a title="Seguimi su Flickr" rel="nofollow" href="http://www.flickr.com/photos/25868141@N08/" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOjeWHy5L7G5CARLhZlJLKde338DuztX1uLxG9-tLej3yHOKqHEgWZMx1bAgU0WA5Sjl16uVJ7dXsb8B9qK8Kcn5NOi3mDFzMJ2FP17gLvte1YVhdPq956W0wEKEZDTLCHwtsTUnM9O2U/s32/flickr.png"/></a>
</div></div>

Si può settare il grado di opacità (0.7 quello proposto) e la durata della rotazione (proposta di 0.8 secondi). Dovrete sostituire gli indirizzi dei miei account nei vari social network con quello dei vostri.


11 commenti :

  1. sai volevo iniziare a fare tutorial su blogger,ma con 1000000 ottimi video mi hai fregato il mercato ;D

    RispondiElimina
    Risposte
    1. si ma comunque sono eccezionali e sto imparando tantissimo,cavolo per vederle tutte ci metterò un'infinità ;D perche non fai un bel pdf enorme con tutte le guide? eh eh :))
      p.s ottimo lavoro,sei un grande :3

      Elimina
  2. Buon pomeriggio, volevo sapere se si possono aggiungere altre icone e se c'è la possibilità di togliere la sottolineatura dalle icone, per rendere il widget più vicino allo stile del mio blog.
    Grazie

    Lucia Alocchi

    RispondiElimina
    Risposte
    1. Puoi aggiungere tutte le icone che credi e che c'entrano nel tuo layout. La sottolineatura non deriva dal widget ma solo dal modello del blog in cui ho effettuato il test. Lo stile della immagine e del link puntato dal mouse sarà ereditato dal blog in cui viene installato il gadget
      @#

      Elimina
    2. Ti ringrazio e buona serata

      Lucia Alocchi

      Elimina
  3. I pulsanti cliccabili presenti alla destra del sito come si aggiungono?

    RispondiElimina
    Risposte
    1. Se ti riferisci ai bottoni con effetto 3D leggi questo post
      http://www.ideepercomputeredinternet.com/2012/03/icone-sociali-con-effetto-3d.html
      che poi ho ripreso in quest'altro
      http://www.ideepercomputeredinternet.com/2013/03/3d-social-icons.html
      @#

      Elimina
    2. Ti ringrazio erano proprio quelli! Ho un altro problema, l'ho scrivo qui perché tanto non c'e un articolo in particolare! Sul mio blog non compaiono i tasti di condivisione sotto ai post nonostante siano abilitati, ho provato anche ad aggiungere vari codici sul modello, ma niente. Allora ho provato ad usare AddThis, ma nemmeno questo servizio funziona, come potrei risolvere?

      Elimina
    3. Se non funziona proprio nessun codice penso che tu sbagli a incollarlo nel template. Prova a leggere questo post
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      e eventualmente quest'altro
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      @#

      Elimina
    4. Purtroppo penso di averle inserite nel modo corretto, anche perché è abbastanza facile, è difficile sbagliare!

      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