Come inserire un’immagine nelle parti laterali esterne di un blog su Blogger.

Questo sistema è stato testato sul blog Minima ma penso che possa andar bene per quasi tutti i blog che hanno nei fogli di stile una sezione body e una outer-wrapper.  Rappresentano rispettivamente l’aspetto del blog nella sua interezza e quello più esterno che potremmo chiamare area di lavoro in cui sono inseriti la zona per il post e le sidebar.

I parametri di larghezza (width) di ciascun settore possono anche essere variati per le diverse esigenze ma eventualmente vi tornerò sopra in un altro articolo. Ho provato questa modifica nel blog Come creare un blog su Blogger che all’inizio aveva questo aspetto

Se si inserisce un’immagine tipo texture nella sezione body come mostrato in questo codice

body {  
  background:$bgcolor;
  background-image:url(http://is.gd/1DZGV);
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

in cui è stata aggiunta la riga in rosso e è stato inserito l’URL della texture (in blu) il blog cambia decisamente sfondo. Ovviamente a seconda dei modelli le righe di codice non saranno esattamente le stesse ma l’importante è aggiungere quella indicata. Si otterrà un aspetto simile a questo

 

Se invece vogliamo inserire un’immagine grande che prenda tutto lo schermo dobbiamo

1. Trovarla scegliendola magari dagli wallpapers
2. Caricarla nel web con un servizio tipo Skydrive
3. In questo caso il codice da modificare diventa simile a questo 

body {
   background:$bgcolor;
   background-image:url(URL_immagine);
   background-repeat:no-repeat;
   background-position: center top;
   background-attachment: fixed;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

dove sono state inserite le quattro righe in rosso. Al posto di URL_immagine inserire l’URL del wallpapers caricato nel web. Ho caricato questa immagine ed ecco che aspetto ha preso il blog

L’immagine  rimarrà fissa anche durante lo scorrimento della pagina. Questa soluzione è da preferire se si inserisce una foto come sottofondo invece di una texture.

Adesso cerchiamo in Layout > Modifica HTML la sezione Outer-wrapper che avrà un codice di questo tipo

dal codice si vede che la parte realmente utilizzata del blog è di 660 pixel e che non c’è un background. Anche in questo caso ricordo che potranno esserci delle differenze tra modello e modello. Aggiungiamoci una riga di codice in questo modo

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  background:$bgcolor;
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

dove è stata aggiunta la riga colorata di rosso. Salviamo il modello. Ecco come si presenta adesso il blog

Come potete vedere solo la parte esterna è ricoperta dalla foto mentre quella centrale formata dall’header, dall’area del post (main-wrapper) e della sidebar (sidebar-wrapper) hanno uno sfondo bianco. 

Volendo si può personalizzare il colore dello sfondo a piacimento andando su Layout > Caratteri e Colori e modificare il colore di sfondo della pagina

Chiudo con la precisazione che non è detto che questo procedimento possa andar bene per tutti i modelli e con la raccomandazione di salvare sempre il modello completo prima di iniziare una qualsiasi modifica.