Aggiungere una casella di ricerca Adsense ai nuovi Temi di Blogger.

Come installare nei Nuovi Temi di Blogger un motore di ricerca personalizzato creato con Adsense di Google.

Nei Nuovi Temi di Blogger esiste un gadget nativo per effettuare delle ricerche che si trova di default al top della pagina. Questo widget si adatta automaticamente alla risoluzione del dispositivo con cui viene aperta la pagina.

Ho notato però che non funziona troppo bene. Lo si può sostituire con una casella di ricerca creata con Adsense per coloro che utilizzano questo programma di affiliazione. Il widget nativo di ricerca può anche essere nascosto andando su Layout e togliendo la spunta per la visualizzazione dopo aver cliccato su Modifica. Nel post precedente abbiamo visto come inserire la pubblicità nei Nuovi Temi e abbiamo anche visto come si possano creare due unità pubblicitarie per mostrarle a seconda della risoluzione del dispositivo con cui viene aperta la pagina del blog.

Nei miei test sfortunatamente ho constatato che se si applica quella tecnica a un motore di ricerca creato con Adsense sparisce la scritta Google Ricerca personalizzata che si visualizza dentro la casella. La non visualizzazione del brand è contraria al regolamento. Non so perché accada ma purtroppo non possiamo procedere in quel modo. Se decidiamo di creare un motore di ricerca con Adsense dobbiamo quindi crearlo in modo che sia utilizzabile sia da mobile che da desktop e che sia esteticamente compatibile.

CREARE UN MOTORE DI RICERCA CON ADSENSE

Dopo aver aperto la Home di Adsense si va su I miei annunci -> Ricerca -> Motori di ricerca personalizzati -> Nuovo motore di ricerca personalizzato. Si digita il nome del motore

quindi si mette la spunta a Solo i siti che seleziono e si incolla il dominio del blog in cui effettuare le ricerche. Per un blog gratuito si digita nomeblog.blogspot.com. In parole chiave si possono digitare delle parole chiave specifiche che denotano il nostro sito. Tali parole servono per risolvere i problemi di ambiguità. Per esempio se aggiungiamo la parola chiave "golf" nella ricerca con la query "tiger" verranno mostrati i risultati di "tiger woods" e non della "tigre del bengala".

La spunta su SafeSearch serve per non avere risultati con link verso siti per adulti. In Paese o zona e in Lingua del sito si sceglie rispettivamente Italia e Italiano. In Canali Personalizzati è bene aggiungere un nome di un Canale o crearlo sul momento per monitorare il rendimento della casella di ricerca.

In Stile della Casella di Ricerca si seleziona la prima opzione che è quella senza sfondo e che ha il watermark all'interno del campo di digitazione. Per fare in modo che la casella sia adatta alla versione mobile e a quella desktop occorre scegliere un numero di caratteri non superiori ai 40.

In Stile dell'annuncio si può selezionare una delle tavolozze di colore predefinite o che abbiamo già salvato nella creazione di precedenti codici. Alternativamente si può andare su Utilizza le impostazioni personalizzate per creare un'altra tavolozza di colori.

I risultati di ricerca possono essere visualizzati con tre diverse opzioni:

1. In una pagina Google nella stessa finestra
2. In una pagina Google in una nuova finestra
3. Sul mio sito web utilizzando un iframe

Nel caso in cui si usasse questa ultima opzione dovremo digitare l'URL della pagina del nostro sito in cui visualizzare i risultati di ricerca insieme alla larghezza dell'area dei risultati. Si può anche incollare l'URL del nostro logo (link diretto a una immagine) per visualizzarlo insieme ai risultati di ricerca.

I più esigenti possono cliccare su Accedi a funzioni più avanzate per aprire il motore nello strumento CSE che permette di personalizzare molti altri aspetti del motore. Tutte queste impostazioni possono essere cambiate anche in seguito selezionando il motore e modificandone i parametri. Quando siamo soddisfatti si va su Salva e ottieni il codice. Tale codice andrà selezionato, copiato e incollato nel Blocco Note.

Si potrebbe andare su Layout -> Aggiungi un gadget -> HTML/Javascript, incollare il codice, salvare per poi posizionare l'elemento pagina della casella nel punto desiderato. Questo però comporta delle difficoltà visto che come abbiamo detto i Temi sono Responsive e si adattano alla risoluzione del dispositivo. 

Una soluzione che mi sento di consigliare è quella mostrata nello screenshot precedente con la Casella di ricerca posizionata sopra all'area principale del blog. Per ottenere quel risultato occorre operare nel codice del Tema quindi il codice della casella va reso compatibile con il linguaggio XML.

Come al solito si apre il sito Blogcrowds e si incolla il codice nell'apposito campo quindi si va su Parse. Nel codice risultante "parsato" sono stati sostituiti i tag <, > e " con le rispettive Entità. Si crea un codice di questo tipo

<!-- Casella di ricerca Inizio -->
<div style='text-align:center;'>
Codice parsato della casella di ricerca  </div>
<br/><!-- Casella di ricerca Fine -->

per poi incollarlo subito dopo il tag </header> su Tema -> Modifica HTML. I commenti in verde possono essere modificati come ci pare visto che non sono rilevati dal browser e che servono semplicemente per ritrovare il codice nel Tema qualora fosse necessario. La seconda riga serve per centrare la casella di ricerca. Si può sostituire center con left o right per un diverso allineamento. La riga <br/> è pleonastica e introduce un salto di riga nel caso, come nel mio test, in cui la casella fosse troppo attaccata al resto del layout. Si salva il Tema e si controlla anche con Screenfly come viene visualizzata la casella nelle diverse risoluzioni.