Come personalizzare autonomamente ciascun widget di un blog su Blogger.

Praticamente in tutti i modelli di Blogger c'è un solo stile che vale per tutti i widget presenti nella sidebar. Andando su Layout > Caratteri e Colori se ne può cambiare il tipo di font del titolo o del testo, la dimensione dei caratteri. Non in tutti i modelli esistono queste personalizzazioni che hanno anche la controindicazione di essere applicate globalmente a tutti i widget presenti.

In taluni modelli ci può essere l'esigenza di visualizzare un widget in modo diverso da un altro. Per esempio se vogliamo cambiare il background degli ultimi articoli e renderlo diverso da quello dei commenti recenti. Prima di procedere con l'illustrazione del procedimento ricordo che ogni modello fa storia a sé, specialmente se è superpersonalizzato. Inoltre faccio presente che quando si opera sull'HTML è sempre prudente scaricare un modello completo per un eventuale backup.

Per prima cosa bisogna individuare il widget che ci interessa andando su Layout > Modifica HTML (senza espandere i modelli widget)

Ciascun widget è determinato da un suo id che è unico. Nel caso che abbiate una sola sidebar si trovano tutti sotto la riga

<div id='sidebar-wrapper'>

mentre quelli nella stessa area del post si possono trovare sotto il codice

<div id='main-wrapper'>

Alcuni widget, non avendo titolo, sono individuati da id='HTMLX' dove al posto di X si trova un numero. Mettiamo il caso che si voglia personalizzare il widget Label1. Occorre andare su Layout > Modifica HTML e cercare la riga

]]></b:skin>

Immediatamente sopra incollare un codice simile a questo

#Label1 {
background:#FFF4BF;
padding-left:15px;
font:14px Trebuchet MS;
border-bottom:2px solid #FFE25F;
}

#Label1 h2 {
height:35px;
padding-top:10px;
font-size:0px;
}

#Label1 a:link {
color:#5F5F5F;
text-decoration:none;
}
#Label1 a:visited {
color:#5F5F5F;
text-decoration:none;
}
#Label1 a:hover {
color:$titlecolor;
text-decoration:underline;
}

Salvare il modello. Il codice è stato diviso in tre blocchi: quello azzurro definisce lo stile dell'intero widget, quello verde si riferisce al titolo del widget mentre quello arancio serve per personalizzare i colori dei link, di quelli visitati e di quelli puntati con il mouse (hover). Il codice immesso è puramente indicativo, non solo per la scelta di Label1 come gadget, ma perché possono essere inseriti colori, famiglie di font, bordi come più ci piace. Possiamo anche inserire una immagine di sottofondo nei primi due blocchi. La riga da aggiungere sarebbe in questo caso

background: url(Indirizzo-Immagine) no-repeat bottom left;

dove al posto di Indirizzo immagine si sostituisce il suo URL dopo averla caricata sul web.