Pubblicato il 29/11/11 - aggiornato il  | 9 commenti :

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

aggiungi-un-gadget-blogger

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

casella-di-ricerca-blogger

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

ricerca-personalizzata

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

widget-ricerca-intestazione

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 

id-widget

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

header-blog-con-casella-ricerca

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. 



9 commenti :

  1. Questo post mi piace un sacco e sono riuscita anche a metterlo in posizione. Il problema è che, appena lo sposto anche di poco, non mi fa più scrivere nella casella per cercare i termini. È strano no? Se lo lascio dov'è funziona. Cosa può essere?

    RispondiElimina
    Risposte
    1. Non è che riesca sempre a trovare la causa di un problema. Mi sopravvaluti. In questo caso non so proprio che dirti :)
      @#

      Elimina
    2. Vuoi dire che non sei infallibile? :)
      Tranquillo, sei già fin troppo disponibile. Io domando, se è una cosa che si può risolvere velocemente bene, altrimenti pazienza. Grazie comunque.

      Elimina
  2. Il fatto è che non saprei neppure dove si potrebbe operare per modificare questo comportamento :(
    @#

    RispondiElimina
  3. Come personalizzare la pagina dove arriva i tutti risultati dopo che abbiamo fato la ricerca con il motore di blogger dal nostro blog si può personalizzare per creare una pagina statica senza colona laterale e altri cose in giro e come si può fare ...
    Grazie mille e buona giornata .

    RispondiElimina
    Risposte
    1. Non mi sono mai occupato di questa personalizzazione. Non so se sia fattibile
      @#

      Elimina
  4. Ottimo. Una domanda Ernesto. Ho già inserito nel mio sito una casella di ricerca in alto nell'header. Vorrei che si vedesse anche nella versione per cellulare. Posso utilizzare ovviamente lo stesso script di adsense ma per il codice hai pubblicato una qualche guida? Ciao e grazie

    RispondiElimina
    Risposte
    1. E' meglio usare due codici con due diversi Canali per monitorare il numero di ricerche e di entrate avute da mobile e da desktop. Per la casella di ricerca da vedere nel cellulare è meglio incollare il codice nel modello e non in Layout. Segui la parte finale di questo post
      http://www.ideepercomputeredinternet.com/2015/06/motore-ricerca-adsense-blogger-desktop-mobile.html
      Dove c'è il codice per mostrare la ricerca nel desktop sostituisci
      b:if cond='!data:blog.isMobile'
      con
      b:if cond='data:blog.isMobile'
      come è anche spiegato nelle ultime righe dell'articolo
      @#

      Elimina
  5. Grazie, il tuo aiuto mi è stato preziosissimo

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy