Come personalizzare la versione desktop e quella mobile di un blog su Blogger.

Come personalizzare separatamente le versioni mobile e desktop di un blog su Blogger.

A seguito di un interessante commento che mi chiedeva lumi sul perché le modifiche fatte al template si visualizzassero solo nella versione mobile ho deciso che per fare un po' di chiarezza fosse opportuno scrivere un articolo proprio su questo tema. Tutti gli utenti di Blogger avranno certamente avuto il modo di accedere al nuovo Editor HTML per la modifica del template.

Come nel caso dell'uovo e della gallina non si sa se questo Editor sia stato creato appositamente per tenere distinti i codici della versione desktop da quella mobile o se sia stata proprio questa necessità a obbligare il Team di Blogger a progettare questo nuovo Editor. Mi sento di dire che in ogni caso non c'è stata una grande informazione nei confronti degli utenti per quello che riguarda le sue caratteristiche.

Come certo sapete ciascun blog di Blogger anche su dominio personalizzato ha anche una sua versione mobile. Per visualizzare un sito con questa mobilità basta aggiungere all'URL il suffisso ?m=1

http://www.ideepercomputeredinternet.com/?m=1
http://www.ideepercomputeredinternet.com/2013/10/video-privati-non-in-elenco-youtube.html?m=1

Per farvi una idea provate a visualizzare gli URL precedenti. Nel caso della homepage ?m=1 va aggiunto dopo la slash mentre per tutte le altre pagine semplicemente dopo l'URL. La versione mobile può essere abilitata oppure si può obbligare chi visita il nostro sito da smartphone a visualizzare la versione desktop. Si va su Modello > Cellulare e si clicca sulla icona delle Impostazioni per selezionare il template

Si può scegliere anche Personalizza per adattare tutte le modifiche che abbiamo fatto al blog alla versione per cellulari. Prima di salvare è sempre opportuno aprire l'Anteprima. Se adesso andiamo su Modello > Modifica HTML > Vai al widget > Blog1 si visualizzeranno tutte le sezioni in cui è stato suddivisa l'area principale del nostro sito. Ciascuna sezione può essere aperta cliccando sulla freccetta nera a sinistra

  

Ho evidenziato di giallo le sezioni che riguardano la versione mobile e di azzurro quelle che riguardano quella desktop. Alcune sezioni come quelle dei commenti sono invece comuni alle due visualizzazioni. Quando si vogliono fare delle modifiche al template dobbiamo quindi procedere in questo modo

1. Se la sezione della modifica è comune la effettuiamo senza problemi
2. Se la modifica riguarda un codice presente sia nella sezione mobile sia in quella desktop dobbiamo operare solo su quella desktop se vogliamo che le personalizzazioni siano visibili solo da computer, operare invece nella sezione mobile se quest'ultime debbono essere visibili solo da cellulare. È anche possibile inserire le modifiche in entrambe le sezioni per avere le personalizzazioni sia quando si apre il sito da PC sia quando si apre dal cellulare.

La maggior parte del codice da inserire nel template (versione desktop) va incollato nella sezione
<b:includable id='post' var='post'>
La corrispondente sezione mobile sarà preceduta invece dalla riga
<b:includable id='mobile-post' var='post'>

Nel codice del modello questa seconda riga si trova prima dell'altra e quindi capita che se si cerca un codice con Ctrl+F si trovi prima il codice mobile di quello desktop. Senza un minimo di attenzione faremo quindi delle modifiche che saranno visibili solo al cellulare. In queste due sezioni ci sono le righe più comuni che vengono prese come riferimento per il codice aggiunto. Faccio un breve elenco

<div class='post-header'>                                                      Intestazione del post
<div class='post-header-line-1'/>                                           Seconda linea della intestazione
<div class='post-body entry-content'…                                 Inizio del post
<data:post.body/>                                                                    Contenuto del post
<div class='post-footer'>                                                         Footer del post
<div class='post-footer-line post-footer-line-1'>                    Prima linea del footer
<div class='post-footer-line post-footer-line-2'>                    Seconda linea del footer

Queste righe sono presenti sia nel codice del mobile sia in quello desktop.

COME INSERIRE UN ELEMENTO SOLO SU MOBILE O SU DESKTOP

Abbiamo visto che usando la sezione specifica possiamo inserire un elemento come per esempio delle icone di condivisione solo sul desktop o solo sul mobile. Possiamo farlo anche con dei banner, con delle immagini o altri oggetti HTML. Ci possono però essere dei casi in cui un elemento non possa essere inserito in una di queste sezioni. Per esempio il menù di questo sito viene inserito subito prima della riga ]]></b:skin> e quindi non è possibile con questo sistema di mostrarlo solo nella versione desktop e nella versione mobile non si vede perché i browser mobili con lo supportano.

In questi casi occorre usare un codice simile al seguente

<b:if cond="data:blog.isMobile">
<!-- Visibile solo nei dispositivi mobili-->
Codice dell'elemento visibile con il mobile
<b:else/>
<!-- Visibile solo tramite desktop -->
Codice dell'elemento visibile tramite desktop
</b:if>

dove con l'ausilio dei tag condizionali ho potuto rendere visibile il menù solo nella versione desktop. Se non volete mostrare niente in una delle due versioni basta lasciare lo spazio in bianco.