Come inserire la casella di ricerca di Blogger nell'Header.

Dopo aver visto come inserire la casella di ricerca nel menù orizzontale delle pagine statiche di Blogger, vediamo come visualizzare il widget della ricerca ufficiale di Blogger nella Intestazione del blog. Come è noto di default l'elemento pagina dell'header è bloccato, questo vuol dire che non sono presenti elementi Aggiungi un gadget per inserire altri oggetti in quella zona. Dovremo quindi sbloccare questa sezione del template.

Andiamo quindi su Modello > Backup/Ripristino e salviamo il modello completo del blog per un eventuale backup di sicurezza. Torniamo su Modello > Modifica HTML > Procedi, senza espandere i modelli widget. Cliccando su F3 cerchiamo questo codice

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

e sostituiamolo con quest'altro

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

dove i cambiamenti sono stati colorati di rosso. Si salva il modello. Se adesso andiamo su Layout vedremo che sopra e sotto alla Intestazione saranno presenti degli elementi Aggiungi un gadget da utilizzare per inserire altri oggetti nella stessa zona dell'Header

Clicchiamo su quello più in alto, quindi selezioniamo Casella di ricerca nella finestra popup che si apre

Nella finestra successiva possiamo personalizzare i vari campi di ricerca e inserire il titolo del widget (opzionale)

Si potrà anche configurare la ricerca in un Elenco di link, utile se si hanno più blog o se si vuole dare la possibilità ai lettori di cercare in altri siti. Si clicca su Salva dopo aver visualizzato l'anteprima del widget. L'aspetto del blog adesso sarà simile a questo

Non è proprio il massimo della estetica quindi dobbiamo aggiungere un CSS che inserisca la casella di ricerca per esempio sulla parte destra della intestazione. Per conoscere l'ID del widget basta cliccare su Modifica e osservare la parte finale dell'URL 

L'ID è CustomSearch1 ed è lo stesso per tutti i blog su Blogger. Al massimo potrà variare il numero d'ordine se si sono inserite più caselle di ricerca. Dobbiamo tornare su Modello > Modifica HTML > Procedi e cercare la riga ]]></b:skin>.  Immediatamente sopra incolliamo questo codice

/* RICERCA PERSONALIZZATA */
#CustomSearch1 {
float:right;
position:relative;
top:16px;
right:0px;
width:200px;
height:33px;
padding-left:36px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinFWGlsb0SBWoGe-9foraWQevdF8LnYrNXbyZPPvaBx-yIVnJW3Su8VmahNm-RCext6TWo2XxUWgQdWLswPEFKssrVWvKGzESc5k_u0FXTHcHTLLOHWF24cxAsVIT9Dn_0onaaFT3bt6Pe/s32/search.png) no-repeat 0px 0px;
}

e salviamo il modello. L'aspetto del nostro header sarà adesso simile a questo

Le personalizzazioni e i settaggi riguardano i seguenti aspetti:

1. Con i valori inseriti nei parametri top e right si può configurare l'esatta posizione della casella di ricerca
2. I valori in width e height determinano le dimensioni rispettivamente della larghezza e dell'altezza della casella di ricerca
3. Con il valore di padding-left si può determinare la posizione della icona da mettere a sinistra della barra di ricerca (opzionale)
4. L'URL colorato di rosso è l'indirizzo della icona caricata su Picasa. E' una immagine in PNG 32x32 pixel e può essere sostituita (opzionale)
5. Se non si vuole inserire l'icona si eliminano le due righe di codice di cui al punto 3) e 4).

Osservazione conclusiva - Prima di inserire i fogli di stile con l'ultimo codice controllate che la casella di ricerca funzioni. Se non dovesse funzionare dopo aver effettuato l'ultima personalizzazione provate a modificare la larghezza del campo di ricerca, a togliere l'icona o a modificarne la posizione.