Modificare la larghezza del blog e delle sidebar in Blogger.

Come cambiare le larghezze di tutto il blog su Blogger e/o delle sidebar intervenendo sul codice del modello.

Con l'avvento sei anni fa del Designer Modelli gli utenti di Blogger possono crearsi il layout che preferiscono. Dopo aver scelto il Template si va su Modello -> Personalizza quindi si sceglie la scheda Layout in cui ci sono 8 opzioni per il corpo del post e 3 per il footer o piè di pagina. Per il footer si può optare per una, due o tre colonne mentre per il corpo del post si può scegliere un layout senza sidebar, con una sidebar a sinistra e una a destra, per una sola sidebar (a sinistra o a destra), per due sidebar (tutte a destra o tutte a sinistra) o per tre sidebar (due a sinistra e una a destra o viceversa).

Queste configurazioni debbono essere fatte all'inizio perché dopo che si sono inseriti dei widget o delle personalizzazioni si rischierebbe di sfalsare tutto. Un discorso analogo va fatto per la scheda Modifica le larghezze in cui settare la larghezza dell'intero blog e della/e sidebar. Infatti già il solo cliccare su Modello -> Personalizza può portare a delle modifiche non volute del modello se si sono già inserite delle personalizzazioni.

Si pone quindi il problema di come modificare le larghezze senza usare il Designer Modelli.

Lo si può fare operando nel codice. Dopo aver salvato il template per un eventuale ripristino si va su Modello -> Modifica HTML e si cerca la sezione  <b:template-skin> che si trova nella primissima parte. Si clicca sulla freccetta nera posta alla sinistra per visualizzare tutto il codice della sezione. Proprio all'inizio visualizzeremo le righe che impostano le larghezze del sito

<b:template-skin>
      <b:variable default='960px' name='content.width' type='length'/>
      <b:variable default='0' name='main.column.left.width' type='length'/>
      <b:variable default='310px' name='main.column.right.width' type='length'/>

Il blocco di codice precedente si riferisce a un modello con una sola sidebar sulla destra. In caso di un layout diverso ci possono essere più righe. La riga con content.width imposta la larghezza di tutto il blog, quella con main.column.left la larghezza della sidebar di sinistra e quella con main.column.right la larghezza della sidebar di destra. Nel codice del modello che ho preso come test la colonna di sinistra non c'è e quindi ha larghezza 0. Tutto il blog è largo 960 pixel e la sidebar di destra è invece larga 310 pixel. La main area cioè la larghezza dell'area del post sarà quindi strettamente inferiore a 960-310=650 pixel.

Modificando i valori delle larghezze e salvando il modello potremo cambiare l'aspetto del layout senza rischiare di perdere le altre personalizzazioni. Concludo ricordando che è meglio non impostare un valore troppo grande di larghezza perché ci potrebbero essere delle difficoltà di visualizzazione con dispositivi che abbiano una bassa risoluzione anche se è stata attivata la versione per il mobile o se si utilizza un modello di tipo Responsive.