Come mostrare in Blogger il link Visualizza la versione mobile nelle pagine aperte da desktop.

Come mostrare ai visitatori un link per visualizzare la versione mobile della pagina corrente di un sito di Blogger.

Nel precedente articolo abbiamo visto sia come nascondere il link Visualizza la versione web sia come invece evidenziarlo quando si apre il nostro sito di Blogger con dispositivi mobili. La prima scelta presuppone che si preferisca la versione mobile del nostro blog e che quindi si voglia rendere più difficile visualizzarlo come da desktop. La seconda scelta invece è dettata dalla sensazione che la visualizzazione da desktop sia comunque migliore e preferibile a quella da mobile.

Il link Visualizza la versione web è presente di default in tutti i modelli di Blogger quando i siti vengono aperti da mobile. Non accade invece il contrario. Cioè non c'è un link ufficiale di Blogger che dà la possibilità all'utente di visualizzare la pagina corrente nella versione mobile. In questo post vedremo come aggiungere un tale link e come personalizzarlo. Innanzitutto si deve andare su Bacheca > Layout e decidere in quale posizione visualizzare il nostro link per constatarne la fattibilità.

Come illustrato nel post sulla grafica del Layout sono visibili oltre ai Widget anche le Sezioni

Se decidiamo di posizionare il link in una sezione in cui si veda Aggiungi un gadget come la sezione footer-1 dello screenshot non ci sono ulteriori problemi. Se invece decidiamo di posizionare il collegamento in una sezione in cui non ci sia Aggiungi un gadget allora dovremo inserirlo.

COME VISUALIZZARE AGGIUNGI UN GADGET IN UNA SEZIONE

Se la sezione in cui volete inserire Visualizza versione mobile ha l'opzione Aggiungi un gadget passate al punto successivo. Chi invece si trova nella situazione opposta deve andare su Modello > Modifica HTML e con Ctrl+F cercare la sezione in oggetto. Quella dello screenshot è footer-3 

In showaddelement bisogna sostituire no con yes quindi salvare il modello. Se adesso si torna su Layout si vedrà l'elemento Aggiungi un gadget anche in questa sezione

COME INSERIRE IL LINK PER LA VERSIONE MOBILE

Dopo aver scelto la posizione si va su Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<div align='center'>
<p style='font-size:16px;font-weight:bold;'><a href='?m=1'>Visualizza versione mobile</a></p></div>

quindi si Salva e si posiziona sopra o sotto agli altri elementi presenti nella sezione.

Adesso scoprite l'ID dell'elemento appena aggiunto andando su Layout >  Modifica e scorrendone l'URL fino alla fine. Si va su Modello > Modifica HTML e si cerca tale ID con Ctrl+F. Nella riga del widget va aggiunto l'attributo mobile='no' come nello screenshot seguente e si salva il template

per mostrare il widget solo nella versione web come deve essere. Quando si apre una qualsiasi pagina del sito con un computer si visualizzerà il link appena inserito

Questo sarà visto in tutte le pagine e quando il navigatore ci cliccherà sopra aprirà la stessa pagina nella versione mobile del nostro sito. Per ulteriori personalizzazioni riguardo al colore bisogna usare il suo ID. Il codice precedente va integrato incollandoci sopra un altro codice 

<style>
#HTML17 > div:nth-child(1) > div:nth-child(2) > p:nth-child(1) a{color:#f00 !important}
</style>

dove il 17 è l'ID del widget che ho usato e che deve essere cambiato come il codice del colore #f00. Oltre al colore possono anche essere inseriti altri parametri come per esempio il background.

Demo
Clicca qui