Come dividere in tre parti l'area sotto l'header di Blogger.

Dopo aver visto come dividere l'intestazione dei blog su Blogger in due parti, illustro come personalizzare ulteriormente quella zona del template. Se si va su Design > Elementi pagina si vedrà un layout che è simile a questo

In genere in questa zona si inserisce un menù orizzontale ma ci potrebbe essere l'esigenza di aggiungere altri widget. L'idea è quella di dividere il layout in tre parti per poter inserire altri oggetti. Potrebbero essere per esempio uno slideshow, il widget di benvenuto e quello dei Post più popolari. Andiamo su Design > Modifica HTML e salviamo il modello completo per un eventuale backup di ripristino. Non espandiamo i modelli widget. Se avete un nuovo modello cercate questo codice

<div class='region-inner tabs-inner'>
     <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
     <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
   </div>

Se invece avete un vecchio template, che non è stato creato con il Designer Modelli, potete cercare delle righe simili a queste

<div id='crosscol-wrapper' style='text-align:center'>
   . . . . . . . . . . .
</div>

Eliminate tali codici e sostituiteli con quest'altro

<div class='region-inner tabs-inner' id='crosscol-wrapper' style='text-align:center'>
<div id='crosscol0' style='text-align: center; padding: 3px;'>
<b:section class='tabs' id='crosscol-superiore' preferred='yes'/>
</div>
<div id='crosscol1' style='width: 32%; float: left; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross1' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol2' style='width: 32%; float: left; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross2' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol3' style='width: 32%; float: right; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Salvate il modello.I dati in rosso che rappresentano le percentuali delle singole sezioni che possono essere modificate ricordando che la loro somma deve ovviamente essere strettamente inferiore a 100%. Lo si può fare anche con il padding che rappresenta il margine interno alla sezione nelle quattro direzioni. Se adesso andate in Design > Elementi pagina, vedrete un layout come questo

dove, oltre alle normali aree del post e della sidebar, saranno presenti tre Aggiungi un gadget subito sotto l'intestazione. Si possono aggiungere per esempio un video, e due immagini o qualsiasi altro oggetto HTML

come può essere osservato in questo post di demo. Si possono anche inserire quattro sezioni (non ho testato). In questo caso il codice sarebbe

<div class='region-inner tabs-inner' id='crosscol-wrapper' style='text-align:center'>
<div id='crosscol0' style='text-align: center; padding: 3px;'>
<b:section class='tabs' id='crosscol-superiore' preferred='yes'/>
</div>
<div id='crosscol1' style='width: 24%; float: left; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross1' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol2' style='width: 24%; float: left; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross2' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol3' style='width: 24%; float: right; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross3' preferred='yes' style='float:right;'/>
</div>
<div id='crosscol4' style='width: 24%; float: right; margin:0; padding: 3px;'>
<b:section class='tabs' id='cross3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

in cui si possono fare le stesse personalizzazioni viste in precedenza. Se gli oggetti inseriti non si visualizzano tutti alla stessa altezza, si può usare l'attributo margin-top per calibrare il tutto. Per una immagine lo stile da applicare è

<img style="margin-top:-0px;" src="URL IMMAGINE" />

dove margin-top può prendere sia valori positivi che negativi.