Come dividere l'header di Blogger in due parti.

In alcuni modelli di Blogger, l'Intestazione si visualizza solo nella parte sinistra del layout mentre la parte destra è occupata da annunci pubblicitari, bottoni di navigazione o altri widget. L'operazione da compiere è quella di dividere appunto l'intestazione in due diverse sezioni. In teoria, utilizzando lo stesso procedimento si può suddividere l'header anche in tre parti o anche di più. La procedura è alquanto diversa se si ha un vecchio modello o un nuovo template realizzato con il Designer Modelli.

Dividere l'intestazione in due parti con i nuovi modelli di Blogger

Si va su Design > Modifica HTML e non si espandono i modelli widget. Dopo aver salvato il modello completo per un eventuale backup di ripristino, si cerca il blocco di codice del CSS che determina l'aspetto della intestazione. Nei nuovi modelli siamo facilitati dalla presenza di questo commento

/* Header
----------------------------------------------- */

Subito sotto si incolla questo codice

.header {width:46%; float: left; margin:0 auto 1%;}
.header-destro {width:46%; float: right; margin:0 auto 1%;}

Le percentuali, come vedremo possono essere variate e non è detto che dobbiamo fare le due sezioni della stessa larghezza. Il totale è del 94%, si può aumentare o anche diminuire, dipende dalle altre variabili presenti nel modello. Si cerca adesso quest'altro blocco di codice e si inseriscono le righe evidenziate di rosso

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Titolo del blog (Intestazione)' type='Header'/>
</b:section>
<b:section class='header-destro' id='header-destro' showaddelement='yes'/>
<div style='clear: both;'/> </div>

Si salva il modello. Se adesso andiamo su Design > Elementi pagina vediamo una cosa simile a questa

con l'Intestazione divisa in due parti. Per questioni di simmetria è opportuno inserire Aggiungi un gadget anche nella parte sinistra dell'header. Nello stesso blocco di codice di prima operiamo queste modifiche

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Titolo del blog (Intestazione)' type='Header'/>
</b:section>

Dove le modifiche sono state colorate di rosso rispetto al colore blu del codice precedente. Salviamo nuovamente il modello. In Design > Elementi pagina avremo adesso questa area di lavoro

A questo punto non resta che inserire nella parte destra un qualsiasi widget. Facciamo l'esempio di una immagine. Dopo averla caricata su Picasa e averne ottenuto l'URL si va su Aggiungi un gadget > HTML/Javascript e si incolla questo codice

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

Si salva e si visualizza il risultato. Potete vedere l'esempio dal vivo nel Blog Ricerca

 

in cui ho inserito come immagine una semplice scritta. La zona è utilizzata da molti blogger per inserire una unità pubblicitaria. Nella fattispecie un banner di 468x60 pixel. Per prima cosa dovete fare i calcoli se tale banner sia compatibile con la larghezza della parte destra dell'header, nel caso non lo fosse, si può agire sulle percentuali e aumentare quella dell'header-destro dal 46% al 48% o anche di più. L'attributo margin-top:-10px;"  l'ho inserito per visualizzare i due elementi dell'header alla stessa altezza. Si tratta di un dato relativo al modello utilizzato come test e il valore di -10px può essere modificato fino a trovare la giusta posizione. Si mettono valori negativi se l'oggetto sta in basso, positivi se è più alto della intestazione di sinistra.

Se si inserisce un annuncio pubblicitario si va sempre su Aggiungi un gadget > HTML/Javascript e si incolla un codice si questo tipo

<div style="margin-top:-10px;">
Codice annuncio del formato 468x60
</div>

in cui si sostituisce il codice dell'unità pubblicitaria e si personalizza il dato in rosso.
Come dividere l'header di Blogger in due sezioni con i vecchi modelli

Come al solito si va su Design > Modifica HTML e non si espandono i modelli widget. Si salva il modello e si cerca un blocco di codice simile a questo

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}
Si elimina e si sostituisce con quest'altro

#header {
width: 47%;
float: left;
margin:0 auto 1%;
text-align: center;
color:$pagetitlecolor;
}
#header-destro {
width: 47%;
float: right;
margin:0 auto 1%;
text-align: center;
color:$pagetitlecolor;
}

dove le percentuali possono essere modificate e il colore è quello scelto dall'utente che però può essere cambiato sostituendo color:$pagetitlecolor; per esempio con color:#000000;  ricordandoci dei codici dei colori. Successivamente si cerca quest'altro blocco di codice

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Titolo del blog (Intestazione)' type='Header'/>
</b:section>
    </div>

e si modifica in questo modo

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Titolo del blog (Intestazione)' type='Header'/>
</b:section>
<b:section class='header-destro' id='header-destro' showaddelement='yes'/>
<div style='clear: both;'/>     </div>

dove le modifiche sono state colorate di rosso. Si salva il template. Su Design > Elementi pagina si vedrà l'Intestazione suddivisa in due parti e si potrà aggiungere sulla destra una immagine, un annuncio o qualsiasi altro oggetto HTML

• Vedi Demo di Header diviso in due sezioni con un vecchio modello -