Pubblicato il 02/10/13e aggiornato il

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

versione-mobile
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

sezioni-blog1  
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.




64 commenti :

  1. Sul mio blog il mio logo è piccolo mentre nella versione mobile è gigante! Poi io per curiosità l'altro giorno mi sono collegato col telefonino che è un catorcio e quindi non di nuova generazione e me lo fa vedere come se fosse il PC (con tanto di banner pubblicitari e gadget), quindi non come aggiungendo m=1.

    RispondiElimina
    Risposte
    1. Te lo fa vedere in versione desktop. È il browser del telefonino
      @#

      Elimina
  2. Ernesto a me interesserebbe una cosa simile a questa per il blog mobile.
    BANNER HEADER poi sotto al banner 4 foto con scritto PRODOTTI - CONTATTI - CONDIZIONI DI VENDITA - FACEBOOK
    con i vari collegamenti.

    RispondiElimina
    Risposte
    1. Prova a mettere 4 foto orizzontali in una tabella
      http://www.ideepercomputeredinternet.com/2010/03/galleria-foto-windows-live-writer.html
      metti i link e poi il codice lo inserisci in un widget HTML/Javascript. Per essere visibile solo nel mobile segui questo post
      http://www.ideepercomputeredinternet.com/2013/01/blogger-mobile-modello.html
      soprattutto nella parte finale
      In sostanza devi mettere l'ultimo tag condizionale
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
      per mostrare il widget solo nella versione mobile
      @#

      Elimina
  3. non uso windows,uso ma. c'è un sostituto per live writer?

    RispondiElimina
    Risposte
    1. Puoi usare il codice di una tabella di una riga e 4 colonne
      http://www.ideepercomputeredinternet.com/2011/10/come-inserire-nel-blog-una-tabella-di.html
      @#

      Elimina
  4. Grazie per questo post!!! A presto! Giuliana

    RispondiElimina
  5. Ma se una persona usa banner pubblicitari (affiliazioni) gli conviene usare la versione desktop invece di quella mobile oppure da telefoni i click non valgono?

    ps: nella versione mobile manca un widget importantissimo: la casella di ricerca!

    RispondiElimina
    Risposte
    1. I click valgono anche nella versione mobile se fatti secondo regolamento (che è lo stesso della versione desktop)
      @#

      Elimina
  6. Ciao Ernesto,

    scusa il disturbo, ti volevo chiedere un info riguardo la versione mobile del blog ... ho notato che entrando nei post mi appare solo il tasto di condivisione di google plus, quelli di twitter e facebook non vengono visualizzati ... c'è un modo per farli apparire nei post della versione mobile?

    ciao e grazie anticipatamente!

    RispondiElimina
    Risposte
    1. Questo è il post giusto. Devi inserire i bottoni nella versione mobile incollandoli nella apposita sezione
      b:includable id='mobile-post' var='post'
      scegliendo anche il posizionamento
      @#

      Elimina
  7. Per inserire un menu visualizzabile anche dai cellulari, allora non c'è speranza?

    RispondiElimina
    Risposte
    1. Per il momento non mi ricordo di averne visto neppure uno ma vedrai che arriveranno. Il settore mobile è ancora relativamente giovane
      @#

      Elimina
    2. Ti è capitato di dare un'occhiata al sito "Weebly"? Oltre ad essere davvero un bel sito, offre una visualizzazione dai cellulari molto semplice ed è presente anche un menu. Chissà mai se arriverà anche su "Blogspot".

      Elimina
  8. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  9. Ciao. Mi puoi dire quale codice devo inserire prima e dopo quello del banner per farlo apparire solo nella versione mobile? Uso un blog di Blogger e il codice del banner in genere lo inserisco mediante layout.
    Dal tuo post non riesco a capirlo e ho fatto qualche tentativo, ma invano. Sarà un mio limite.
    Grazie

    RispondiElimina
    Risposte
    1. Per visualizzare un widget solo nella versione desktop va inserito nel modello e non su Layout. Esattamente nella sezione che inizia con
      < b:includable id='mobile-post' var='post' >
      come spiegato correttamente nel post.
      @#

      Elimina
    2. No io dico solo nella versione mobile

      Elimina
    3. Sì ho sbagliato, intendevo dire solo nella versione mobile ovviamente visto che c'è mobile-post :)

      Elimina
  10. Grazie, nell'anteprima appare :)
    Sul mio smartphone però, facendo una prova, ancora no. Non so se dipende dal modello, che forse non supporta quel formato (ho un Samsung S5830). Non è un iphone ma neanche un cesso.
    Mah

    RispondiElimina
    Risposte
    1. Pewr verificare che la personalizzazione per il mobile funzioni leggi l'inizio di questo post. In sostanza devi aggiungere /?m=1 alla homepage e ?m=1 agli altri indirizzi per controllare come si vede una pagina con un dispositivo mobile. Poi naturalmente c'è il tipo di cellulare che può fare la differenza e anche il tipo di browser o di applicazione che si usa per aprire un sito
      @#

      Elimina
  11. ciao Ernesto sono riuscita a mettere i bottoni social e i post simili al fondo del post visibili anche su mobile, ho scelto quindi l'opzione personalizzata sulle impostazioni, unico problema ,non riesco a nascondere il drop menù e il banner pubblicitario nel mobile, anzi non sarebbe un problema solo che si vede in misura enorme, ho l'esigenza di ottimizzare il blog per la versione mobile, in quanto la maggior parte delle visite viene da mobile, e mi è stato chiesto da alcune aziende pubblicitarie che mi hanno dato banner da mettere, ma essendo nella sidebar , non c'è modo di vederli anche su mobile giusto?
    stavo pensando di installare un template responsive , ma non ho voglia di riniziare da capo e poi come mi hai insegnato tu molte volte i template scaricati da internet a volte danno molti problemi, scusa il papiro , ciao e buona giornata

    RispondiElimina
    Risposte
    1. Io sono riuscito a nascondere questo menù nel mobile con il codice pubblicato alla fine di questo post. I widget situati nelle sidebar non possono essere visti su mobile ma potresti creare dei vincoli in modo da mosrtare i banner normalmente nella versione desktop nella sidebar e inserirli anche nell'area del post direttamente nel modello nella sesione del mobile

      @#

      Elimina
  12. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  13. non ho ben capito due cose, in che parte del template devo mettere lo script con ele condizioni(visibile su desktop,visibile su mobile) e nel caso come te voglia nascondere il menù nella versione mobile , dove è scritto visibile solo su mobile lo lascio in bianco e scrivo il codice del menù solo dove c'è scritto codice visibile solo su desktop? scua mo non mi è ancor chiaro!

    RispondiElimina
    Risposte
    1. Il codice del menù lo hai sul modello? Se sì devi metterlo all'interno del codice di questo articolo in modo che risulti visibile solo nel desktop.. Se nel mobile al suo posto non vuoi vedere nulla lasci in bianco. Personalmente ho messo un div per togliere un po' di spazio che rimaneva bianco nel mobile

      @#

      Elimina
    2. fatto grazie ancora , una sola cosa , altro argomento ma utile,non riesco a commentare su chrome ,ho provato a disinstallare il programma e reistallarlo ma niente , fra l'altro ho visto che anche da te con chrome il widget dei followers di google non si vede , mi sa che torno a firefox

      Elimina
    3. Il widget dei followers si vede anche con Chrome. Delle volte c'è bisogno di ricaricare la pagina ma succede anche con il Like Box di Facebook. È il contro del caricamento asincrono dei gadget

      @#

      Elimina
  14. Ciao e grazie per il lavoro utilissimo che fai,
    un quesito, i link di riferimento sono questi:
    http://www.mavideoreview.it e http://www.mavideoreview.it/?m=1 , nel sito desktop ho incorporato i video da youtube aggiungendo un contenitore (via css) che mi ridimensiona il player in base alla larghezza disponibile,
    essendo il post ripreso su versione mobile, perchè ciò non accade ma mi mette la dimensione indicata dell'iframe? la soluzione sarà ovvia ma mi sfugge. Forse il contenitore impostato via css è solo per desktop? se si, si può estendere la funzionalità alla versione mobile, grazie per l'attenzione.

    RispondiElimina
    Risposte
    1. Personalmente uso il codice ufficiale di Youtube, quello dell'iframe e non il codice vecchio. Si possono settare le dimensioni e quando si passa ai dispositivi mobili essendo in HTML5 viene ridimensionato automaticamente il player. Puoi dare uno sguardo anche a questo post che potrebbe tornarti utile
      http://www.ideepercomputeredinternet.com/2014/04/video-youtube-blogger.html
      @#

      Elimina
    2. Grazie per la risposta,
      anch'io uso iframe fornito oggi da youtube ma non mi ridimensiona automaticamente il player nella versione mobile, ti allegherei screenshot ma fai prima ad entrare in un post che ti ho linkato nel commento precedente, vorrei una mano a risolvere questo problema. dopo che hai visto puoi anche rimuovere il link, non sono qui in cerca di click (figurati che non ho neanche pubblicità sul sito!). Ciao è grazie.
      Se non riesci tu, non so chi, ancora grazie!

      Elimina
    3. Questo problema mi è stato fatto presente da altre persone ma quello che ho potuto fare l'ho scritto nel post linkato nel commento 14.a
      @#

      Elimina
  15. Salve sig. Ernesto,
    grazie sempre per la disponibilità!Io, come al solito, ho un problema insolito: nella visualizzazione da smartphone le tabelle sforano dai margini del post. E' come se non si adattassero ai margini imposti dalla visualizzazione mobile! Grazie sempre in anticipo per la disponibilità!

    RispondiElimina
    Risposte
    1. Temo non si possa fare nulla. Il tema della visualizzazione da smartphone è molto vasto ed è funzione non solo del browser utilizzato dal cellulare ma anche del modello. Ci sono dei problemi anche con i video. Prova a pubblicare tabelle più piccole.
      @#

      Elimina
    2. Grazie mille per il consiglio, sempre gentilissimo! Un abbraccio!

      Elimina
  16. Salve,
    utilizzo un template fatto con Artisteer modificato con il tuo menu orizzontale a tendina con livelli.
    Ho provato a creare, tramite blogger, la versione mobile, ma non viene modificato nulla scegliendo qualunque template. E' possibile operare in qualche modo per creare una versione mobile del sito?
    Mi riferisco a isole-greche . com

    RispondiElimina
  17. Aggiornamento: la modifica viene fatta (il problema era l'anteprima che non vedeva la modifica) però il blog, con qualunque template utilizzo, fa veramente schifo: perde totalmente la struttura, mettendo soltanto la sequenza di articoli in ordine cronologico non facendo capire davvero nulla!

    RispondiElimina
    Risposte
    1. I template creati con Artisteer, specie nella versione crackata che certamente non sarà il tuo caso, sono quanto di più difficile da personalizzare. Prova con questo sistema per vedere se ti soddisfa la versione mobile ottenuta con Responsive
      http://www.ideepercomputeredinternet.com/2015/03/blogger-responsive-design-template.html
      @#

      Elimina
  18. ciao Ernesto, complimenti per l'articolo; come si fa a visualizzare la casella di ricerca tra menù principale ed intestazione nella versione mobile (in pratica come avviene nella tua versione mobile)? ho inserito la casella di ricerca nella versione mobile, ma mi compare alla fine; potresti aiutarmi in merito? grazie ;)

    RispondiElimina
    Risposte
    1. Ho semplicemente incollato il codice della casella di ricerca sotto a quello del menù che a sua volta è sopra a < header >
      @#

      Elimina
    2. mi dà errore: The widget with id CustomSearch1 is not within a section (actual parent element is: div.) Every widget should be in a section.
      deve essere inserito in una sezione e non mi fa procedere

      Elimina
    3. Probabilmente hai usato il widget di Blogger invece dovresti usare il codice di Adsense per la ricerca, sempre se sei iscritto. Non bisogna inserire un widget ma solo un codice parsato
      @#

      Elimina
  19. Salve sig. Ernesto,
    vorrei eliminare il link "visualizza la versione web" dalla versione mobile di Blogger, è possibile? Grazie

    RispondiElimina
    Risposte
    1. È possibile. Seguimi domani che ci farò un post visto che la cosa potrebbe interessare ad altri
      @#

      Elimina
    2. ho provato a modificare il template ma dal cell. continuo a visualizzare la scritta "visualizza la versione web" dove sbaglio? è possibile che tale scritta possa vedersi e non a secondo del cell. che visualizza il blog? grazie

      Elimina
    3. Hai seguito questo post?
      http://www.ideepercomputeredinternet.com/2015/06/nascondere-link-visualizza-web-mobile.html
      Il selettore univoco è quello che ho rilevato cioè .mobile-desktop-link. Non credo che sia una diversa visualizzazione. Forse nel tuo template il selettore univoco è diverso. Prova a rilevarlo con questo tool
      http://www.ideepercomputeredinternet.com/2014/12/analizza-elemento-firefox.html
      @#

      Elimina
  20. Ho Cambiato Template e funziona. Grazie

    RispondiElimina
  21. salve Ernesto, io ho la versione personalizzata del mobile in blogger ed ho un dominio.Visto un alta frequenza di rimbalzo quando il lettore arriva nella versione mobile che riporta un elenco degli articoli vorrei sapere se hai scritto qualcosa in merito ad esempio a come far comparire nella home del mobile l'articolo che va per la maggiore, non so sono riuscito a spiegarmi bene. Grazie ,ecco il sito:

    http://www.risparmioebenessere.it/

    RispondiElimina
    Risposte
    1. Ho scritto questo post per mettere in evidenza un post nella versione desktop.
      http://www.ideepercomputeredinternet.com/2015/10/blogger-post-evidenza-widget.html
      Per visualizzarlo anche da mobile bisogna aggiungere il tag mobile='yes' nella prima riga del widget
      http://www.ideepercomputeredinternet.com/2013/12/blogger-widget-versione-tablet-smartphone.html
      @#

      Elimina
  22. Salve ..il mio blog funziona bene(blogger) ormai lo gestisco da mesi con facilità. Mi sono purtroppo accorto però che i video caricati, che si aprono regolarmente e velocemente con il pc non si caricano e quindi non vengono riprodotti con smartphone (android e non.. Sony xperia e Nokia Lumia). I video sono stati caricati tutti da diversi mesi con la procedura di blogger da file wmv del pc. sapete aiutarmi ?

    RispondiElimina
    Risposte
    1. I video sono caricati su Youtube come quello in questo post?
      http://paoloricci58.blogspot.it/2015/11/un-uomo-in-fuga.html
      Se è così è probabile che dipenda dalla mancanza del plugin Adobe Flash Player. Invece di caricarli con il vecchio codice caricali con l'iframe e non con il codice < embed ... Vai su Condividi > Codice da incorporare e copia il codice che inizia con < iframe ...
      @#

      Elimina
  23. ciao ti ringrazio per la volta scorsa la tua risposta mi ha aiutato tantissimo....adesso spero di non chiederti troppo ho un problema il mio blog visto su cell si vede male mi sposta il logo e accentra tutto a destra il resto.. dove devo mettere le mani per sistemare le cose,, ho capito che sara su la sezione del mobile ma cosa cambiare non so.. grazie ancora

    RispondiElimina
    Risposte
    1. Il menù ti conviene lasciarlo solo nel desktop e inserire nel mobile un menù più semplice. Per esempio così
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      Per il logo dovresti usare i tag condizionali per mobile per fare in modo di centrare il logo nella versione desktop e invece allinearlo a sinistra in quella mobile. Non è cosa semplicissima da fare ti avverto
      http://www.ideepercomputeredinternet.com/2014/11/blogger-tag-condizionali-desktop-mobile.html

      @#

      Elimina
    2. ho incollato in css per accentrare ma non funziona

      #header-inner {
      background-position: center;
      margin-left: auto;
      margin-right: auto;
      }
      lo messo all interno dell attributo come avevi detto,,,,ma nulla

      Elimina
  24. Sig. Ernesto salve,
    saprebbe dirmi come poter rendere non visibili parti di un post sulla versione mobile magari intervenendo direttamente su WLW? La ringrazio per il tempo dedicatomi e le auguro buone feste!!

    RispondiElimina
    Risposte
    1. Possono aiutarti questi due post
      http://www.ideepercomputeredinternet.com/2015/11/widget-blogger-risoluzioni-mobile.html
      http://www.ideepercomputeredinternet.com/2015/11/media-query-mediascreen-risoluzione-blogger-wordpress.html
      specie il secondo
      @#

      Elimina
  25. Ciao Ernesto, ti seguo da tanto... ;-) Perchè nella versione mobile non vedo la immagine dell'intestazione del blog ? Posso fare qualcosa ? Grazie mille !

    RispondiElimina
    Risposte
    1. Credo che la tua intestazione abbia delle dimensioni non compatibili con i dispositivi mobili. Sono 1257x349 pixel. Il problema potrebbe anche essere quello che la tua intestazione non è stata messa al posto di Titolo e Descrizione ma sotto a Titolo e Descrizione quindi appare come background. Prova a fare dei test in questo senso andando su Layout > Intestazione > Modifica
      Una dimensione per l'immagine dell'header che funziona potrebbe essere 900x200
      @#

      Elimina
  26. Grazie per la risposta, ho ridotto l'immagine a 900 x 250 e:
    1) l'immagine è a sinistra
    2) non appare lo stesso
    eppure avevo verificato nel layout se l'avevo inserita al posto giusto.
    Sono andata a verificare un altro blog la cui foto è collocata nell'header (dimensioni 957px)e nella versione mobile la foto titolo si vede perfettamente. Può essere dipenda che la foto di cui stiamo parlando è salvata in versione web ? grazie ancora !

    RispondiElimina
    Risposte
    1. Salva l'immagine in PNG o in JPG andando su Salva con nome (se usi Photoshop o simile)
      @#

      Elimina
  27. c'ho provato questa notte in jpg, e nulla da fare, poi era tardi ed ho rimesso com'era.
    Comunque in un blog di prova, (sempre grazie ai tuoi consigli) ho inserito, nel titolo del blog il link di una immagine, l'ho centrata e sul mobile la "foto titolo" è visibile. qualora applicassi ciò al mio sito/blog non so se nella ricerca apparirà anche l'html. altra hp è che cambi layout togliendo le colonne laterali, riduca l'ampiezza del blog, ed inserisco i widget nell'unica colonna, ma ci vorrà un sacco di tempo e, si vedrà ?

    RispondiElimina
  28. Sìììììììì, come sempre avevi ragione tu Ernesto ed io non avevo capito proprio nulla !
    la mia foto /intestazione, come dicevi, faceva da background e non si vedeva, avevo cliccato sul n 1 ed ora è sul 3)

    1)Dietro titolo e descrizione
    2)Al posto di titolo e descrizione
    3)Fai seguire questa immagine da una descrizione
    Grazie mille !!!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.