Mostrare icone sociali con effetto zoom alla fine del post.

Come inserire alla fine dei post di Blogger le icone sociali con Effetto Zoom collegate ai social network.

Dopo aver letto i contenuti di un articolo il navigatore può avere voglia di conoscere meglio il suo autore ed ecco quindi che in molti siti alla fine di un post ci sono le icone con i collegamenti agli account dell'amministratore del sito. Si tratta di una funzionalità diversa da quella che si ha invece con i bottoni di condivisione dell'articolo che hanno bisogno di un codice un po' più complicato e che servono per condividere gli articoli nei social selezionati con un solo click.

Ci sono moltissimi esempi di questa seconda opzione, mi limito a ricordare come esempio le piccone icone colorate che utilizzo anch'io in questo sito. Confrontando quel codice con quello che adesso vado a pubblicare si può anche fare in modo di rendere queste icone in grado di condividere i post. L'aspetto del widget che vado a proporvi sarà il seguente

che hanno degli effetti trasparenza e zoom quando vengono puntate con il cursore. Quando ci passa sopra il mouse sparisce la trasparenza e c'è un aumento delle dimensioni con l'effetto zoom. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga 

<b:includable id='post' var='post'>

Si clicca sulla freccetta nera per visualizzare tutta la sezione. Si scorre il codice fino a trovare la riga

<data:post.body/>

Se ce ne fossero due considerate la seconda. Subito sotto a questa va incollato questo codice

<div style="clear: both; text-align: center;">
<a class="zoomgallery" href="https://plus.google.com/+ErnestoTirinnanzi/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1m2m2UVRVMLnDPX8pkNs2ClsmHpiHA1bGRA2bu5oQ0NLGxwhyphenhyphenuFmS9p7AQFf6mgO3iRbrkRlbAPEcV1kt5kAt4x-OVba5gab3y_n1al81YaTAVT9HR1dpmSlLauHCt_jLJ7dtAyu2gJ4/w80-h82-no/google_plus.png" /></a>
<a class="zoomgallery" href="https://www.facebook.com/parsifal32" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEsehtvwcqU4W-BCGm9pyGc9OGfqr1x1tHR434-pAEjNRHUlJfxUM93ao1ZwT-9uBU35eyRAGYa43IuJ5D41Rs-nIjwTUB4VboWVAvvf5PhPZmLUM_tEoCivjI1Ahyphenhyphen7DWW6lz7uUg3vYI/w80-h82-no/facebook.png" /></a>
<a class="zoomgallery" href="http://www.pinterest.com/parsifal32/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjFT4W39vPBZiUmhFW0vqk7w4KuQc5dTzKfw4wTCvlhUjuMZlw8_QQdEt9MF6GXxQMBTazLpvFC6Pap2aTVAlO2QLI_RmxY33c1pys1Tcq1ng0bDHvGpA86nvVt1lJW6HhSJHyKiX-UTc/w80-h82-no/pintrest.png" /></a>
<a class="zoomgallery" href="https://twitter.com/parsifal32" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZXLA1V5zFofsDD2BtzW6ndP4VT1TJZTfOJqiDH1oxVgU4aCyveJc1WKkaeyS-TKIm7MRUbFKuBQFFr48G5CaWPfGIJnhWWSynSh2bfChdxhxhDSNfE_bpO2xTEHDU6X-hg3W-TaPJv0/w80-h82-no/twitter.png" /></a>
<a class="zoomgallery" href="https://www.youtube.com/user/parsifal32" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXnOw016j4p2FnvoeVv6Vnk_Y9DbxiVFaLTnTIRIeTMQUHwnXBQ_HCYKoMXtLL7TFA5Bm_DaLnmVc1AIvoDp-DWvHm_fwASDDYIi9m_I7w1tvNAiERaTCueujhg_7Mvvp32dH0gVdXdzA/w90-h92-no/youtube.png" /></a>
<a class="zoomgallery" href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIo0Dg7mwYnt8-NgKGqa18fJjks3Ov3rMJJ5-1vbTxl29c_udnJeAklpZeO1HSlsUKEpzPAki5xYMQg32WJHYsVCc7lJ9fv50dtVW9TY84pjfAuTTKlp3A-s0RwlL5Bb-HLLi7Yc1HeLc/w90-h92-no/rss.png" /></a>
</div>
<style type="text/css">
.zoomgallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 1px 5px 0;
}
.zoomgallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>

Si salva il modello.

PERSONALIZZAZIONI

1. Gli indirizzi colorati di viola sono i miei account e devono essere sostituiti con i vostri
2. Gli URL delle immagini da 64 pixel colorati di rosso possono essere sostituiti
3. Si possono eliminare i codici dei social che non ci interessano ed aggiungerne di altri mantenendo la stessa sintassi vale a dire aggiungendo e eliminando i singoli blocchi di codice che iniziano con <a class=" e che terminano con ></a>
4. Senza il mouse che le punta abbiamo le icone avranno dimensioni dell'ottanta per cento (0.8) e opacità del settanta per cento (0.7). Quando il cursore passa sopra a una icona c'è una transizione di 0.5 secondi con opacità al 100% e dimensioni del 110% (1.1).
5. Con queste impostazioni i bottoni saranno visibili non solo nei post ma anche in Homepage e nelle pagine di archivio. Se si vuole mostrarli solo alla fine degli articoli dobbiamo usare i tag condizionali e inserire questa riga <b:if cond='data:blog.pageType == &quot;item&quot;'> all'inizio del codice e quest'altro tag </b:if> alla sua fine.
6. Questo codice può anche essere incollato su Layout > Aggiungi un gadget > HTML/Javascript per mostrare queste icone in un widget da posizionare sopra l'area dei post, nel footer o anche in una sidebar nel caso si utilizzassero meno icone o più piccole.