Cambiare la larghezza dei template di Blogger

Uno dei primi passi per modificare o creare un proprio template per Blogger è capire come gestire la larghezza del template e delle sue varie sezioni.

Consiglio, prima di fare prove di questo genere, di crearsi un blog apposta dove poter fare varie prove, per evitare di danneggiare il template del vostro blog "ufficiale". Ma se proprio siete degli amanti del brivido e non volete fare un blog di prova, ricordatevi prima di fare un backup del vostro template.

Per la scrittura degli esempi, io ho utilizzato il template Minima Ochre, presente tra i modelli predefiniti su Blogger (da Layout -> Scegli nuovo modello). Ecco come ci appare all'inizio (per vedere ingrandite le immagini seguenti, cliccateci sopra):

Andiamo in Layout -> Modifica HTML e nel codice html cerchiamo la parola outer-wrapper facendo CTRL+F (sia in Firefox che in Internet Explorer). La prima porzione di codice che vediamo è la seguente:

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

I wrapper rappresentano delle "porzioni" della pagina html che rappresenta il nostro template: l'outer-wrapper del codice sopra rappresenta il "contenitore" più esterno. Proviamo a cambiare il valore di width ("larghezza" in inglese, nella riga evidenziata in rosso) da 660px a 950px (la larghezza massima consigliabile per un blog a larghezza fissa), salviamo e visualizziamo il blog. Questo è il risultato che otteniamo:

Come vediamo, il template si è allargato, anche se la larghezza dei post e della colonna a destra non sono variati. Subito sotto l'outer-wrapper troviamo la seguente porzione di codice:

#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 */
  }

Il main-wrapper rappresenta il contenitore dei post sul nostro blog, mentre il codice seguente:

#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 */
}

rappresenta la colonna di destra. Il main-wrapper è largo 410px (px indica pixel, unità di misura dello schermo) mentre il sidebar-wrapper è largo 220px: 410 + 220 = 630, cioè il valore originale dell'outer-wrapper meno un margine di 30. Cambiamo il valore di width nel main-wrapper, portiamolo a 700px (700 + 220 = 920, quindi lasciando sempre 30 di margine su 950 che abbiamo impostato come larghezza), salviamo e visualizziamo il blog:

Ed ecco il nostro template modificato, con molto più spazio dedicato ai post!

Possiamo vedere però che l'header (cioè la parte in alto del template, dove si trovano titolo e descrizione del blog) è rimasto sempre della stessa larghezza. A questo punto non ci resta che cercare l'header-wrapper:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Cambiamo anche in questo caso il valore da 660px a 950px, salviamo e visualizziamo il blog:

Bene, adesso il ridimensionamento è completo: in pratica, avete creato il vostro primo template!

Potete fare delle prove cambiando in maniera diversa le larghezze, ad esempio allargando la sidebar-wrapper piuttosto che il main-wrapper. Sebbene quanto esposto sopra funzioni perfettamente per il template Minima Ochre, altri template potrebbero avere impostazioni diverse: ad esempio Tic Tac Blue contiene un content-wrapper, che essendo l'area che conterrà main-wrapper e sidebar-wrapper, va ridimensionata allo stesso modo dell'outer-wrapper. Altri template potrebbero avere impostazioni diverse. La cosa migliore è cercare la parola width all'interno dell'html e provare a capire il significato del valore e modificarlo per vedere che effetto fa.

In futuro pubblicherò altri articolo su come interpretare e modificare la larghezza delle aree del template. Se avete dubbi o qualcosa non funziona come dovrebbe, lasciatemi un commento.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!