Come inserire una casella di ricerca personalizzata in Blogger.

Ho già avuto modo di presentare diversi metodi per installare una casella di ricerca per il nostro sito. Il sistema più usato è forse quello di utilizzare il servizio di Adsense ma si può inserire un modulo di ricerca anche in un menù orizzontale, crearsi un modulo di ricerca personalizzato, inserire la ricerca nell'header o anche creare un motore di ricerca esterno al blog che poi è quello che uso materialmente per fare le ricerche sul mio sito in modo da avere statistiche di ricerca fatte dai dei lettori che siano affidabili.

Voglio adesso illustrare un'altra procedura foriera di ulteriori sviluppi che magari affronterò in un prossimo articolo. Questo modulo potrebbe essere per esempio inserito in modo flottante nel template e si presta molto meglio di altri a essere incorporato in un menù o all'interno di qualche altro gadget. Si può anche personalizzare l'aspetto della casella di ricerca scegliendo i font, lo stile e l'immagine di sfondo.

Dopo aver salvato il template per un eventuale backup di ripristino, i va su Design > Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin> e, immediatamente sopra, si incolla il seguente foglio di stile

#moduloricerca {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheKwRS_SzpfzN-WVVsqlJ7tjGDDCe5pLh95rmw3IgoyqLrvDxhGq_wOUV_UJysebpMJP5gNZP7Hez0y0xxSm1MMtnPCZhh-LPD_rexV7mcVLVtftJQUa4axPBLGzjIrPNREYD95k-ZhKc/s230/sfondo-ricerca.png) no-repeat scroll 0 0;border:medium none;
color:#eee;
font-family:Trebuchet MS;
font-size:17px;
font-style:italic;
padding:5px;
width:230px;
}

dove i dati in rosso possono essere personalizzati. Si tratta di

1. L'immagine di sfondo della casella di ricerca che può essere caricata su Picasa
2. Il colore del testo che viene digitato nella casella (#eee; vedi i codici dei colori)
3. La famiglia di caratteri del testo
4. La dimensione dei font (17 px)
5. Il corsivo (italic): Se non interessa eliminare tutta la riga
6. La distanza interna tra il testo e i bordi del modulo (padding di 5px)
7. La larghezza della casella di ricerca

Si salva il modello. Si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla quest'altro codice

<form action="http://search.blogger.com/" target="_blank"
name="b-search"><input class="moduloricerca" value="parsifal32-font.blogspot.com/" name="bl_url" type="hidden"/>
<input id="moduloricerca" onfocus="if (this.value == &quot;Cerca...&quot;) this.value = &quot;&quot;;" value="Cerca..." name="as_q" onblur="if (this.value == &quot;&quot;) this.value = &quot;Cerca...&quot;;" type="text"/>
</form>

dove al posto di parsifal32-font.blogspot.com/ si mette l'URL del nostro blog senza la parte iniziale http://. L'espressione Cerca… è quella che vedranno di default i visitatori quando visiteranno il nostro sito e può essere modificata a piacere. Si salva e si posiziona con il drag & drop del mouse.

Nel momento in cui si clicca sul modulo, l'espressione Cerca.. sparirà e si potrà digitare la keyword. Essendo presente il tag target="_blank", la pagina con i risultati verrà aperta in un'altra scheda. Si tratta di una normalissima pagina di Google che ha un URL con questa struttura

http://www.google.com/search?q=blogurl:URL_DEL_BLOG/&as_q=KEYWORD&tbm=blg 

La parte finale dell'URL della ricerca tbm=blg mostra i risultati relativi ai blog di default. Per iniziare una ricerca occorre cliccare su Invio

• Post di Demo del modulo di ricerca per Blogger -