Come aggiungere 1, 2 o 3 widget allineati sopra e/o sotto l'Header di Blogger.

Come aggiungere e allineare due o tre widget sopra o sotto l'Header di Blogger.

Continuo nell'aggiornamento di vecchi tutorial per Blogger alla luce delle novità introdotte nel codice del suo Editor del Template. Dopo aver visto come aggiungere due o tre colonne sopra e/o sotto l'area del post e aver visto come dividere in due o tre parti l'Intestazione di Blogger adesso è la volta di una guida su come aggiungere uno, due, tre o più widget allineati sopra o sotto l'Header.

Il caso di un solo widget è molto semplice visto che basta sbloccare l'elemento Header per poi aggiungere un gadget da Layout. Per due o tre widget allineati la cosa è un po' più complessa e dovremo mettere mano al codice. In sostanza dovremo passare da una situazione come questa

a un Layout con questo aspetto



con due widget subito sopra e due widget subito sotto all'Header.

COME CERCARE L'HEADER NEL CODICE DEL TEMPLATE

Dopo aver salvato il template si va su Modello > Modifica HTML e con Ctrl+F si cerca Intestazione che ci mostrerà il blocco di codice dell'Header (se si è scelto l'italiano in Blogger)

Per sbloccare l'Intestazione in modo da poter aggiungere un altro widget sopra o sotto l'Header si modifica la stringa  maxwidgets='1' showaddelement='no' in questo modo maxwidgets='' showaddelement='yes' quindi si salva il template. Questo può essere utile per esempio per inserire un banner pubblicitario sopra all'Header o per inserirvi un menù personalizzato.

Su Layout si visualizzerà infatti Aggiungi un gadget per inserire altri widget.

COME AGGIIUNGERE DUE WIDGET SOPRA E/O SOTTO L'HEADER

Si clicca sulla sinistra della riga che inizia con <b:section per visualizzare la freccetta nera



Subito sopra a questa riga si incolla il codice

<div id='Header1A' style='width: 46%; float: left; margin:0; padding: 4px;'>
<b:section class='header' id='Header1A' preferred='yes' style='float:left;'/>
</div>
<div id='Header1B' style='width: 46%; float: right; margin:0; padding: 4px;'>
<b:section class='sidebar' id='Header1B' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

mentre subito sotto alla stessa si incolla quest'altro codice

<div id='Header2A' style='width: 46%; float: left; margin:0; padding: 4px;'>
<b:section class='header' id='Header2A' preferred='yes' style='float:left;'/>
</div>
<div id='Header2B' style='width: 46%; float: right; margin:0; padding: 4px;'>
<b:section class='header' id='Header2B' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/> 

Si salva il modello. Naturalmente ci si può limitare a incollare solo uno dei due codici e si possono modificare le larghezze dei widget previste identiche al 46% nei codici proposti. Si può anche diminuire o aumentare lo spazio tra i widget proposto di 4 pixel.

I widget aggiunti possono essere di vario genere. Nel mio test ho visto che conviene cliccare su Aggiungi un gadget nella sidebar per poi spostarlo con il mouse nella posizione prescelta perché su Blogger non essendo prevista in modo nativo la possibilità di inserire nuovi widget nell'Header ci sono difficoltà quando si clicca su Aggiungi un gadget su questi nuovi elementi anche se i widget poi vengono aggiunti comunque.  Ecco un esempio graficamente un po' scarso ma istruttivo di quattro widget aggiunti sopra a sotto l'Intestazione 

COME AGGIUNGERE TRE WIDGET ALLINEATI SOPRA O SOTTO L'HEADER

Modificando leggermente il codice si può optare anche per l'aggiunta di 3 widget sopra o sotto l'Intestazione. Mi limito a mostrare il codice necessario per la parte sopra all'Header

<div id='Header1A' style='width: 31%; float: left; margin:0; padding: 4px;'>
<b:section class='header' id='Header1A' preferred='yes' style='float:left;'/>
</div>
<div id='Header1B' style='width: 31%; float: left; margin:0; padding: 4px;'>
<b:section class='header' id='Header1B' preferred='yes' style='float:left;'/>
</div>
<div id='Header1C' style='width: 31%; float: right; margin:0; padding: 4px;'>
<b:section class='header' id='Header1C' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>

Dopo aver salvato il modello il Layout del blog assumerà un aspetto come questo




Dopo l'aggiunta dei widget la parte alta del blog muterà in questo modo




con tre widget allineati sopra all'header.