Pubblicato il 02/05/16e aggiornato il

Come aggiungere la casella di ricerca ufficiale alla versione mobile di Blogger.

Come installare una casella di ricerca ufficiale di Blogger nella versione mobile e un'altra nella versione desktop posizionate sopra il post o nella sidebar.
Ho appena ricevuto un commento su come installare una casella di ricerca nella versione mobile di Blogger. Visto che il tema credo possa interessare a molti utenti di questa piattaforma ho pensato di farci un post prendendo in esame tutte o quasi le possibili alternative.

Personalmente ritengo che la scelta migliore per una casella di ricerca nella versione mobile di Blogger sia quella del motore affiliato ad Adsense però non tutti gli utenti di Blogger sono iscritti a questo programma di affiliazione. In questo post vedremo come creare una Casella di Ricerca con il widget ufficiale di Blogger e come posizionarla subito sopra alla main area cioè all'area dei post che sia visibile nella versione mobile di Blogger. La condizione necessaria per questa personalizzazione è quella di aver abilitato la versione mobile personalizzata. Si va su Modello > Cellulare e si mette Sì. Mostra il modello ... dopo aver cliccato sulla icona della ruota dentata. Si deve scegliere la versione Personalizza per poter modificare la sezione del modello relativa a questa visualizzazione

MOSTRARE LA STESSA CASELLA DI RICERCA NELLA VERSIONE MOBILE E DESKTOP 


Partiamo dal caso più semplice cioè quello in cui si decida di mostrare la stessa casella di ricerca su Desktop e Mobile con questo aspetto (per la visualizzazione mobile ho usato il tool Screenfly)

casella-ricerca-blogger  

Si va su Layout > Aggiungi un gadget > Base e si seleziona Casella di Ricerca

casella-ricerca-blogger-mobile

Si mette un titolo al widget e si sceglie il tipo di ricerca quindi si va su Salva

casella-ricerca-blogger

Si va su Layout e si sposta l'elemento con il mouse sopra a Post del blog in questo modo

casella-ricerca-blogger

Si va quindi su Salva disposizione per rendere lo spostamento effettivo. La casella sarà visibile nella versione desktop ma non in quella mobile. Si va quindi su Modello > Modifica HTML e si cerca il titolo del widget appena inserito che di default è Cerca nel blog

image


Dopo al tag title='Cerca nel blog' incolleremo la stringa mobile='yes' quindi salveremo il modello. Dopo questa semplice modifica il motore di ricerca sarà visibile anche nella versione mobile.

risultati-ricerca-blogger

I risultati di ricerca saranno mostrati sopra all'area del post anche nella versione mobile. Il titolo del widget dopo questa personalizzazione può anche essere tolto. 

CASELLE DI RICERCA DIVERSE TRA DESKTOP E MOBILE


Adesso consideriamo l'ipotesi che si voglia una casella di ricerca nella sidebar per quello che riguarda la versione desktop e una casella di ricerca sopra all'area del post per la versione mobile. L'ID della prima casella è CustomSearch1.  Se la vogliamo lasciare lì ne dovremo creare un'altra per la versione mobile. Si va su Layout > Aggiungi un gadget > Base > Casella di Ricerca, si configura dandole un nome e si salva quindi si posiziona sopra l'area del post in questo modo 

ricerca-mobile-blogger

Questa casella sarà vista però solo nella versione desktop. Dovremo invece fare in modo da mostrarla solo in quella mobile. Si va su Modello > Modifica HTML e si cerca il titolo del widget (Ricerca Mobile è quello mostrato come esempio nello screenshot).

mobile-casella-ricerca

Dopo il tag title=' ... ' si incolla mobile='only' quindi si salva il template.

ricerca-mobile-desktop-blogger

Come si vede dagli screenshot è presente una casella di ricerca nella sidebar per la versione mobile e una casella di ricerca sopra alla main area per la versione mobile.

PERSONALIZZAZIONE DELLA CASELLA DI RICERCA PER IL MOBILE


Come vedete dagli screenshot la casella di ricerca nella versione mobile è toppo attaccata ai bordi. Questa e altre personalizzazioni possono essere effettuate ex post individuando l'ID del widget colorato di viola e incollando nel modello sopra alla riga </head> un codice come questo

<b:if cond='data:blog.isMobile'>
<style>
#CustomSearch2 {padding-left:20px; padding-right:20px;}
</style>
</b:if>

che dopo il salvataggio del template produce questo risultato

casella-ricerca-mobile-blogger

con la casella distanziata dal bordo destro e sinistro. Anche il titolo del widget può essere cancellato a posteriori e si possono inserire a piacere altri CSS di personalizzazione.




1 commento :

  1. Neanche i migliori servizi online risolvono i problemi così in fretta (io però seguo il tuo consiglio e tengo quella di Adsense anche se non ho attivato banner sul blog). Grazie mille :)

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.