Come personalizzare la didascalia nelle immagini di Blogger.

Usare il CSS per personalizzare l'aspetto delle didascalie delle immagini inserite nei post di Blogger.

Per dare informazioni aggiuntive ai lettori nelle immagini postate in un articolo può essere aggiunto il tag Title in modo da visualizzare un testo quando ci si passa sopra con il cursore. Si tratta di un elemento molto utile in chiave SEO insieme al gemello tag Alt per immettere il testo alternativo che viene visualizzato quando il browser non riesce per qualche ragione a aprire le immagini. Il tag Title può essere anche mostrato su più righe in modo da visualizzare un vero tooltip al passaggio del mouse.

Per rendere queste informazioni ancora più evidenti possiamo creare un testo da visualizzarsi sopra alla immagine con uno stile tale da renderlo più visibile e attrattivo. Gli utenti della piattaforma Blogger possono anche utilizzare la descrizione che può essere inserita direttamente dall’Editor. Dopo aver caricato l’immagine si seleziona e si clicca su Aggiungi Didascalia

Nella finestra che si apre sotto la foto bisogna digitare il testo da visualizzare

Per andare a capo basta premere su Invio e per terminare l’inserimento della Didascalia si clicca con il mouse sulla foto. Questa funzionalità di Blogger è poco utilizzata perché non c’è un modo semplice per personalizzare nell’aspetto la didascalia. Usando però strumenti come Ispeziona Elemento o Firebug possiamo ricavare il selettore della Didascalia per applicare delle regole CSS.  Andando su Modello > Personalizza > Avanzato > Aggiungi CSS possiamo per esempio aggiungere questo codice

table.tr-caption-container {
    border: 1px solid #191919;
    padding: 5px 10px 10px 10px;
}
table.tr-caption-container img {
    width: 99%;
    border: 1px solid #191919!important;
}
td.tr-caption {
    font-size: 16px;
    font-family: Georgia;
    color: #036;
    font-style: italic;
    font-weight: bold;
}

Dopo aver posizionato il cursore dopo l’ultima parentesi graffa si pigia Invio quindi si va in alto a destra e si clicca su Applica al blog. Il risultato è il seguente

che è sicuramente migliore della didascalia originale. Ovviamente non ci sono limiti alla fantasia e si possono inserire tutte le regole CSS che si vogliono. I meno esperti possono scaricarsi gratuitamente il mio ebook Guida all’HTML e al CSS. Chi abbia un template scaricato da internet o molto personalizzato avrà indubbiamente delle remore a andare su Modello > Personalizza perché potrebbe cambiare il  codice del suo template. In questo caso il codice è preferibile incollarlo su Modello > Modifica HTML subito sopra alla riga ]]></b:skin> della fine dei fogli di stile.