Icone fluttuanti per social network.

Come mostrare in un blog o in una pagina web tre icone fluttuasnti collegate con gli account di social network, di pagine fan, di pagine business o altro ancora.

Per invogliare i lettori a sottoscrivere la pagina fan collegata al blog o a inserirci nelle sue cerchie di Google Plus sono stati realizzati innumerevoli widget accattivanti. In questo articolo presenterò una alternativa sicuramente originale che consiste nel mostrare tre icone che si spostano casualmente nel layout del blog e, se i lettori ci cliccano sopra, apriranno una nuova scheda con la pagina collegata che potrebbe essere la pagina fan di Facebook oppure la pagina business di Google+.

Il limite di questo gadget è che è strutturato per tre icone che quindi non possono diventare due oppure quattro. Questo lo faccio presente subito per stoppare possibili richieste nei commenti in tal senso. Quello che si può scegliere senza limitazioni sono il tipo di icone, i link collegati e i social prescelti che potrebbero essere anche Pinterest, Instagram e Youtube invece di quelli proposti che sono Facebook, Twitter e Google+. Presenterò l'inserimento di questa personalizzazione in un blog su Blogger ma non esistono tag specifici di questa piattaforma e quindi può essere installata in qualsiasi pagina web che supporti il javascript.

Ho scelto queste icone in stile wood ma si tratta solo di una proposta dovuta al fatto che le ho estratte da un set di icone gratuite anche per uso commerciale trovato su IconFinder.

Per l'installazione di questo widget dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra a questa si incolla il seguente codice

<!-- Social Fluttuanti Inizio -->
<script src='https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/social_fluttuanti.js' type='text/javascript'/>
<script type='text/javascript'> var immaginea, immagineb, immaginec
function pagestart(){ immaginea=new ipcj1(&quot;immaginea&quot;,70,82);
immagineb=new ipcj1(&quot;immagineb&quot;,50,60);
immaginec=new ipcj1(&quot;immaginec&quot;,30,40);
idpceinmov3(&quot;immaginea&quot;);
idpceinmov3(&quot;immagineb&quot;);
idpceinmov3(&quot;immaginec&quot;);
} if (window.addEventListener)
window.addEventListener(&quot;load&quot;, pagestart, false)
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, pagestart)
else if (document.getElementByid)
window.onload=pagestart </script>
<!-- Social Fluttuanti Fine -->

Si salva il modello. Ora si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla questo nuovo codice personalizzabile

<div id="immaginea" style="height: 70; left: -300px; position: absolute; width: 70;">
<a href="https://www.facebook.com/ideepercomputeredinternet" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_wbq_zqRPQ7fVguBEMEIC__nSqt8mGnKHFhPW9eWIKdImiWmPP9PLNlSb0RbRORNM4QN9pwbGx2CnpyjfDHEPy_aB9xX-XhgM1wBpngElv14H7QP3NSAZNERUy4lesje4ZAYDcnpKN8/s70-p-no/" /></a></div>
<div id="immagineb" style="height: 70; left: -400px; position: absolute; width: 70;">
<a href="https://twitter.com/parsifal32" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEKTOEzkFvKkwLNVKxZ-zpt9YzQhF1W1ToaGHKHTzKZImv2QiDAYIMA-bJ1Wv9h3gV1fXOQIRAnBu8zt0NZzPnhve05T1flNIUKvqbEi-HadAO7od-q6_WR4bqvMD4SUK0ahJBFoSMzS8/s70-p-no/" /></a></div>
<div id="immaginec" style="height: 70; left: -500px; position: absolute; width: 70;">
<a href="https://plus.google.com/+ErnestoTirinnanzi" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3nKYCTnze7ZRGMKeCM4O4YAU3vjPJ6C39IcA06sIQ4cAcrknCP6dFWEB0WsJZQS-E6GTKbx8Vz7L3MJ0BF-z9T-B9bKjVd5SxpKMMcpybGZkp-x4vfR0jBeZcZ85C0TJclcIz786Lso/s70-p-no/" /></a></div>

Vanno tolti i link ai miei account e sostituiti con quelli dei vostri. Le immagini sono state settate di dimensioni 70x70 pixel e il target="_blank" fa aprire il link in un'altra scheda. Si salva e il suo posizionamento non dovrebbe incidere sul funzionamento del widget. Questo secondo codice può essere incollato anche in un post o in una pagina statica in Modalità HTML.

Aggiornamento: Nella Demo si visualizza una linea tratteggiata rossa quando si passa con il mouse sopra alle  icone. Si tratta di un effetto hover specifico di quel blog di prova e non del widget.