Come personalizzare e rendere più visibili i bottoni ufficiali di condivisione di Blogger.

Ricordo che questi pulsanti servono per condividere ciascun articolo in social network come Facebook e Twitter, in servizi come Blogger e Google Buzz oltre all'opzione di inviarlo come email. Mi sono già occupato di questo argomento in due diversi articoli.


Come inserire i bottoni di condivisione automaticamente su Blogger -
Come personalizzare i pulsanti di condivisione -

Fino a poco fa per inserire questi bottoni dovevamo andare su Blogger in Draft, adesso è possibile farlo anche usando la normale Bacheca di Blogger andando in Design > Post sul blog > Modifica, mettendo la spunta a Mostra i pulsanti per la condivisione e cliccando su Salva in fondo alla pagina.
Rimando ai due articoli precedenti per ulteriori informazioni su questa nuova feature. La cosa che salta agli occhi è che questi bottoni sono decisamente anonimi. E' chiaro che sono stati creati per andar bene su tutti i blog ma sono poco visibili e quindi, se non si modificano, saranno probabilmente poco utilizzati.
Per renderli un po' più vivaci possiamo andare su Design > Modifica HTML, espandere i modelli widget e cercare la riga

<div class='post-footer'>

immediatamente sotto si può incollare un codice come il seguente e salvare il modello.

<!-- BOTTONI CONDIVISIONE INIZIO-->
<span style='font-size:120%;font-weight:bold;vertical-align:middle;padding-right:6px; color:#940F04;'>Condividi:</span><div class='post-share-buttons' style='background:#FDBCB7; padding:4px;'>
<b:include data='post' name='shareButtons'/>
</div>
<!--BOTTONI CONDIVISIONE FINE-->

Si possono fare tutte le modifiche che vogliamo in rapporto all'aspetto e ai colori del nostro blog. Ho evidenziato di rosso quelle più importanti che sono

• 120% - dimensione dei caratteri della scritta da inserire accanto ai bottoni di condivisione
• 6px - che sono il numero di pixel tra la scritta e i bottoni di condivisione
• #940F04 - è il colore della scritta
• Condividi: - è l'espressione inserita che può essere sostituita da un'altra
• #FDBCB7 - è il colore dello sfondo dei bottoni per renderli più visibili e che deve essere intonato al nostro blog
• 4px - è la grandezza del padding cioè la dimensione dello sfondo all'esterno dei bottoni

Ricordo che, come tutte le personalizzazioni di Blogger, non è assolutamente detto che il risultato sia lo stesso per tutti i modelli. Ci potrebbero essere delle incompatibilità che ne impediscono la corretta visualizzazione.
Con questo codice i bottoni saranno visibili alla fine del post in tutte le pagine del blog e avranno questo aspetto

Saranno quindi decisamente più carini e visibili. Se si vuole togliere qualche pulsante si può utilizzare il procedimento illustrato in questo post. Essendo una funzionalità nativa di Blogger non incide significativamente sul caricamento della pagina e i pulsanti possono anche essere lasciati in homepage e nelle pagine di archivio.
Coloro che avessero modelli che non lo consentono dal punto di vista estetico possono rimpiazzare il codice precedente con quest'altro

<!-- BOTTONI CONDIVISIONE INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='font-size:120%;font-weight:bold;vertical-align:middle;padding-right:6px; color:#940F04;'>Condividi:</span><div class='post-share-buttons' style='background:#FDBCB7; padding:4px;'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>
<!--BOTTONI CONDIVISIONE FINE-->

In questo caso i bottoni saranno visibili solo nei singoli articoli, fermo restando tutte le opzioni di personalizzazione appena illustrate.
Questo articolo mi è stato ispirato da Giorgiogal di Genitori Sottratti.