Come allineare i bottoni di Facebook, Twitter, Google +1 ecc.

L'introduzione del bottone di voto Google PlusOne ha messo un po' in difficoltà i blogger meno esperti visto che i pulsanti importanti da inserire, alla fine o all'inizio del post, sono adesso almeno tre (Facebook, Twitter e appunto Google +1). Non basta quindi metterli uno a sinistra e uno a destra ma dobbiamo giocoforza usare un altro metodo. Mi sono già occupato en passant di un problema simile quando ho illustrato come allineare due o più annunci pubblicitari. Su quella stessa falsariga vediamo come per esempio sia possibile inserire uno accanto all'altro il Mi Piace di Facebook, il bottone ufficiale di Twitter, il pulsante Google +1  e una icona per  contattarci per email. Ecco come potrebbe essere il risultato

Il codice da inserire nel modello potrebbe essere come quello seguente

• Codice per tabella bottoni -

La prima e l'ultima riga servono per mostrare i bottoni solo nei post. I codici dei singoli elementi sono colorati in modo diverso per rendere più semplice la loro individuazione. In sostanza si tratta di postare una cosa simile a questa

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table class="tabellabottoni" cellspacing="0" cellpadding="0">
<tr>   
    <td style="padding-top: 17px;">
   
………. Codice Mi Piace Facebook  ……….

    </td>
    <td style="padding-left: 15px;"> 

 ………. Codice Bottone Twitter …………

    </td>
    <td style="padding-left: 15px;">

……….. Codice Google PlusOne ……….

    </td>
    <td style="padding-left: 15px;">

 ………. Immagine con link che apre il programma predefinito di posta elettronica ……….
    
    </td>
  </tr>
</table>
</b:if>

I valori dei pixel tra i vari bottoni e tra i bottoni e il layout possono essere personalizzati a piacere e, oltre agli attributi padding-top e padding-left,  si possono usare padding-bottom e padding-right con ovvio significato. Ho inserito anche la classe tabellabottoni che può essere utilizzata per allineare i pulsanti tramite i CSS. E' anche possibile distanziare gli elementi inserendo dei valori nei parametri cellspacing, spazio tra le celle e cellpadding, spazio dentro le celle. Questa tabella può essere incollata subito sopra la riga

<div class='post-footer'>

o in altra zona del template. Ricordo che per farlo occorre andare su Design > Modifica HTML e espandere i modelli widget. Nel caso si volesse usare anche i CSS per allineare i pulsanti, occorre cercare la riga

]]></b:skin>

e, subito sopra, incollare un codice simile a questo

.tabellabottoni {margin: 0 auto; border:none; width: 100%;}
.tabellabottoni td {text-align: center; vertical-align: top;}

che serve per allineare i pulsanti al centro e al bottone più in alto. Se si opta per questa configurazione, bisogna eliminare gli stili dalle celle della tabella, cioè bisogna togliere i tag tipo style="padding-top: 17px;". Se invece non si utilizzano i CSS, si può togliere la tag class="tabellabottoni" che in questo caso diventa pleonastica.  Ho pubblicato una demo online in questo post. Ricordo che, con questo metodo, si possono mettere tra l'altro anche due pulsanti di Facebook, cioè il Mi Piace accanto al Consiglia. Se si vogliono inserire più pulsanti, non resta che inserire altre celle del tipo

<td style="padding-left: 15px;">
Codice del bottone     
    </td>

prima di </tr> </table>.