Icone di Facebook, Twitter e Feed con effetto vintage.

Come inserire delle icone che puntino ai social network Facebook, Twitter e ai feed del blog.

In rete si possono trovare widget per aiutare i lettori a condividere i nostri post nei vari social network. Si possono anche creare da soli delle icone personalizzate che consentano la condivisione automatica.

Se scegliamo una impostazione più minimalista si possono installare delle icone con un semplice collegamento al social o al servizio che rappresentano. Due esempi particolarmente interessanti di questo tipo di impostazione le ho illustrate nei post delle icone animate e dei bottoni in 3D.

Vado adesso a presentare un tipo di icone in stile vintage che però diventano brillanti al passaggio del mouse. Ne ho inserite solo tre ma con lo stesso meccanismo possiamo metterne il numero che vogliamo e possiamo anche personalizzarne la dimensione. Quello di cui abbiamo bisogno sono due set di icone assimilabili per poter mostrare le seconde quando il cursore ci passa sopra. Ecco il risultato ottenuto

     

Il codice da incollare è il seguente

<a href="http://www.facebook.com/ideepercomputeredinternet" onmouseout="if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNucGfvmV4rqqPQcqLH5qChfhNh7Z1Jf42cRKh9Df3UVEIfDs90PJ4RS6sp_Zes9zaUUloAyJW8r5kI-RxUBnCj6T7Ad0ebW9UauZwexUzgFS66T86T2gNyrZjNhu5KDgPwjCtSp3FRG0/s82/facebook-vintage.png';" onmouseover="if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguBNL2uDz58IBWSHg2PC67nbkoAh3fbSD231vLSfLftDW4Jiybu-9euoI8u3fPtyqBcSYutPmkUjg3wFbtlFtilOvSL5zSCvQMjLaLuEXCOt_cja9d_voRIa1Tgg540xlKoGsXEVXLpms/s78/facebook.png';" target="_blank"><img border="0" height="82" name="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNucGfvmV4rqqPQcqLH5qChfhNh7Z1Jf42cRKh9Df3UVEIfDs90PJ4RS6sp_Zes9zaUUloAyJW8r5kI-RxUBnCj6T7Ad0ebW9UauZwexUzgFS66T86T2gNyrZjNhu5KDgPwjCtSp3FRG0/s82/facebook-vintage.png" width="64" /></a>&nbsp;&nbsp;<a href="http://twitter.com/parsifal32" onmouseout="if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNDrWw3BBUlmlAPn1xmFvO-o6DHfPLINc1zPNkch-BHBKUequ82MK7fW0sKHn-Ke4feYzyvvT_eMK788gyCt3ePPRb64bUZ9fn853pZMqIZKHM8EVegrMC1ksKchQet8K1f3EdarT_DI/s82/twitter-vintage.png';" onmouseover="if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQg_WFoZZkaSpAz8jTcYvwgNXOfhkxOd5vNd8ilG0L-R7dp8ZrHJNn9V1uQ0YNihOxIkt95Yhti7ohXjxSeUbFAAr2sEMo-daDoG3VOX3jWmJX_P2YSHuHbSzs02REvyABfA-TduGom18/s78/twitter.png';" target="_blank"><img border="0" height="82" name="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNDrWw3BBUlmlAPn1xmFvO-o6DHfPLINc1zPNkch-BHBKUequ82MK7fW0sKHn-Ke4feYzyvvT_eMK788gyCt3ePPRb64bUZ9fn853pZMqIZKHM8EVegrMC1ksKchQet8K1f3EdarT_DI/s82/twitter-vintage.png" width="64" /></a> &nbsp;&nbsp;<a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" onmouseout="if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR-g6N_X97HbMinAP5s8vIgMH6zy9sQADTfoMawGPtubCTtbZ7I9rX8VgxzI6YUm-8iajvqo0QfUUm72HlH4m8y04Y6yijwVZIGA94n5TUTnq0lpG3poTpFeIO4wkVbLaqOWmCNF2T36Y/s82/rss-vintage.png';" onmouseover="if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-YvqIwUt-foPkZcjxBSMwlvMrBTCopiw2sIyyyG5Bj6Ts3jUNeozq7G86GZ8Js9QEk93hHSALiySXY7q8nxHX-4F0k5FVwhCV8aWTM-QIrXp3hlXbbneRadKCCTj34ySiD8f_8f2G4M/s78/rss.png';" target="_blank"><img border="0" height="82" name="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR-g6N_X97HbMinAP5s8vIgMH6zy9sQADTfoMawGPtubCTtbZ7I9rX8VgxzI6YUm-8iajvqo0QfUUm72HlH4m8y04Y6yijwVZIGA94n5TUTnq0lpG3poTpFeIO4wkVbLaqOWmCNF2T36Y/s82/rss-vintage.png" width="64" /></a>

dove i parametri colorati possono essere personalizzati. Il tag target="_blank" serve per far aprire la pagina in un'altra scheda e &nbsp; rappresenta uno spazio. Incollandolo su Layout > Aggiungi un gadget > HTML/Javascript in alcuni modelli potrebbe non funzionare. Può essere però incollato nei post o nelle pagine statiche in modalità HTML.

La cosa migliore però è di convertirlo in XML usando lo strumento Blogcrowds, inserire dei tag condizionali per mostrare le icone solo nei post e, dopo aver salvato il template, andare su Modello > Modifica HTML > Procedi e espandere i modelli widget. Il codice potrà quindi essere incollato subito sopra alla riga  <div class='post-footer'> o subito sopra a <div class='post-footer-line post-footer-line-1'>. Le icone possono anche essere inserite prima del contenuto del post incollando il codice subito prima la riga <data:post.body/>. Concludo ricordando che si possono anche centrare le icone incollando all'inizio del codice il tag <div align="center"> e alla fine l'altro tag </div>. Questo va fatto prima di inserire gli eventuali tag condizionali e dopo aver convertito il codice in XML.