Come modificare il modello per rendere un blog su piattaforma Blogger Mobile Friendly e più usabile se aperto da cellulare, tablet o da altro dispositivo mobile.
A partire dal 21 Aprile scorso Google ha introdotto un nuovo fattore di ranking nel suo algoritmo che già ne contava più di 200. I risultati di ricerca hanno infatti iniziato a penalizzare i siti non mobile friendly a beneficio di quelli che invece abbiano una versione mobile facilmente usabile.
Come illustrato nel post appena linkato Google ci offre lo strumento del Test di Compatibilità per verificare che il nostro sito abbia le caratteristiche di essere ben visibile anche da mobile. Gli utenti di Blogger sono favoriti dal fatto che esiste la possibilità di abilitare la versione mobile direttamente da Modello > Cellulare. Questa soluzione non sempre è valida esteticamente e allora si può provare a risolvere convertendo il nostro modello in Responsive.
Vediamo come rimanendo nell'ambito di un modello Mobile Friendly per Blogger si possa personalizzare anche la versione mobile con ovvie limitazioni.
CODICE MODELLO PER MOBILE DI BLOGGER
Il codice del modello per la versione mobile di Blogger è suddiviso almeno in due parti, quella all'interno dei tag <body> e quella invece del CSS che si trova nella sezione <b:skin>. Si possono riconoscere andando su Modello > Modifica HTML e effettuando una ricerca tramite Ctrl+F con la query "mobile". Nella prima parte denominata Variabile definitions ci sono le impostazioni che derivano dal Designer Modelli e che in linea di massima sono ereditate dalla versione desktop.
Sempre nella sezione dei CSS andando più in basso si trova il blocco di codice per il mobile
I CSS per la versione mobile è nei modelli non vecchissimi iniziano dal commento /* Mobile e i vari fogli di stile si differenziano da quelli per il desktop per l'aggiunta di .mobile nel codice. Per esempio si può trovare un codice come questo
.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}
.mobile h3.post-title {
margin: 0;
}
.mobile .footer-outer {
border-top: none;
}
padding: 0.1em 10px;
margin: 0 -10px;
}
.mobile h3.post-title {
margin: 0;
}
.mobile .footer-outer {
border-top: none;
}
sono tre blocchi di codice che determinano l'aspetto nella versione mobile rispettivamente della data, del titolo del post e di tutto il footer. Evidentemente si può intervenire su questi codici aggiungendo una o più righe o modificando quelle presenti per cambiare l'aspetto da mobile lasciando inalterato quello della versione desktop.
Se si va su Modello > Modifica HTML > Vai al widget > Blog1 si visualizzano tutte le sezioni
![versione-mobile-blogger[4]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuMFzDOT22gb0RHwpZU21vocCs3MGwaEtrSPkF0_2ruhyqgj4y2cogDtf7C7fo6qnu56CYXWrSmWGzHYvRnHE0L4K5n7NtEBvzinhVBc_ud7v-pmUtFEdBtkqGewVDUGK3ge5r1hcAPmY/?imgmax=800 "versione-mobile-blogger[4]")
Quelle che contengono mobile servono specificatamente per la versione del blog visualizzata con cellulari e tablet. Si tratta di tre sezioni il cui codice può essere visualizzato per intero cliccando sulla freccetta nera posta sulla sinistra. Quella più utile inizia con la riga
e determina l'aspetto dell'area del post nella versione mobile. In sostanza se si vogliono inserire dei bottoni, dei banner o comunque modificare qualcosa bisogna operare all'interno di questa sezione.
COME FARE PER INSERIRE UN CODICE SOLO NELLA VERSIONE DESIDERATA
Ci sono però dei codici che non possono essere inseriti con le modalità che abbiamo appena visto. Pensiamo per esempio a un menù che vogliamo sia visualizzato solo nella versione desktop. Oppure pensiamo a una personalizzazione particolare con un menù per la versione desktop e un altro menù responsive per quella mobile. Vediamo quali sono i tag condizionali da usare in questi casi
<b:if cond='data:blog.isMobile'>
<!-- Incollare il contenuto visibile solo da mobile -->
</b:if>
<!-- Incollare il contenuto visibile solo da mobile -->
</b:if>
<b:if cond='!data:blog.isMobile'>
<!-- Incollare il contenuto visibile solo da desktop -->
</b:if>
<b:if cond='data:blog.isMobile'>
<!-- Incollare il contenuto visibile solo da mobile -->
<b:else/>
<!-- Incollare il contenuto visibile solo da desktop -->
</b:if>
Con i primi due tag condizionali si inserisce solo il codice che ci serve per quella data versione mentre con il terzo si inseriscono i codici di entrambe le versioni in modo che automaticamente si visualizzi quello che abbiamo previsto per desktop e mobile come nell'esempio fatto dei due menù. Al posto della condizione
<b:if cond='!data:blog.isMobile'>
si può usare quest'altra condizione
<b:if cond='data:blog.isMobile == "false"'>
che utilizza il valore booleano false e che è logicamente equivalente alla precedente.
<b:if cond='!data:blog.isMobile'>
si può usare quest'altra condizione
<b:if cond='data:blog.isMobile == "false"'>
che utilizza il valore booleano false e che è logicamente equivalente alla precedente.
COME FARE CON I WIDGET PER MOBILE E DESKTOP
In linea di massima i widget posizionati nella sidebar non vengono visualizzati nella versione mobile. Però ci potrebbero essere anche dei widget nell'area del post come per esempio degli slideshow che per ovvie ragioni non vogliamo mostrare nella versione mobile e che vogliamo sostituire con altri widget meno invasivi. Su Blogger si possono utilizzare i tre tag
con ovvio significato. Si va su Modello > Modifica HTML e si cerca il widget in questione. Si aggiunge o si modifica uno dei tre tag per mostrare o meno il widget nella versione mobile
nel campo di azione del tag b:widget e cliccando sulla freccetta nera per visualizzare tutto il codice. I tag mobile='yes' e mobile='no' funzionano bene mentre il tag mobile='only' per mostrare un widget solo e unicamente nella versione mobile spesso non porta a dei risultati.
COME MOSTRARE UN WIDGET SOLO NELLA VERSIONE MOBILE
Vediamo una possibile alternativa a mobile='only' qualora si volesse mostrare un gadget solo nel mobile. Occorre innanzitutto installarlo da Layout > Aggiungi un gadget quindi andare su Modello > Modifica HTML e cercarlo per poi visualizzarne tutto il codice eventualmente cliccando sulla freccetta nera. Si scorre detto codice e si cerca la riga
Dopo aver aggiunto il tag mobile='yes', subito sotto a questa si incollano queste nuove righe
<b:include cond='data:blog.isMobile' name='content'>
</b:include>
<b:includable id='content'>
</b:include>
<b:includable id='content'>
in questo modo
![versione-mobile-blogger[6]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqlWjm7xo6ThzgP2aOwF_TYp5B5rZFqxuMAqSs2EjIQOdirrzWH_vTPL6MCXLKIDrjKHt_T2CfHfMoYssrCxb2curTnaCbqAQC2DlOLS0PL5wCMacUC27CEG9oAb_MvpUQNpTWcuCfiWU/?imgmax=800 "versione-mobile-blogger[6]")
Aggiungere poi la riga </b:includable> prima delle due righe
</b:includable>
</b:widget>
in questo modo
Si salva il modello. Ricordo che prima di ogni modifica del template è assolutamente necessario salvare una copia dello stesso per un eventuale ripristino. Nella versione mobile sono da evitare widget troppo pesanti o che utilizzano file javascript esterni. È anche consigliabile non mostrare dei gadget che comportino delle difficoltà tattili come quello delle Etichette o quello dell'Archivio.
</b:includable>
</b:widget>
in questo modo
Si salva il modello. Ricordo che prima di ogni modifica del template è assolutamente necessario salvare una copia dello stesso per un eventuale ripristino. Nella versione mobile sono da evitare widget troppo pesanti o che utilizzano file javascript esterni. È anche consigliabile non mostrare dei gadget che comportino delle difficoltà tattili come quello delle Etichette o quello dell'Archivio.
COME ADATTARE GLI ELEMENTI TATTILI ALLA VERSIONE MOBILE
Google suggerisce che per la versione mobile gli elementi tattili debbano avere la dimensione di un dito cioè di circa 10mm. Ci sono anche delle misure minime consigliate che sono di 7mm per altezza e larghezza e di 5mm per la distanza tra i vari elementi.
Facciamo un esempio pratico. Per migliorare l'aspetto da mobile di un gadget come quello delle Etichette che magari ci interessa mostrare anche a chi apre il nostro sito con il cellulare possiamo modificare il suo CSS che come abbiamo visto si trova nella sezione <b:skin> dopo il commento /* Mobile. Cerchiamo con la query .mobile se sia o meno presente un foglio di stile per le Etichette da mobile vale a dire che abbia accanto a .mobile anche il tag Label1. Quasi sicuramente non ci sarà. Possiamo quindi crearlo da soli aggiungendo in tale sezione subito dopo alla chiusura di una parentesi graffa ( } ) un codice come questo
.mobile .Label ul li a {
display: block;
font-size: 180%;
line-height: 200%;
padding: 10px 20px;
margin: 5px;
}
display: block;
font-size: 180%;
line-height: 200%;
padding: 10px 20px;
margin: 5px;
}
per aumentare dell'ottanta per cento le dimensioni dei caratteri, per raddoppiare il valore dell'interlinea e per aumentare gli spazi all'interno e all'esterno del widget.
Se il testo deborda nella versione mobile si può pensare di troncarlo in modo da mostrare solo il suo inizio. Esteticamente non è il massimo ma è da prendere in considerazione per evitare un risultato peggiore. Il codice da incollare sempre subito dopo la chiusura di una parentesi graffa è
@media screen and (max-width: 600px) {
body.mobile {
word-break: break-all;
}
}
body.mobile {
word-break: break-all;
}
}
che troncherà le parole per i dispositivi che abbiano una risoluzione inferiore a 600 pixel.
METATAG VIEWPORT
Nei modelli vecchi o scaricati da internet potrebbe non essere presente il metatag viewport. Tale tag serve per una migliore configurazione della versione mobile di Blogger. Nel codice del modello effettuate una ricerca con tale query per vedere se esista o meno tale tag
Se non ci fosse subito dopo alla riga <head> incollate questo codice
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>
quindi salvate. Concludo ricordando che per quello che riguarda le immagini non occorre fare nulla perché Google ottimizza automaticamente le immagini postate e le mostra con le dimensioni adeguate al dispositivo con cui viene aperta la pagina in cui sono state postate.
C'era un errore. Ho modificato il codice
RispondiElimina@#
Ho testato. Per il widget delle etichette funziona perfettamente
RispondiElimina@#
Buona sera, tentavo di inserire il banner per i cookie nella versione mobile del mio blog su blogger ma il codice HTML nel modello non va oltre la riga2100, credo che la riga che serve sia la 2270...avete qualche consiglio?grazie
RispondiEliminaChe cosa? Cosa c'entra il numero di riga? Per inserire il banner devi incollare il codice sopra alla riga
Elimina< / body > (senza spazi) che devi cercare con Ctrl+F. Si trova quasi in fondo al modello
@#
Buongiorno! Grazie dei post utilissimi e delle risposte! sono giorni che cerco di risolvere la questione cookie per il mio blog. Al momento ho eliminato i pulsanti social, in questo modo dovrebbe bastare il banner di blogger. Nella versione mobile il banner non compare. Non ho capito però quale codice devo copiare sopra < / body >, che ho trovato nel widget Blog1. Grazie! :)
RispondiEliminaPurtroppo il banner non compare nella versione mobile. Puoi però disattivarla e quindi sei a posto anche se ti consiglio di usare un banner come questo
Eliminawww.ideepercomputeredinternet.com/2014/09/cookie-consenso-privacy-banner-blogger-wordpress.html
Per rendere il template Responsive purtroppo non c'è solo d copiare ma da modificare il template come illustrato nel post
@#
Buongiorno Ernesto,
RispondiEliminasto cercando di rendere visibile un menù etichette a tendina creato con il procedimento che ci indichi al link qui sotto...
http://www.ideepercomputeredinternet.com/2011/04/menu-tendina-verticale-colorato-con-le.html
questo menù funziona perfettamente in versione desktop ma non riesco a farlo apparire nella versione mobile...
ho seguito il procedimento che illustri qui sopra intervenendo sui css ma non appare...
qualche consiglio?
Grazie Andrea .
Il consiglio è di inserire nella versione mobile un menù diverso da quello della versione desktop. Prova con uno di questi
Eliminahttp://www.ideepercomputeredinternet.com/2015/06/blogger-responsive-menu.html
http://www.ideepercomputeredinternet.com/2015/08/responsive-multilevel-menu-blogger-mobile.html
@#
Ciao, innanzitutto complimenti per l'articolo.
RispondiEliminaTi volevo chiedere un aiutino.
Non capisco come modificare la versione mobile del mio blog, almeno per quanto riguarda la navbar.
Nella versione standard riesco a gestirla, ma in quella mobile mi mette uno spazio vuoto inutile all'inizio della pagina:
http://oggieunaltropost.blogspot.it/?m=1
guardando il codice ho visto che mi mette un 30px di altezza sulla navbar, che non riesco proprio a far sparire
ho provato anche con .mobile .navbar ecc... negli stili, ma niente, non se lo fila, neanche mettendo !important
sono sicuro di sbagliare qualcosa ma non capisco cosa :)
Grazie in anticipo!
@# Prova a incollare questo codice
Elimina<b:if cond='data:blog.isMobile'>
<style>
.content {
margin-top:-30px !important;
}
</style>
</b:if>
subito sopra alla riga </head>
ciao
RispondiEliminascusa se ti disturbo ancora. per il mio blog ho scelto il template busby e ho il problema della visualizzazione su mobile
attualmente da modello/cellulare ho scelto la visualizzazione dinamica che supera il test di ottimizzazione mobile ma come layout non mi soddisfa un granchè. se invece, come suggerito in un tuo altro articolo, scelgo "personalizza" e guardo l'anteprima quello che ottengo ha comunque la barra orizzontale di scorrimento e se provo il test di ottimizzazione mobile ottengo un bel failed.
mi chiedevo se quello che spieghi in questo articolo è valido per qualsiasi template.
grazie
Si tratta di un esercizio di stile per il modello Simple. Il metodo comunque è quello di rendere responsive la maggior parte degli elementi del layout.
RispondiElimina@#
Ciao. Alla fine mi sono deciso e grazie al tuo post contenenti i 170 modelli responsive ne ho scelto uno e ho modificato il blog.
RispondiEliminaHo scelto genius e ho adattato il layout alle mie esigenze aggiungendo anche linkwithin.
Approfitto della tua cortesia per farti tre domande.
Il blog e "il blog di nino" su blogger.com e come puoi vedere il nome sull'immagine di background e in piccolo con un colore che non si nota troppo. Esiste la possibilità di modificarlo ? Ho dato un occhio al codice cercando il tag pagetitle(o roba simile) dove ci sono le dimensioni e il codice x il colore ma le prove non hanno sortito quanto sperato. E poi le immagini in anteprima nella pagina principale hanno dimensioni sempre differenti esiste un modo per uniformare. E infine se si può modificare la dimensione del testo. Hai qualche suggerimento da darmi. Ti ringrazio anticipatamente
I template scaricati da internet sono di difficile personalizzazione. Il loro codice lo conosce il suo autore e spesso ha classi di stile diverse da quelle presenti nei template ufficiali di Blogger. Per queste operazioni si utilizzano questi tool
Eliminahttp://www.ideepercomputeredinternet.com/2015/11/ispeziona-analizza-elemento-cistomize-blogger-template-mobile.html
Comunque ho ispezionato questo sito
http://il-blog-di-nino.blogspot.it/
e il codice da incollare sopra alla riga ]]></b:skin>
dovrebbe essere questo
div.descriptionwrapper > p > span {font-size:48px !important; color:#f00 !important;}
Ovviamente sostituisci dimensione e colore a tuo piacimento. Puoi aggiungere anche grassetto, corsivo e altre cose
@#
Ti ringrazio tantissimo. Provo appena posso è ti faccio sapere
RispondiEliminaProvato. Riexco a modificare dimensioni e colore della descrizione. Grazie
RispondiEliminaun'altra curiosità
RispondiEliminanon contento mai ho ricambiato il template del blog passando da genius a suits (http://suits-btemplates.blogspot.it/)
un template responsive ma come succedeva anche con il template genius se utilizzo screenfly per testare la compatibilita su mobile aggiungendo ?m=1 alla fine dell'URL con il template "originale" la colonna a dx me la ritrovo in basso sotto tutti i post. se faccio la stessa operazione con il mio blog vedo solo i primi due "gadget" (come li chiama blogger): quello delle info personali e quello delle pagine. secondo capita sempre per il discorso che i template sono di difficile personalizzazione ?
grazie di nuovo per il tempo che mi vorrai dedicare
Con i template responsive devi disattivare la versione mobile e con Screenfly non devi aggiungere ?m=1 ma lasciare lo stesso URL
RispondiElimina@#
se ho capito bene vado su modello e spunto la voce "no. mostra modello desktop su dispositivi mobilii" giusto ?
Elimina(gentilissimo come sempre)
Sì. Con i template responsive ci vuole un'unica versione per desktop e mobile. Quando però fai delle modifiche devi sempre controllare con Screenfly con le varie risoluzioni
RispondiElimina@#
grazie di nuovo
RispondiEliminaCiao Ernesto, ho avuto problemi di visualizzazione in versione mobile con due dei miei blog (Borsa e Trading e VitaVivendo), facendo la prova "test di compatibilità", il sito Google mi diceva che i blog non erano compatibili, e in effetti nella versione mobile i blog non rendevano (caratteri piccoli ecc.). Dopo aver letto il tuo post ho inserito il metatag viewport (che mancava) e le cose sono notevolmente migliorate. A nuova prova di test infatti Google mi diceva compatibile, tuttavia, in una specie di nota mi avvisava che non era stato possibile caricare due risorse evidenziandomi queste due risposte: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js e ancora Googlebot bloccato dal file Robot.txt il cui link apriva su questo:
RispondiEliminaUser-Agent: *
Allow: /ads/preferences/
Allow: /gpt/
Disallow: /
Noindex: /
Seconda risorsa: https://pagead2.googlesyndication.com/pagead/js/google_top_exp.js e ancora Googlebot bloccato dal file Robot.txt il cui link apriva su questo:
User-Agent: *
Allow: /ads/preferences/
Allow: /gpt/
Disallow: /
Noindex: /
Puoi aiutarmi a risolvere questo problema? Grazie.
Sono le pubblicità Adsense. Forse stai usando dei formati non reattivi cioè che si adattano automaticamente al dispositivo con cui viene aperta la pagina
Elimina@#
Sì credo sia così, infatti dopo aver corretto la versione col tuo metatag viewport ho aggiunto Adsense a livello di pagina e il risultato è che sotto ho un piccolo banner pubblicitario attivo, mentre sopra spunta un avviso Azzurro/Bianco che dice "Un annuncio di ancoraggio è in corso...." ma resta così e non succede nulla. Posso fare qualcosa?
RispondiEliminaNon saprei. Non ho mai sperimentato una cosa del genere. Non è che hai cambiato qualcosa nel file robots.txt perché dal messaggio parrebbe di sì.
RispondiElimina@#
No, o almeno non volontariamente mi toccherà disabilitare gli annunci di ancoraggio. Grazie Ernesto, i tuoi suggerimenti mi hanno già dato una grossa mano.
RispondiEliminaCiao Ernesto, spero di non essere OT e che tu possa darmi una mano a risolvere questo problema. Ho diversi blog sia con modelli di Blogger (vecchi ed usati su blog con indirizzo .blogspot.com) sia con modelli scaricati da internet (utilizzato su dominio personalizzato). Essendo tutti template full responsive, utilizzo la versione desktop anche per il mobile quindi sono andato a disabilitarla cliccando sulla rotella dell'area template. Utilizzando il tool seorch.eu, ho visto che mi segnala il seguente messaggio: "Googlebot finds more than one mobile versions of the website". Dato che, per comparazione, ho provato ad analizzare il tuo sito con questo tool e mi da correttamente una sola versione mobile, mi chiedo dove possa essere l'errore, che check effettuare e, eventualmente, come risolvere questo problema? Grazie mille
RispondiEliminaProva con questo test
Eliminahttps://search.google.com/test/mobile-friendly?hl=it
che è quello di Google e che è quello che conta di più
@#
Scusa, non mi sono accorto che era già linkato nel post
Elimina@#
Grazie per le dritte, fatto il test, mi dice che la pagina è ottimizzata per dispositivi mobili ma pare che Googlebot continui a vedere più di una versione mobile del mio sito. Mi viene un dubbio: ho fatto il test "Visualizza come Google" da Google Search Control scegliendo come "Tipo Googlebot" l'opzione smartphone, mettendo l'url del mio sito vengo reindirizzato alla versione /?m=1...potrebbe essere questo il problema utilizzando un template responsive ed utilizzando la versione desktop anche per mobile?Credo sia un redirect automatico e forse facendo la stessa prova con il tuo sito si comporterà nel medisimo modo ma dato che brancolo un pò nel buio le provo tutte...grazie in anticipo come sempre per la pazienza e la disponibilità
EliminaSe hai disattivato la versione per il mobile, l'aggiunta di ?m=1 non è corretta. Se succede questo significa che è il tool che sbaglia
Elimina@#
Questo commento è stato eliminato dall'autore.
RispondiEliminaTi consiglio di non usare il tag body come selettore. Dovresti provare elemento per elemento. Prova con il selettore
Elimina.mobile body
oppure con
body .mobile
non so però se funzionerà
@#