Come creare una casella di ricerca con Adsense per Blogger.

Come utilizzare Adsense per creare un motore di ricerca personalizzato da mostrare ovunque o solo in una delle due versioni mobile o desktop.

Gli utenti della piattaforma Blogger possono utilizzare il widget ufficiale per inserire mediante widget un motore di ricerca sul sito. Una casella di ricerca è fondamentale per dare la possibilità ai lettori di cercare i contenuti che si sono pubblicati tramite delle parole chiave o query di ricerca.

Come detto chi ha Blogger può andare su Layout > Aggiungi un gadget > Base > Casella di ricerca e posizionare il motore in una sidebar o nel footer. Se siete registrati ad Adsense è possibile creare un motore di ricerca con gli strumenti di questo programma di affiliazione. Oltre a vantaggi grafici ci saranno per il publisher anche le entrate generate dalle unità pubblicitarie mostrate insieme ai risultati di ricerca. L'installazione di un motore di ricerca con Adsense può avvenire solo tramite il codice da ottenere accedendo al nostro account. Tutti i motori creati con Adsense o anche con altre modalità saranno accessibili dalla pagina Ricerca personalizzata per modificarli o eliminarli. 

COME GENERARE IL CODICE ADSENSE

Dopo aver effettuato l'accesso ad Adsense si va su I miei annunci > Ricerca > +Nuovo Motore di Ricerca Personalizzato e nella pagina che si apre si dà il nome al motore

 

   

quindi si mette la spunta a Solo i siti che seleziono per effettuare le ricerche solo in determinati domini. Nel campo seguente si incolla l'URL del nostro sito senza http:// iniziale e con il .com finale se abbiamo un sito gratuito del tipo Blogspot. Se abbiamo più di un blog che trattano argomenti specifici possiamo aggiungere anche altri domini con l'accortezza di inserirli uno per riga.

Le parole chiave sono importanti per aiutare Google nella ricerca dei risultati in funzione dell'argomento del vostro sito. Per esempio modello non significa solo template ma anche persona che lavora nell'ambito della pubblicità o della moda. La pertinenza serve anche per mostrare annunci in linea con i contenuti del sito. Per esempio il termine "bolero" può essere relativo alla musica o alla danza dato il nome della omonima musica per balletto di Ravel ma anche relativo al cinema per il film diretto da Claude Lelouch o infine all'abbigliamento per signora. Specificare delle parole chiave separate da virgole aiuta a dissipare possibili ambiguità e a mostrare annunci più pertinenti.

Si mette la spunta a SafeSearch per filtrare eventuali risultati con contenuti per adulti. Nei campi successivi si sceglie la lingua e il paese del sito o dei siti su cui vengono effettuate le ricerche. Si clicca su +Canali personalizzati > Crea nuovo canale personalizzato per creare un canale specifico per il motore. Sarà una sorta di ID della casella di ricerca e ci permetterà di monitorarne le statistiche anche in funzione di eventuali entrate. Si può usare la stessa denominazione usata per il Nome del motore

Si va su Salva e si passa alla configurazione successiva Stile della casella di ricerca
 

in cui scegliere lo stile della casella e il numero di caratteri della stessa cioè la sua lunghezza. Si passa quindi su Stile dell'annuncio in cui scegliere i suoi colori. Se abbiamo già salvato una tavolozza di colori per il nostro sito non ci resta altro che richiamarla 

Altrimenti si va su Utilizza le impostazioni personalizzate e si scelgono i codici dei colori più adatti. Infine si va su Risultati di ricerca per settare gli ultimi parametri

 

Le opzioni per la visualizzazione dei risultati sono tre: una pagina Google nella stessa finestra, una pagina Google in una nuova finestra e sul mio sito web utilizzando un iframe. Se intendiamo visualizzare la casella di ricerca solo nei dispositivi mobili è opportuno scegliere la seconda opzione mentre per un motore da visualizzare solo nel desktop si può optare per una pagina Google da aprire in un'altra scheda per evitare che il lettore lasci il nostro sito. Opzionalmente si può incollare l'URL del logo del nostro blog per mostrarlo insieme alla casella di ricerca.  Finalmente si va su Salva e ottieni il codice che ci darà modo di installare la casella sul nostro sito. Tale codice dovrà essere selezionato, copiato e incollato in un file di testo tipo Blocco Note e si va su Chiudi.

CASELLA DI RICERCA IN UN WIDGET

Possiamo incollare il codice della casella di ricerca così come è in un widget. In questo caso si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla in Sezioni del sito

Si va su Salva e con il drag & drop del cursore si può spostare l'elemento pagina nella sidebar, nel footer o sopra l'area del post. Dopo uno spostamento bisogna andare su Salva disposizione. 

INSTALLARE LA CASELLA DI RICERCA NEL MODELLO DI BLOGGER

Potremo avere l'esigenza di mostrare il nostro motore di ricerca in un preciso punto del layout e magari solo nella versione desktop o solo nella versione mobile. Il regolamento di Adsense non permette di modificare i codici ma visto che Blogger ha un template in formato XML è consentito convertire il codice HTML ottenuto appunto in XML perché venga salvato da Blogger. 

Si può usare il tool Blogcrowds che ci permette di farlo con un click. Si incolla il codice e si va su Parse quindi si seleziona e si copia il codice risultante

 

 

COME MOSTRARE LA CASELLA SU DESKTOP

Il codice parsato può essere incollato nel modello con questa struttura

<b:if cond='!data:blog.isMobile'>
<div align='center'>
<div style='margin-top:8px; margin-bottom:8px;'> 
Codice parsato della casella di ricerca
</div>
</div>
</b:if>

Ci sono tre righe e le loro rispettive chiusure di cui la prima serve per mostrare la casella solo nella versione desktop, la seconda per centrare la casella e la terza per distanziare la casella dagli elementi posti più in alto e posti più in basso di 8 pixel. Il codice così creato può essere incollato subito sopra alla riga <header> per mostrare la casella sopra alla Intestazione oppure subito sotto alla riga </header> per mostrarlo sotto alla Intestazione.  Quelli proposti sono solo esempi e si possono naturalmente testare altri posizionamenti. 

COME MOSTRARE LA CASELLA DI RICERCA SOLO SU MOBILE

Se si vuole mostrare la casella di ricerca solo su mobile basterà modificare la prima riga della condizione evidenziata di giallo con quest'altra  <b:if cond='data:blog.isMobile'>. Concludo ricordando che se invece si vuole mostrare il motore di ricerca sia su desktop sia su mobile basta eliminare la prima e l'ultima riga dei tag condizionali evidenziate di giallo. Se si decide di mostrare il motore di ricerca su desktop e mobile è però consigliabile creare due motori per poi aggiungerci i relativi tag condizionali. Questa soluzione è consigliabile perché permette una migliore personalizzazione delle caselle di ricerca magari ponendone per esempio una al centro nella versione mobile e una sulla destra nella versione desktop del template.