Come aggiungere due colonne sopra o sotto l'area del post su Blogger

Ho già illustrato come dividere l'header in due parti e come dividere in tre o quattro parti l'area sotto l'header. In questo articolo vediamo come sia possibile aggiungere due colonne sopra l'area del post e due colonne sotto l'area del post. Dico subito che le colonne possono anche essere tre e che si possono aggiungere solo quelle sopra, solo quelle sotto o entrambe. Si può inoltre aggiungere per esempio tre colonne sotto l'area del post e due colonne sopra.

Per effettuare questa personalizzazione basta inserire degli elementi Aggiungi un gadget in quella zona del layout. Successivamente sarà facile inserire dei widget che possono essere del tipo HTML/Javascript oppure di altro genere. L'obiettivo è quello di creare un layout di questo tipo

 

dove sono visibili due Aggiungi un gadget sopra a Post sul blog e due sotto tale area. Cliccandoci sopra si potranno inserire widget che si posizioneranno affiancati su due colonne rispettivamente sopra e sotto l'area del post. E' inutile che faccia esempi su come possa essere utilizzata questa personalizzazione perché ce ne sarebbero a dozzine. Dagli annunci pubblicitari ai widget degli ultimi articoli, dal gadget degli ultimi commenti a uno slideshow.

Bisogna andare su Modello > Backup/Ripristino e salvare il modello completo per un eventuale backup di sicurezza. Quindi si va sempre su Modello > Modifica HTML > Procedi e non si mette la spunta su espandi modelli widget. Si cerca tramite F3 o Ctrl+F questo blocco di codice

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Post sul blog' type='Blog'/>
</b:section>

Per inserire due colonne prima dell'area del post bisogna incollare subito sopra quest'altro codice

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

Invece per inserire due colonne sotto l'area del post si deve incollare subito sotto questo codice

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

La percentuale della larghezza degli elementi pagina può anche essere posta diseguale (per esempio 35% e 63%). Ci si deve ricordare però che la somma deve essere strettamente inferiore a 100%. Nel caso in cui gli elementi non siano affiancati ma uno sotto all'altro occorre diminuire la somma delle percentuali.

Se si vogliono inserire tre colonne i codici precedenti possono essere così modificati

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

Avremo un risultato di questo genere

Naturalmente si possono modificare i parametri delle percentuali e mettere tre colonne anche nella parte alta.