Come aggiungere due o più colonne sopra e/o sotto l'area del post nel Layout di Blogger.

Come impementare dei nuovi elementi nel layout di Blogger in modo da aggiungere 2 o 3 colonne sopra all'area del post e 2 o 3 colonne sotto a tale area. Le nuove colonne possono essere anche di dimensioni diverse.

Più di tre anni e mezzo fa pubblicai un post per modificare il layout di Blogger in modo di aggiungere delle colonne sopra e/o sotto la zona del post di Blogger. Questa modifica è interessante per chi voglia aggiungere subito sopra o subito sotto ai post non un solo widget ma almeno due gadget incolonnati. Le colonne possono essere configurate della stessa larghezza ma anche di diverse dimensioni. Inoltre invece che due colonne si può scegliere di inserirne tre o anche di più mantenendo la stessa sintassi.

Mi sono deciso a riprendere quell'articolo perché da allora sono sopravvenute molte modifiche nel codice di Blogger e ho potuto constatare da dei commenti ricevuti che alcuni lettori non riuscivano a implementare tali modifiche. Per fissare le idee questa è la situazione iniziale in Layout

Vogliamo modificare il codice del template per arrivare a questa nuovo aspetto del Layout

in cui sono visibili e 4 elementi aggiunti. Si potrà poi andare su Aggiungi un gadget in ciascuno di questi elementi per installare i widget che si desidera.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca questa riga di codice

<b:section class='main' id='main'

per individuare la sezione "main" che è quella dell'area del post. In alcuni modelli scaricati da internet questa sezione potrebbe anche avere un nome diverso. Quando si è individuata la riga tramite Ctrl+F si clicca sulla sua sinistra per visualizzare la freccetta nera. In genere si fa l'operazione inversa per visualizzare tutto il codice di una sezione ma in questo caso dobbiamo trovare l'inizio e la fine della sezione per aggiungerci delle nuove colonne.

Nella stessa riga si visualizzeranno il tag iniziale <b:section .. > e finale </b:section> che determinano appunto l'inizio e la fine della sezione denominata "main"

Per inserire due colonne sopra l'area del post va incollato prima della riga <b:section class='main' id='main… questo nuovo codice

<div id='Widget1A' style='width: 47%; float: left; margin:0; padding: 4px;'>
<b:section class='sidebar' id='widget-1a' preferred='yes' style='float:left;'/>
</div>
<div id='Widget1B' style='width: 47%; float: right; margin:0; padding: 4px;'>
<b:section class='sidebar' id='widget-1b' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

mentre per aggiungere due colonne sotto l'area del post va incollato sotto </b:section> il codice

<div id='Widget2A' style='width: 47%; float: left; margin:0; padding: 4px;'>
<b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/>
</div>
<div id='Widget2B' style='width: 47%; float: right; margin:0; padding: 4px;'>
<b:section class='sidebar' id='widget-2b' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Si salva il modello. Nel caso in cui le due colonne si visualizzassero non allineate diminuite il valore della percentuale del 47% e eventualmente anche della distanza tra colonne di 4px.

COLONNE DI DIVERSE DIMENSIONI

Per avere dimensioni diverse si può giocare sulla percentuale del 47% e scegliere per esempio il 32% per la prima colonna e il 63% per la seconda colonna. Ecco il codice di quelle sopra il post

<div id='Widget1A' style='width: 32%; float: left; margin:0; padding: 4px;'>
<b:section class='sidebar' id='widget-1a' preferred='yes' style='float:left;'/>
</div>
<div id='Widget1B' style='width: 63%; float: right; margin:0; padding: 4px;'>
<b:section class='sidebar' id='widget-1b' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

con questo risultato

TRE COLONNE SOPRA E/O SOTTO L'AREA DEL POST

Mantenendo la stessa sintassi si possono aggiungere tre colonne sopra e/o sotto l'area del post.  Naturalmente si può scegliere di aggiungere tre colonne sopra al post e due sotto o viceversa. Il codice da incollare con la stessa modalità precedente per le colonne sotto al post è

<div id='Widget2A' style='width: 31%; float: left; margin:0; padding: 4px;'>
<b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/>
</div>
<div id='Widget2B' style='width: 31%; float: left; margin:0; padding: 4px;'>
<b:section class='sidebar' id='widget-2b' preferred='yes' style='float:left;'/>
</div>
<div id='Widget2C' style='width: 31%; float: right; margin:0; padding: 4px;'>
<b:section class='sidebar' id='widget-2c' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

con una percentuale del 31% per ciascuna colonna. Tali percentuali possono essere settate diversamente con l'accortezza di non superare il 94-95% nella loro somma totale. Il risultato sarà

In teoria scegliendo delle percentuali intorno al 23% si possono inserire anche 4 colonne ma questo è consigliabile solo per chi abbia un layout molto largo. Andando su Aggiungi un gadget si possono poi installare tutti i widget che si desiderano.

Concludo ricordando che il fatto di aver aggiunto 2 o 3 elementi sopra e sotto il post comporta la creazione di 2 o 3 nuove colonne perché dopo aver aggiunto un widget in una delle quattro posizioni se ne possono aggiungere altre andando sempre su Aggiungi un gadget come mostrato nello screenshot precedente. Questa precisazione per rendere più chiaro il significato del titolo.