Come modificare la larghezza del blog e delle sidebar con i nuovi modelli di Blogger.

Come aumentare o diminuire la larghezza di sidebar, dell'area del post e degli altri elementi di un blog su Blogger.

L'avvento del Designer Modelli ha cambiato molti comportamenti tra gli utenti di Blogger che erano ormai consolidati. Una delle cose più interessanti dei template generati mediante il Designer Modelli è quello della possibilità di configurare il Layout e  cambiare le larghezze di Blog e Sidebar. Quando si fa per la prima volta, in fase di progettazione, si va su Design > Design Modelli > Modifica le larghezze

Si agisce sugli appositi cursori per fissare le larghezze dell'intero blog e di una o più sidebar a seconda dell'aspetto che si è scelto andando su Designer Modelli > Layout. Questo va benissimo quando stiamo ancora lavorando sul template del blog ma se ci viene voglia di modificare le larghezze dopo che lo abbiamo già riempito di widget e di personalizzazioni la cosa cambia, perché effettuare questa modifica equivale più o meno a reinstallare un nuovo modello e porta a un generale annullamento di tutte le personalizzazioni che abbiamo già fatto.

Come modificare le larghezze di blog e sidebar senza incidere su altre personalizzazioni e widget

Il concetto è quello di non usare questo strumento di Blogger, pur utilissimo in un diverso contesto, ma di operare direttamente sul codice. Andiamo su Design > Modifica HTML e cerchiamo un blocco di codice come questo

<b:variable default='930px' name='content.width' type='length' value='960px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
      <b:variable default='360px' name='main.column.right.width' type='length' value='260px'/>

che in genere si trova sotto la riga <b:template-skin>. Gli attributi evidenziati di rosso possono anche mancare se non si sono modificate le larghezze del layout. Le tre righe introducono tre variabili che rappresentano rispettivamente

1. La larghezza totale del blog: 930 pixel il dato di default e 960 pixel quello che è stato configurato con il cursore
2. La larghezza della sidebar di sinistra: in questo layout la sidebar di sinistra non è presente e quindi ha larghezza 0 pixel
3. La larghezza della sidebar di destra: 360 pixel è il valore di default e 260 pixel è quello che è stato scelto con il cursore

Se per esempio volessimo passare a una larghezza del blog di 980px con una sidebar di destra di 320px dovremo modificare il codice in questo modo

<b:variable default='930px' name='content.width' type='length' value='980px' />
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='320px' />

Si procede quindi al salvataggio del modello. Come è noto Blogger mette il limite di 1000 pixel per la larghezza del modello. Gli appassionati di template particolarmente ampi possono, con questo metodo, inserire anche valori maggiori di 1000 pixel.

<b:variable default='930px' name='content.width' type='length' value='1050px' />
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='350px' />

Con il codice precedente si ha una larghezza totale di 1050 pixel e una sidebar di 350 pixel. Ricordo però che i modelli molto larghi sono visualizzati in modo non corretto dai dispositivi mobili quali gli iPhone o anche dai netbook a schermo a bassa risoluzione. Se dopo questa modifica si va su Design > Designer Modelli > Modifica le larghezze si vedrà che la larghezza massima del cursore si è modificata.

Se si ha un modello anche con la sidebar di sinistra, si può per esempio intervenire in questo modo

<b:variable default='930px' name='content.width' type='length' value='990px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='200px'/>
      <b:variable default='360px' name='main.column.right.width' type='length' value='220px'/>

in cui si sono scelti i valori di 990 pixel per la larghezza totale del blog, di 200 pixel per la sidebar di sinistra e di 220 pixel per la sidebar di destra. Con questo metodo semplicissimo si può in buona sostanza

1. Aumentare la larghezza del blog anche oltre i 1000 pixel fissati da Blogger come valore massimo
2. Modificare in qualunque momento le larghezze del blog e delle sidebar senza perdere le personalizzazioni che sono già state installate