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)
Si va su Layout > Aggiungi un gadget > Base e si seleziona Casella di Ricerca
Si mette un titolo al widget e si sceglie il tipo di ricerca quindi si va su Salva
Si va su Layout e si sposta l'elemento con il mouse sopra a Post del blog in questo modo
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
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.
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
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).
Dopo il tag title=' ... ' si incolla mobile='only' quindi si salva il template.
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>
<style>
#CustomSearch2 {padding-left:20px; padding-right:20px;}
</style>
</b:if>
che dopo il salvataggio del template produce questo risultato
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.
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 :)
RispondiEliminaQuesto commento è stato eliminato dall'autore.
RispondiEliminaCiao Ernesto, sto cercando di mettere il motore di ricerca sopra il titolo del post e abilitare la versione mobile ma non funziona. Dopo aver aggiunto la stringa mobile='yes' accetta il salvataggio ma trasferisce la stringa prima del title: suggerimenti? Grazie.
RispondiEliminaCon i Temi non si può fare tutto quello che si vuole. Nella versione desktop va bene. Per quella mobile prova a andare su Tema -> Cellulare -> Ruota Dentata -> Personalizza e poi salva il Tema per cellulare. Se hai già messo mobile='yes' si dovrebbe vedere
Elimina@#
Se volessi dare un'occhiata l'url è: https://lemmaweb.blogspot.com/ grazie ancora.
RispondiEliminaA me entramble le versioni genereano un errore Errore di (analisi XML.... "b:widget" must be followed by either attribute specifications, ">" or "/>")
RispondiEliminaL'unico codice che si inserisce nel modello è mobile='yes' oppure mobile='only'
EliminaForse usi le virgolette doppie " invece di quella singola ' oppure usi le virgolette inglesi cioè queste ‘ ’ al posto della virgoletta tipo apostrofo cioè questa '
@#