REDAZIONE

Personalizzare a proprio piacimento lo sfondo delle colonne laterali del Blog è molto semplice, vediamo come.

Quello sopra è il template che stiamo utilizzando. Andiamo nella sezione Presentazione > Opzioni avanzate del pannello di controllo del Blog e apriamo il Foglio di stile per modificare il codice che si riferisce alle colonne laterali di sinistra e di destra:

#left {
    overflow: hidden;
    width: 180px;
    background-color: transparent;
    line-height: 140%;
    float: left;
    }

#right {
    overflow: hidden;
    width: 180px;
    background-color: transparent;
    line-height: 140%;
    float: right;
    }

Il parametro che interessa a noi per modificare lo sfondo delle colonne è questo:

Se vogliamo semplicemente inserire un colore, basta sostituire il valore transparent con il valore del colore utilizzando il nome del colore (in lingua inglese) oppure, per avere colori più precisi, i valori esadecimali.

Ad esempio:
se vogliamo il colore rosso, la riga diventa:

che, in valori esadecimali, equivale a:

Per il nostro esempio, invece, vogliamo riprendere il colore dell’header del blog, ovvero #BD4f3, e associato alla colonna di sinistra:

Nei template “standard” la lunghezza delle colonne dipende dal numero e dalla dimensione degli elementi attivi al loro interno. Questa opzione influenza molto anche il colore di sfondo, ovvero, se nella colonna abbiamo attivato un solo elemento, lo sfondo si visualizzerà in questo modo:

Per ovviare questo problema la soluzione è molto semplice:
apriamo di nuovo il nostro Foglio di stile e al codice della colonna aggiungiamo l’attributo height che determina l’altezza che la colonna dovrà avere:

#left {
    overflow: hidden;
    width: 180px;
    height: 900px;
    background-color: transparent;
    line-height: 140%;
    float: left;
    }

Il valore da associare ad height deve essere in pixel ed è a proprio piacimento.
In questo modo, anche avendo un solo elemento attivo all’interno della colonna, il risultato è questo:

 

Come inserire un'immagine di sfondo alle colonne laterali del Blog

Se vogliamo inserire come sfondo, anziché un colore, un’immagine che ci piace, dobbiamo innanzitutto avere un’immagine con la larghezza uguale a quella della colonna: 180 pixel. La dimensione la possiamo conoscere grazie all’attributo "width: 180px;" presente negli oggetti #left e #right.
Per quanto riguarda la lunghezza, invece, possiamo deciderla a piacere.
Come immagine di sfondo per la nostra colonna abbiamo scelto questa:

Una volta caricata nel blog (vedi come fare in questo tutorial) o in qualsiasi parte del web, andremo a inserire nel Foglio di stile il codice che permetterà di visualizzarla nel Blog.
All’interno degli oggetti che rappresentano le colonne eliminiamo la riga:

e al suo posto inseriamo questa nuova riga di codice:

#right {
    overflow: hidden;
    width: 180px;
    background: url(‘http://indirizzowebdellanostraimmagine’) no-repeat;
    line-height: 140%;
    float: right;
    }

dove:
url contiene l’indirizzo web dove è situata l’immagine;
no-repeat mostra l’immagine una volta soltanto, omettendo il comando l'immagine verrà ripetuta infinite volte nello spazio a disposizione.

Dopo aver sostituito il codice e aver modifcato il colore del titolo degli elementi in sidebar, il nostro risultato finale è questo:

Buon lavoro!