Descrizione con immagine in miniatura delle elichette di Blogger

Vediamo come inserire e personalizzare un messaggio con miniatura per ciascuna tag che ci interessa più di altre, se non tutte.

Come prima cosa andate su Modello > Modifica HTML e fate una copia del template perchè non si sa mai. Dopo che avete o non avete fatto la copia cliccate su espandi modelli widget e cercate con Ctrl + F la seguente riga:

<b:include data='top' name='status-message'/>

Ricordo che il blog non sarà appesantito perchè sono presenti i tag condizionali che fanno caricare il messaggio solo nella pagina relativa. 

A parte dobbiamo ora creare la sintassi da seguire per ciascuna etichetta che sarà questa:

<b:if cond='data:blog.url == &quot;http://nome-blog.blogspot.com/search/label/nome-etichetta&quot;'>
<div id='MsgEtichetta'>
<img src='URL_IMMAGINE' style='float: left; border:0; margin: 0px 5px 10px 0px;'/>
... Testo messaggio ...
</div>
</b:if>

Dopo che avremo personalizzato questo codice con l'Url della immagine il testo del messaggio ecc.. possiamo incollarlo immediatamente sotto alla riga che abbiamo cercato precedentemente. Il testo del messaggio può anche essere formattato inserendo grassetto (<b>), corsivo (<i>), salti di riga (<br/>) e link (<a href="URL">Testo ancoraggio</a>). 

Ii numeri dopo margin rappresentano la distanza nelle quattro direzioni tra l'immagine e i bordi. Gli attributi dopo style accanto all'URL della immagine servono per lo stile di quest'ultima. Nel codice proposto viene inserita a sinistra, senza bordo e con i margini dati dai quattro valori numerici. 

Adesso bisogna cercare la riga:

]]></b:skin>

e immediatamente sopra, incolleremo questo blocco di codice CSS:

.status-msg-wrap {visibility:hidden;display:none;}

#MsgEtichetta {
background:#FDBCB7; /* Colore dello sfondo */
color:#003366; /* Colore del testo */
padding:15px;
margin:4px 4px 15px 4px;
}

Dopodichè si salva il modello. La prima riga del blocco serve per nascondere il messaggio che appare sempre all'inizio di tutte le pagine delle etichette di Blogger.

I valori evidenziati in rosso possono essere personalizzati come li si vuole e riguardano il colore del testo (#003366), il colore dello sfondo (#FDBCB7), la distanza tra il testo e il bordo (padding:15px) nelle quattro dimensioni e la distanza tra il rettangolo e il layout in ciascuna direzione da fissare in senso orario a partire dall'alto (margin: …).