Come cambiare lo sfondo alla sezione dei post e alle colonne su Blogger

In passato ho spiegato come cambiare lo sfondo del blog su Blogger e come inserirlo in un singolo post, ma in molti mi hanno chiesto di estendere questa modifica anche a tutto il corpo centrale del blog (dove si trovano i post per intenderci) o a una singola colonna in particolare, ed eccomi qui ad approfondire l'argomento.

In realtà si tratta solo di cambiare il punto di intervento nel primo post, al quale rimando per maggiori approfondimenti. Ricordo come sempre di eseguire il backup del template, così da poter tornare indietro in caso di disastri.

Scegliere uno sfondo e pubblicarlo in rete

Per prima cosa, dovrete scegliere gli sfondi che volete utilizzare. Consiglio di stare attenti al contrasto con il testo del post o dei widget nella colonna laterale: se il testo è chiaro va scelto uno sfondo scuro, e viceversa. Se dovete ridimensionarlo, potete usare ResizR, di cui ho parlato qualche tempo fa.

Una volta scelte le immagini, dovrete pubblicarle in rete, magari utilizzando strumenti come Skydrive o Imageshack, e recuperarne l'esatto indirizzo.

Cambiare lo sfondo alla sezione dei post

Dalla vostra bacheca, andate in Layout->Modifica HTML e cercate nel template questa riga di codice:

#main-wrapper {

Nei vari template personalizzati potrebbe essere diversa, magari solo

#main {

o:

.main-wrapper {

o ancora:

.main {

In genere la parola main c'è sempre, ma potrebbe essere sostituita dalla parola body. Se proprio non trovate niente di simile, sostituite man mano i vari wrapper che trovate, finchè beccate quello giusto.

Nel caso del template Minima, le righe successive a questa risulteranno essere così:

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

Questo codice definisce l'aspetto grafico della parte del blog che contiene i post. Come descritto nel precedente articolo (che vi consiglio di leggere per approfondire tutte le opzioni possibili), inserite la riga che indica lì'immagine di sfondo:

#main-wrapper {
  width: 410px;
  float: $startSide;
  background-image:url(indirizzoimmagine);
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

Sostituendo indirizzoimmagine con l'indirizzo dell'immagine che volete utilizzare come sfondo e che avete pubblicato in rete. Se è già presente una riga con background-image (o semplicemente background ma con l'indirizzo di un'immagine), evidentemente il vostro blog ha già uno sfondo (anche se magari non si nota), e potete modificare quello già presente.

Salvate il blog e visualizzatelo per vedere il nuovo sfondo:

Cambiare lo sfondo alle colonne laterali

In questo caso, cambia la riga da cercare:

#sidebar-wrapper {

Anche in questo caso potrebbe essere differente, ma la parola sidebar dovrebbe esserci sempre. Se avete aggiunto la terza colonna seguendo le mie istruzioni, dovreste trovare anche:

#new-sidebar-wrapper {

E tutte le altre sezioni che avete aggiunto seguendo il post di qualche tempo fa.

Trovata la riga di codice iniziale, avrete trovato questa porzione di codice (nel caso di Minima):

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

Alla quale aggiungerete la stessa riga aggiunta prima, con tutte le attenzioni e modifiche di cui ho parlato prima:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  background-image:url(indirizzoimmagine);
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

Sostituendo anche in questo caso indirizzoimmagine con l'indirizzo dell'immagine che volete utilizzare come sfondo della colonna. Ecco l'effetto che otterrete:

 

Ovviamente, se lo sfondo rende difficile la lettura del post (come nel mio esempio, d'altronde), potete cambiare colore ai caratteri del blog da Layout->Caratteri e colori:

 

Per suggerimenti o difficoltà, lasciatemi un commento!