Come visualizzare un elemento solo nella versione mobile Blogger

Come si fa a mostrare un codice HTML solo nella versione mobile di Blogger? Come ben saprai, Blogger aggiunge un editor completo per quanto concerne il modello HTML. Questo è molto importante perché possiamo modificare il modello per creare le varie grafiche ottimizzate per la versione mobile e le versione desktop. Il motore di ricerca fa una vera e propria selezione delle pagine web anche in base al tempo di caricamento del sito. 

Ci sono diversi strumenti che possono misurare la qualità di un sito web e danno un punteggio e dei consigli su come migliorarla. Ho riportato una breve guida in questo post, per incrementare anche le visite di un piccolo blog migliorando appunto il tempo di caricamento. Dopo questa digressione, passiamo al vero scopo di questa guida, l'ottimizzazione delle varie versioni ė molto importante per una corretta visualizzazione dei vari componenti nelle due versioni.

Di vitale importanza è l'alleggerimento della versione mobile, dato che in primo luogo i dispositivi mobili hanno uno schermo più piccolo e le persone non sono abituate ad aspettare tanto tempo. Il tempo difatti è anch'esso sinonimo di qualità. Una pagina si deve caricare in meno di 5 secondi, altrimenti il nostro visitatore potrebbe spazientirsi e cambiare sito. Per fare questo dobbiamo alleggerire il modello, mostrando magari solo nella versione desktop dei messaggi pop up, alcune foto o complicati menù. Risparmiare va bene, ma seppur una versione limitata deve comunque garantire la maggior parte delle funzioni che troviamo sulla versione desktop. 

Detto ciò, vediamo come operare nel dettaglio. Eliminare tutti i widget che abbiamo messo nel nostro modello è una scelta poco logica, ma piuttosto basterà visualizzarne nella versione mobile solo alcuni e nella versione desktop gli stessi, oppure altri script più complessi. È possibile farlo con dei tag condizionali in " if " e " else ". Nulla di semplice, difatti un esempio semplice da capire potrebbe essere, " se piove prendo l'ombrello, altrimenti no ". Che applicato al nostro problema, potrebbe assomigliare all'affermazione " se il sito è nella versione desktop visualizza questo script, altrimenti visualizza quest'altro, oppure non visualizzarlo". 

Trasferire questa frase in codice non è complicato, difatti basterà inserire il seguente tag condizionale, è formato da due blocchi: quello dell'if, nel quale dove ho scritto " Qui incolla solo il codice per visualizzare l'elemento nella versione mobile ", basterà appunto incollare il codice dello script che vuoi visualizzare solo nella versione desktop e nell'else, quindi al posto della dicitura " Qui invece incolla il codice solo per visualizzare l'elemento nella versione normale da desktop ", incolla il codice da visualizzare solo nella versione desktop: 

 

CODICE SOLO PER LA VERSIONE MOBILE
Nel caso in cui non vuoi inserire un versione desktop dello script, basterà solo completare la prima parte ed utilizza questo codice semplificato:


Questo post è concluso, abbiamo capito quindi come utilizzare uno script condizionale per creare una versione mobile e desktop del sito. 


Segui Help Tecno Blog sui canali social per rimanere aggiornato sulle ultime novità, basta un click:
-Seguici su Facebook😄
-Seguici su Twitter😀
-Seguici su YouTube😁
-Iscriviti ai Feed😏

Offerte consigliate:



Commenti