Come sostituire in Blogger il titolo del widget con una immagine.

Sostituire il titolo del widget di Blogger con una immagine.

Con l'avvento del Designer Modelli è possibile personalizzare molti aspetti dei titoli dei widget. Si possono per esempio modificare i colori di sfondo e quelli del testo, la dimensione e il tipo dei caratteri. Comunque c'è sempre qualcuno che non è soddisfatto del tipo di modifiche che si possono apportare e vuole sempre qualcosa di più. Tempo fa mi fu chiesto in un commento se fosse possibile sostituire il titolo di un singolo widget con una immagine. In realtà la cosa è abbastanza semplice ma me ne ero dimenticato e il post con il relativo tutorial non lo avevo mai scritto.

Pongo rimedio adesso con la ragionevole certezza che alcuni lettori si appresteranno alla modifica subito dopo aver letto questo post. Come detto l'obiettivo è quello si inserire una immagine al posto del titolo di un singolo gadget. La foto da inserire può anche essere animata e, per questioni di estetica, deve avere dimensioni compatibili con quelle del titolo che va a sostituire. Come test ho usato il celebre sito CoolText che permette di creare delle scritte molto suggestive che poi possono essere salvate come immagine. Non sto qui a illustrare come ottenerla dato che si tratta di un procedimento molto intuitivo. Si scarica cliccando con il destro del mouse e scegliendo Salva immagine con nome. Ecco un esempio

Prima di ogni altra cosa dovrà essere caricata su un servizio di hosting quale Picasa, SkyDrive o DropBox e ottenerne l'hotlink. Come certo saprete, su Blogger ogni widget ha un nome e un ID unico ma una struttura simile a tutti gli altri. Se si va su Design > Modifica HTML, si salva il modello, si mette la flag a espandi i modelli widget, si può facilmente trovare il codice relativo a un certo gadget cliccando su F3 o su Ctrl+F. Sarà una cosa simile al seguente screenshot

in cui è stato evidenziato di viola l'inizio del gadget e evidenziato di rosa il suo nome. La stringa che inserisce il titolo del widget è quella evidenziata di celeste, cioè <data:title/>. Per sostituire il titolo con una immagine, bisogna mettere posto di <data:title/> il seguente codice

<img src="URL_IMMAGINE" alt="NOME_IMMAGINE"/>

con i parametri in rosso che dovranno essere sostituiti rispettivamente dall'URL dell'immagine e dal suo nome. Il tag Alt è importante soprattutto ai fini SEO. Dovrà cioè venire una cosa come in quest'altro screenshot

Si salva il modello e si visualizza il blog per vedere l'effetto che fa e, eventualmente, per calibrare meglio le dimensioni dell'immagine.