Come aumentare la larghezza delle colonne, delle sidebar e dell’area dell’articolo in un modello di Blogger.

Come modificare le dimensioni delle sidebar e dell'area del post (main area) nei template di Blogger

Bisogna ricordare che di modelli per Blogger ce ne sono centinaia se non migliaia, alcuni anche molto complessi quindi questo mini-tutorial vuole essere un’introduzione a questo tipo di modifica per permettere ai blogger di farle nel proprio template sapendo almeno dove mettere le mani.

Il parametro che indica la larghezza in un modello è width che nei fogli di stile è seguito da due punti e da un valore che può essere assoluto o in percentuale. Per esempio

width:660px; oppure width: 32%;

che significa che la larghezza è 660 pixel oppure il 32% della misura a cui si riferisce. Ci sono varie sezioni del blog che hanno al loro interno l’indicazione della larghezza. Alcune sezioni esistono in tutti i template mentre altre solo in alcuni. Ecco una rassegna

1. Header-wrapper – E’ la parte alta del blog in cui c’è l’intestazione
2. Outer-wrapper – E’ l’insieme di tutte le colonne del blog, in sostanza l’area totale del blog con area del post e sidebar
3. Main-wrapper – E’ l’area in cui appare l’articolo
4. Sidebar-wrapper – E’ la sidebar del blog, ovvero la colonna in genere più stretta. Nel caso di un blog a tre o più colonne ci possono essere più sidebar e il loro stile può essere indicate p.e. come sidebar1-wrapper e sidebar2-wrapper
5. Content-wrapper – ovvero l’area dei contenuti è in genere simile all’outer-wrapper è rappresenta la parte del blog che comprende post e sidebar. Non è presente in tutti i modelli.

Un’esposizione di questo tipo si deve necessariamente basare su degli esempi e come blog-cavia ho preso questo Blog di Prova. Ecco come si presenta il blog prima delle modifiche




Andiamo su Layout > Modifica HTML e clicchiamo su F3 o Ctrl+F quindi inseriamo la parola width e vediamo tutte le righe che la contengono cliccando su Trova successivo (con Firefox, comunque il sistema funziona anche con gli altri browser). Troviamo i seguenti codici

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
#outer-wrapper {
  background:$bgcolor;
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
#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 */
  }
#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 */
}

Vediamo che la larghezza dell’intestazione è la stessa (660 pixel) di quella dell’area dei contenuti (outer-wrapper), mentre quella del post è 410 pixel, decisamente stretta, e quella della sidebar è 220 pixel. Da notare che 410+220=630 che è inferiore di 30 pixel ai 660 dell’outer-wrapper questo per non tenere attaccati post e sidebar. Si trova anche il codice max-width:700px; ma è nella sezione #header .description e riguarda il testo inserito come descrizione del blog, quindi non c’entra nulla con il nostro discorso.

Da 660 passiamo a 950 come totale di area dei contenuti e li ripartiamo così

1. header-wrapper: 950 pixel
2. outer-wrapper: 950 pixel
3. main-wrapper: 620 pixel
4. sidebar-wrapper: 300 pixel

Anche in questo caso larghezza header = larghezza outer e somma di main-wrapper e sidebar-wrapper inferiore di 30 pixel all’outer-wrapper. Andiamo nel modello e inseriamo questi dati al posto degli altri. Salviamo il template e vediamo come si presenta adesso il blog




come potete vedere l’area a disposizione è indubbiamente maggiore e può anche essere ulteriormente allargata.

La ragione per cui è molto spesso una necessità allargare sia il main-wrapper che la sidebar risiede nella seguenti cause

1. su Youtube sono da qualche tempo presenti i video in alta definizione che hanno un player più largo e che per far entrare nei modelli stretti dobbiamo modificare i parametri del l’HTML.
2. Se si usa Adsense in modelli con main-wrapper largo possiamo inserire anche due annunci di rettangoli grandi affiancati
3. Non tutti i widget sono modificabili in larghezza e qualche volta non entrano se si hanno delle sidebar troppo strette
4. In modelli con main-wrapper largo ci possono comodamente stare anche foto e immagini di grandi dimensioni; nei modelli stretti dobbiamo ridimensionarle perdendo la perfetta visione dei particolari

Devo solo aggiungere alcune cose

• Se si ha un template con delle immagini di sottofondo questo tipo di personalizzazione molto spesso fallisce. Per esempio in questo blog il risultato ottenuto con queste modifiche è stato bruttino proprio perché ha  un’immagine di sfondo. Se si ha un blog in cui si è inserita un’immagine di sottofondo e si vuole allargare area del post e sidebar occorre per prima cosa togliere l’immagine, allargare il template con il procedimento appena illustrato quindi inserire nuovamente il background.
• Nel caso si abbiano dei modelli più complessi il modo di procedere è comunque questo e si possono fare tranquillamente delle prove anche senza conoscere l’HTML semplicemente cercando le righe di codice con width e salvando preventivamente il template per un eventuale backup.
• Se la larghezza (width) è presente sotto forma di percentuale ovviamente dobbiamo fare in modo che non si superi il 100% con la somma di main-wrapper e sidebar (una o più di una). In certi modelli sono presenti entrambe le notazioni, assoluta e percentuale; occorre quindi fare un po’ di calcoli da scuola media inferiore…
• Una simile procedura può essere anche utilizzata nel caso si abbiano delle colonne a piè di pagina come per esempio in questo blog. La larghezza delle colonne è rispettivamente 31%, 32% e 31% (somma 94%

Aggiornamento: Questi codici sono relativi a modelli di molti anni fa e quindi sono da considerare  un esempio su come procedere visto che gli ID e le classi di stile sono generalmente diversi.