Come nascondere o modificare il link Visualizza la versione web quando si apre un blog di Blogger da mobile.

Come eliminare il collegamento per visualizzare il blog su Blogger da web nella sua versione mobile.

Giusto ieri in un commento mi è stato chiesto se fosse possibile nascondere la scritta Visualizza la versione web quando si apre il sito da mobile. Onestamente devo dire che mi sfuggono le ragioni di una tale esigenza però visto che la cosa potrebbe interessare anche altre persone ho ritenuto opportuno farci un articolo e ampliare le possibilità di personalizzazione.

Vedremo quindi come si possa nascondere tale scritta ma anche come si possa modificarne l'aspetto per quello che riguarda le dimensioni dei font e i colori. Se non avete sottomano uno smartphone, o anche solo per velocizzare le operazioni, si può controllare come si visualizza una pagina da mobile usando il tool Screenfly e incollando l'URL della pagina da testare con l'aggiunta di ?m=1. 

Per nascondere questo link si utilizza il tool Analizza elemento che è in grado di fornirci il suo selettore univoco. Per tale personalizzazione dopo aver salvato il template si va su Modello > Modifica HTML, con Ctrl+F, si cerca la riga </head> e, subito sopra a questa, si incolla 

<b:if cond='data:blog.isMobile'>
<style>
.mobile-desktop-link {display:none;}
</style>  
</b:if>

Dopo aver salvato il modello non si vedrà più il link Visualizza la versione web.

 

COME PERSONALIZZARE LA SCRITTA

Se  invece di nasconderla si preferisce valorizzarla per indurre il lettore a preferire la versione web a quella mobile si deve modificarne il colore e aumentarne le dimensioni. Sempre nella stessa posizione il codice da aggiungere in questo caso potrebbe essere questo 

<b:if cond='data:blog.isMobile'>
<style>
.mobile-desktop-link {font-size:1.8em;}
.mobile-desktop-link a {color:#f00 !important}
</style>  
</b:if>

dove possono essere modificati il codice del colore e la dimensione dei caratteri. Ho usato un tag proporzionale (1.8em) che aumenta dell'80% la dimensione normale del font. 

Lo screenshot precedente mostra il risultato dopo il salvataggio del template.