Come inserire due widget da entrambi i lati dell'header di un blog su Blogger.

Mi sono già occupato di come dividere l'Intestazione o Header del blog in due parti e di come inserire sotto l'header tre widget separati. Questo articolo introduce una personalizzazione ulteriore per permettere di inserire nell'header nel blog due nuovi widget, uno sulla sinistra e uno sulla destra. Si può trattare di testo, immagini, video o qualsiasi altro gadget che possa essere inserito in Blogger.

Se si va su Layout si vede che non è possibile inserire dei gadget nella Intestazione di un blog su Blogger perché l'elemento è bloccato

 

Se si clicca su Aggiungi un gadget non sarà possibile trascinarlo sopra all'intestazione. L'obiettivo finale di questa guida sarà quello di creare un header che abbia un aspetto simile al seguente che ho realizzato in un mio blog di prova

dove come widget aggiuntivi ho inserito due semplici immagini. Come detto bisogna per prima cosa sbloccare l'header. Si va su Modello > Backup/Ripristino e si Salva il modello completo per un backup di sicurezza. Quindi sempre su Modello > Modifica HTML si cerca la riga

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> e si sostituisce con quest'altra

<b:section class='header' id='header' maxwidgets='' showaddelement='yes'> 

come mostrato nel seguente screenshot

Adesso si possono aggiungere i widget anche nella intestazione. Ne inseriamo uno prima del Titolo del blog e uno subito sotto

Non occorre mettere subito i contenuti, basta andare su Aggiungi gadget > HTML/Javascript e digitare un po' di testo. Si potranno sempre personalizzare successivamente. Ciascun gadget ha il suo ID che rappresenta il suo codice indicativo. Per i widget inseriti con l'opzione HTML/Javascript questo ID avrà la forma HTMLX dove X sarà un numero d'ordine che individua il widget. Per poter inserire dei fogli di stile che determinano l'aspetto del gadget dobbiamo ricavarne il suo ID. Si può andare su Modello > Modifica HTML > Procedi, cliccare su F3 e digitare il titolo del widget. Il suo ID sarà visibile nella riga del suo codice

  

Gli ID dei due gadget che ho inserito per prova, come si può vedere dal precedente screenshot, sono rispettivamente HTML3 e HTML4. Quando si sono acquisiti questi due dati si va su Modello > Modifica HTML > Procedi, si cerca la riga ]]></b:skin> e, subito sopra, si incolla un codice come questo

/* PERSONALIZZAZIONE HEADER */
.header .widget  {
display:inline-block;
*float: left;
height:85px;
overflow: auto;
margin: 5px 6px !important;
vertical-align: top;
}
.header #Header1 {
width: 55%;
}
.header #HTML3, .header #HTML4 {
width: 18%;
}

Si salva il modello. Le personalizzazioni da effettuare sono le seguenti:

1. Si può configurare l'altezza dei widget (85px) ponendola uguale a quella della intestazione se abbiamo una immagine come header
2. E' possibile inserire dei margini verticali (5px) e orizzontali (6px) per distanziare i due widget dal resto del layout
3. Occorre inserire gli ID dei widget che abbiamo aggiunto al posto di quelli colorati di viola HTML3 e HTML4
4. Si può configurare la larghezza in percentuale dei due widget (18%) e la larghezza della intestazione (55%) ricordandosi di restare sempre ben al di sotto del 100% totale. In questo caso si è dato ai widget la stessa larghezza ma si possono dare anche misure differenti. Le ultime righe del widget potrebbero in questo caso diventare simili a queste

.header #Header1 {
width: 50%;
}
.header #HTML3 {
width: 20%;
}
.header #HTML4 {
width: 25%;
}

Dopo che si è fatto questa configurazione, possiamo aprire ciascun widget andando su Layout > Modifica e inserire tutto quello che vogliamo. Ricordo anche che si può ricavare l'ID di un gadget anche aprendolo su Layout

Il suo ID non sarà altro che la parte finale dell'URL visualizzato nella barra degli indirizzi del browser. Concludo osservando che volendo si può anche inserire un bordo, che si vedrà nell'intestazione e nei widget, aggiungendo per esempio la riga border: 1px solid #003366; subito sotto al codice .header .widget { e ricordando che i parametri in rosso possono essere personalizzati consultando il post che ho scritto sullo stile dei bordi.