Come inserire i bottoni di condivisione animati su Blogger.

Pulsanti animati di condivisione sui social network per Blogger. Ci sono i bottoni per Facebook, LinkedIn, Stummbluupon, Twitter, Google Plus, OKNotizie e Digg.

Ecco un'altra interessante variante per l'inserimento di pulsanti di condivisione nei vari social network e social bookmarking. La novità è che stavolta si tratta di bottoni che si animano al passaggio del mouse con un movimento orizzontale che sfrutta la libreria JQuery.

Ho inserito i pulsanti di Facebook, Twitter, Google Plus, Digg, LinkedIn, OKNotizie e Stumbleupon. Alcuni di questi social possono però essere sostituiti da altri che ritenete più utili mantenendo la stessa sintassi e acquisendo il codice dall'articolo che illustra come crearsi da soli delle icone di condivisione.

Quando un navigatore passerà con il cursore sopra a queste icone provocherà un movimento laterale decisamente originale. Ovviamente quando si cliccherà sopra a un bottone si potrà condividere il post sul social network corrispondente

La scritta visibile sopra ai bottoni può essere modificata anche nel colore oppure tolta del tutto. Prima di procedere con l'installazione occorre andare su Modello > Backup/Ripristino e salvare il modello completo. Si torna su Modello > Modifica HTML > Procedi e si espandono i modelli widget.

Pigiando su F3 o su Ctrl+F si cerca la riga </head> e subito sopra si incolla il codice seguente

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
  $(&quot;#bottoni tr td&quot;).hover(function(){
    $(this).find(&quot;img&quot;).animate({left:10},50);
    $(this).find(&quot;img&quot;).animate({left:-10},50);
    $(this).find(&quot;img&quot;).animate({left:0},50);
  });
});
</script>

Si cerca poi la riga ]]></b:skin> e, subito sopra, si incolla quest'altro codice

#bottoni  {
      width:100%px;
      height:50px;     
      position:relative;
      }
#bottoni tr td img {
      width:50px;
       height:50px;
       position:relative;
      }

Infine si posizionano i bottoni nel punto del layout che riteniamo più opportuno. Se li vogliamo visualizzare alla fine dei singoli post, basta cercare la riga <data:post.body/> e, immediatamente dopo di questa, incollare quest'ultimo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #F1F1F1;width:100%;position:relative;margin-top:13px;'> </div>
<div style='margin-left:auto;margin-right:auto; width:600px;position:relative;'><div style='color:#940F04;position:relative;top:12px;'><center>Se ti piace questo post ti bastano 3 secondi per condividerlo</center></div>
<table align='center' cellpadding='8' cellspacing='1' id='bottoni'>
<tr>
<td>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKF4HNtT51rgKDqTeDHYkqbQINybGptfi_eHDjFrOB84D1to5m0TZR3K483639hukni1llu-EDB3B-Wmik3-y_xyPBLMHHXFNi7AB_NNXQikqNWllL-wqNaQSQtcDLE021iF02xCSvW8c/s65/facebook-icon.PNG'/></a></td>
<td>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; @parsifal32&quot;' rel='nofollow' target='_blank' title='Twitta!'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4iltTMn_RoD4R-7SAPcmi34q25Fq-oMp3nXCyiZ-OsWo25I8TgUQadKDTMoaLxFg32ncu6kDdWzg9nFfMdqZLpIwmhLbw2cg97WV2BIBrARGv9rirh_NIiVJ_SS1M2WN-VUkvC5h_STs/s100/twitter-icon.PNG'/></a></td>
<td>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img alt='Condividi su Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmcD_hnL5usAPYftKXzXyyfYQS22p2EVEErnxE764zL9nDQW9v5AFH4CIZvhCraZAf7lGGoagGL_eo-J1v13E4tq_KA-s08m66wzQBEKexUeEh55sm1wmj_J0aFqXDPyHH34ESY5HbW8/s79/googleplus-icon.png' title='Condividi su Google Plus'/></a>
</td>
<td>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Digg'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlEgRQg8KmDGjycBljSoFkxw6yNtyBwMnv186jpq0G3imzL1sr3u5j_w1aoFCZLrkmpopxqfP-84PnENgWQSGjD0G1wqj-XEAk04e_I6JGOGyniQBPSnGaQhIPZLhZavM1c2LBHllFIM/s79/digg-icon.PNG'/></a></td>
<td>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Linkedin'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxuTAZXk_lXS2jUdulzh8gjYiRCQR6-1e6FVDPB9IAqEzfiJaHplVpWJuCmCwPLD6qOu3neXpf8YCx2nn4yeK5oZP_EibG9m3-ozUFceabD4y-EnTw4zqhMGJZIaTrWyS905Lw0OqHYTo/s79/linkedin-icon.PNG'/></a></td>
<td>
<a expr:href='&quot;http://oknotizie.alice.it/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Vota su OKNotizie' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizLJByoPDMZOJc1wn26so01Jsc0aQmuCGstxz7dD_tH7K4tX0RLwff6EAZTJ9oowCs2bUZF_t3ejpHr6ePV_eoqBJW9FpaWdMBwpTIL039YGa74xs_UgfuJQrNRxd6sM1e0v_SNcutaGg/s79/oknotizie.png' title='Vota su OKNotizie'/></a></td>
<td>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Condividi su Stumbleupon'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2y6m1zXooDHu5iSWSydQlBvy_uSWYi64QqS0UrBaS8aw5N_nT0rZwypo_I1VaGWTuQDwXuZ-MY6kvAe4czU8M57u_ZGrIF6J-7nf9w0Q1jVOEap-WKNoZo6D2AWt7wL3Eo6bxi2KLLYQ/s79/stumbleupon-icon.PNG'/></a></td>
</tr>
</table>
</div>
</b:if>

Come vedete sono presenti due tag condizionali per mostrare i pulsanti solo nei post. Le varie icone possono anche essere sostituite da altre di vostro gradimento cambiando gli URL dopo averle caricate su Picasa. Se intendete aggiungere altri bottoni potete aumentare la larghezza del widget (600 pixel). Si possono anche modificare le dimensioni delle singole icone per eventualmente renderle più piccole. Basta mettere per esempio 40 al posto di 50. In questo modo si potranno inserire ancora più bottoni se si ha un layout non troppo largo.

Si possono modificare anche altri parametri che però lascio alla fantasia del lettore. L'unico necessario è il vostro l'username su Twitter che deve essere sostituito a @parsifal32. Si salva il modello.