Pubblicato il 02/10/13 - aggiornato il  | 109 commenti :

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.


109 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
  29. ciao ernesto, io vorrei adattare l'immagine presente nell'header ed il menu flottante alla visualizzazione per cellulare, ho cercato nel codice ma non ho trovato nulla :-(

    RispondiElimina
    Risposte
    1. È difficile adattare un menù ai dispositivi mobili.È consigliabile mettere dei vincoli per mostrare un menù per la versione desktop e un altro menù per la versione mobile. Personalmente ho anche disabilitato la visualizzazione dell'header nel mobile.
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      http://www.ideepercomputeredinternet.com/2016/11/blogger-header-mobile-media-screen.html
      @#

      Elimina
  30. Ciao Ernesto, Ottimo Articolo. Suppongo che questa procedura sia valida solo per i template di Blogger. Io uso Blogger ma ho un template diverso da quelli offerti da Blogger.Consigli? ti lascio il link del Blog per farti capire meglio cosa intendo. http://www.essere-informati.it

    RispondiElimina
    Risposte
    1. La procedura in linea di principio è valida anche per i template scaricati da internet. Per maggiori info leggi anche questo post
      http://www.ideepercomputeredinternet.com/2015/04/blogger-blog-mobile-friendly-code.html
      @#

      Elimina
    2. Ernesto ho provato di tutto. Ma non succede nulla. quando inserisco i codice da te elencati mi da errore. In pratica non accetta variazioni

      Elimina
  31. Buongiorno Ernesto. Ho un problema con la visualizzazione della pagina nella versione mobile.
    Nella versione desktop, ovviamente, si vede bene, mentre in quella mobile risulta tutto gigante e la formattazione è sfalsata.
    C'è un modo per intervenire?
    Per widget e post riesco, ma per la risoluzione adattabile delle pagine non trovo nessuna guida.
    Grazie in anticipo.

    RispondiElimina
    Risposte
    1. Non sono un veggente 🙂
      Se non incolli il link del tuo sito non posso neppure farmi una idea in merito. Da Google+ non si riesce a capire quale sia visto che hai un profilo senza contenuti
      @#

      Elimina
  32. Ahahah anche lei ha ragione! No, Ho 2 profili. L'altro è sezionegiallorossa! Ora comunque le posto la view desktop e quella mobile.

    RispondiElimina
  33. https://sezione-giallorossa.blogspot.it/p/calendario.html (la pagina in questione)
    Mi scuso per aver messo il link, ma era inevitabile per farle capire il problema.

    RispondiElimina
    Risposte
    1. Hai provato a creare una specie di tabella lasciando degli spazi tra i nomi delle squadre, icone e date. Forse potresti provare a creare una tabella personalizzata. Il risultato potrebbe essere migliore. Qui ci sono le istruzioni per una tabella personalizzata
      http://www.ideepercomputeredinternet.com/2016/04/tabella-html-css.html
      e qui per renderla Responsive e per visualizzarla correttamente anche con smartphone e tablet
      http://www.ideepercomputeredinternet.com/2016/05/css-tabella-responsive-design-blogger-wordpress.html

      @#

      Elimina
  34. https://sezione-giallorossa.blogspot.it/p/calendario.html (la pagina in questione)
    Mi scuso per aver messo il link, ma era inevitabile per farle capire il problema.

    RispondiElimina
  35. La ringrazio. Speravo di potesse adattare la pagina ad ogni tipo di schermo...
    Usare una tabella per un calendario di serie A risulterebbe troppo brutto esteticamente.
    Grazie comunque. Alessandro.

    RispondiElimina
  36. Mi devo ricredere sulla tabella... Pare sia l'unica soluzione! Grazie...

    RispondiElimina
  37. Ciao Ernesto, sono sempre io. Sono arrivata qui perché ho un problema con la versione mobile avendo inserito il codice per eliminare la sidebar in una determinata pagina statica.
    E niente, ho provato ad inserire questi codici ma nulla cambia, se tolgo il codice invece su mobile si vede perfettamente.
    Pensi posso risolvere in qualche modo? Sto tipo diventando scema :(

    RispondiElimina
    Risposte
    1. Ti ho risposto nell'altro commento. Utilizza l'ultimo codice per impostare due opzioni diverse per desktop e mobile. Per esempio

      <b:if cond="data:blog.isMobile">
      <style type='text/css'>
      #main {
      width: 100%; /* Larghezza della pagina statica */
      background:#eee; /* Sfondo pagina statica */
      color:#003366; /* Colore del testo */
      }
      </style>
      <b:else/>
      <style type='text/css'>
      #main {
      width: 920px; /* Larghezza della pagina statica */
      background:#eee; /* Sfondo pagina statica */
      color:#003366; /* Colore del testo */
      }
      </style>
      </b:if>

      da incollare però non nella pagina ma nel modello subito sopra a
      </head>

      insieme al resto del codice

      <style type="text/css">
      #left-sidebar {
      display: none;
      visibility: hidden;
      }
      #right-sidebar {
      display: none;
      visibility: hidden;
      }
      </style>

      @#

      Elimina
    2. Grazie Ernesto, davvero.
      Sei preziosissimo!! Considera che ci ho sbattuto la testa tutta la notte, ho risolto semplicemente sostituendo la percentuale ai pixel.
      Grazie ancora!

      Elimina
    3. Ok,
      perdonami ultima domanda. Impostando la grandezza a 110% ad esempio da cellulare si vede benissimo ma da desktop un po' meno o meglio, perdo così l'effetto full che avevo prima avendo impostato la pagina a 1200px.
      Ho provato ad utilizzare il codice mettendolo prima di /head, ma nulla è cambiato.
      Non riesco ad incollare qui nei commenti il codice, comunque ho copiato e incollato quello suggerito da te specificando che da mobile deve restare 100% e da desktop 160% ma niente, non cambia assolutamente niente.
      Ora mi chiedo, devo inserire qualcos'altro?
      Devo dare qualche comando per far capire a blogger che sto parlando di una pagina specifica?

      Elimina
    4. Hai messo width:160%; al posto di width: 920px; nel codice del commento 37.a?
      Se è così non sempre funziona tutto come si vorrebbe. Forse c'è ancora il codice nell'HTML del post. Controlla. Altrimenti non so come aiutarti ulteriormente
      @#

      Elimina
    5. Da desktop prova a mettere 1200px invece di 160%
      @#

      Elimina
    6. Ciao Ernesto,
      ho provato con entrambi le versioni, sia in percentuale che in pixel ma nada de nada. Succede che, inserendo il codice nel modello, il comando si applica a tutte le pagine statiche ma c'è sempre il problema di visualizzazione.
      ti ringrazio comunque, sei stato preziosissimo.

      Elimina
    7. Con i tag condizionali si può applicare anche a una sola pagina statica. Leggi meglio i post che hai consultato. Per il resto non ti so dire altro
      @#

      Elimina
  38. Ciao davvero gran sito, in queste settimane grazie a diversi tuoi articoli ho reso parzialmente il sito responsive. Nel senso che l'ho reso responsive (ho risolto anche il problema dell'Header che non si adattava con un escamotage), ma ho mantenuto la versione mobile perchè per come l'ho impostato sul telefono non sarebbe ben gestibile (il sito è https://runner451.blogspot.com). Solo una cosa vorrei riuscire a fare, aumentare la dimensione delle immagini nella Home del mobile del blog1, ho letto gli articoli sul ridimensionamento immagini diviso tra M e D, ma ho trovato per mobile solo nei post. E' possibile? Grazie e complimenti

    RispondiElimina
    Risposte
    1. Il problema della larghezza delle immagini che diventano troppo piccole nella visualizzazione da mobile si può provare a risolvere in questo modo
      http://www.ideepercomputeredinternet.com/2017/08/blogger-responsive-image.html
      cioè usare la percentuale al posto della larghezza in pixel in modo che le immagini mantengano sempre la stessa larghezza relativa rispetto al layout
      @#

      Elimina
    2. Ciao Ernesto grazie, non mi era arrivata la notifica della risposta e ho postato una domanda simile nel post in cui rendi i siti responsive di marzo 2015, perchè ho lo stesso problema desktop nella sidebar. Ho provato anche con le %, ma niente, restano fisse... ho provato anche con !important. Ora ci sono i pixel. grazie ancora

      Elimina
    3. Ok grazie questa l'ho capita. Invece le miniature del mobile non si possono ingrandire (nei post funziona)? Io ho tolto il testo nell'anteprima e resta tanto spazio vuoto (nel desktop non voglio il testo)

      Elimina
  39. Ciao Ernesto, magari tu puoi darmi una mano...Nella versione mobile del mio blog i margini sono errati perché il testo viene tagliato (lato destro). C'é un modo per modificare i margini o fare in modo che il testo venga visualizzato correttamente? Grazie mille

    RispondiElimina
    Risposte
    1. Sarebbe stato meglio che tu mi avessi incollato l'URL del tuo blog perché potessi farmi una idea. Nel caso in cui il tuo blog sia questo
      http://www.mintandbeauty.com/
      non vedo il problema. L'ho aperto con Screenfly e non ho visto testo tagliato anche con visualizzazione da smartphone
      http://quirktools.com/screenfly/#u=http%3A//www.mintandbeauty.com/2014/03/vichy-teint-ideal-foundation-spf-20.html%3Fm%3D1&w=414&h=736&a=37&s=1
      Mi sembra tutto perfetto, forse è un problema del tuo smartphone, stai usando un browser obsoleto
      @#

      Elimina
    2. Grazie mille per la celere risposta! In effetti non ci ho pensato....sono svampita.
      Comunque il blog é proprio quello ;)
      Non so davvero che dire, sul mio smartphone, con Chrome vedo tutto il testo sulla destra tranciato e pensavo lo visualizzassero tutti così...

      Elimina
  40. Vorrei nascondere la sidebar nella versione mobile personalizzata perché ora appare dello spazio sulla destra vuoto ma non riesco a capire su quale codice devo intervenire. Mi puoi aiutare? Il mio sito è www.girovagandoconstefania.it

    RispondiElimina
    Risposte
    1. La sidebar nella versione mobile non si vede automaticamente. Lo spazio che vedi sulla destra dipende dalla risoluzione del dispositivo con cui apri la pagina. Con un iPhone si vede benissimo
      http://quirktools.com/screenfly/#u=http%3A//www.girovagandoconstefania.it/%3Fm%3D1&w=414&h=736&a=37&s=1
      e pure con un iPad
      http://quirktools.com/screenfly/#u=http%3A//www.girovagandoconstefania.it/%3Fm%3D1&w=1024&h=768&a=22&s=1
      @#

      Elimina
  41. Non hai bisogno di soluzioni. Va già bene così. Nessuno apre i tuoi post da PC con l'URL della versione mobile
    @#

    RispondiElimina
  42. C'è da impazzire per la trasposizione su mobile...
    uso il tag meta content='width=device-width' name='viewport'/ , l'unico che perlomeno mi adatta il blog su mobile. Le immagini invece inserite nel post sono più piccole, ed anche il testo, rispetto i margini desktop. C'è una soluzione su CSS per definire le dimensioni IMG solo su mobile?
    Puoi dare un occhiata qui: https://autodimerda.blogspot.it/?m=1

    RispondiElimina
    Risposte
    1. Si possono impostare le dimensioni delle immagini nelle varie pagine di Blogger
      http://www.ideepercomputeredinternet.com/2016/04/blogger-immagini-css.html
      Per impostarle nella versione mobile potrebbe funzionare questo codice (non ho testato)

      .mobile .post-body img {
      width: 300px !important;
      height: auto !important;
      }

      da personalizzare e da inserire subito prima della riga ]]></b:skin>

      @#

      Elimina
    2. Grazie per la risposta. Purtroppo la strada è dura, al momento l unica soluzione che ho trovato è associare una classe alle immagini e utilizzare le condizioni b:if cond='data:blog.isMobile'

      Elimina
  43. Salve Ernesto, è possibile far vedere all'apertura del blog in versione mobile, il contenuto di un post anzichè l'elenco dei post (la visualizzazione con la freccia a destra per intenderci)? Grazie.

    RispondiElimina
    Risposte
    1. Può darsi che si possa fare ma non me ne sono mai occupato. In ogni caso la versione mobile non è facilmente personalizzabile. Questo è il tutorial per mostrare un contenuto fisso nella home della versione desktop
      https://www.ideepercomputeredinternet.com/2017/03/blogger-nascondere-post-home.html
      In teoria si potrebbe tentare di adattarlo per la versione mobile.
      @#

      Elimina
  44. Ciao Ernesto, ho letto tutti i commenti sperando di trovare la risposta ma non ho trovato nulla. E leggendo questo ultimo commento mi sa che quel che chiedo non si può fare... Secondo te, è possibile fare in modo che la home page per la versione mobile sia l'elenco dei post di una categoria, mentre la home page per la versione desktop sia una pagina statica?

    RispondiElimina
    Risposte
    1. Si può fare in modo che la home sia una pagina statica
      https://www.ideepercomputeredinternet.com/2017/03/blogger-nascondere-post-home.html
      Mostrare due home diverse a seconda del dispositivo in teoria si potrebbe anche fare con i tag condizionali
      https://www.ideepercomputeredinternet.com/2016/08/blogger-conditional-tags.html
      però nella fattispecie non sono sicuro che si possano integrare queste due personalizzazioni
      @#

      Elimina
    2. Sono due articoli che ho usato moltissimo (quello dei tag lo consulto regolarmente)... non mi resta che provare, grazie mille, ti farò sapere

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

      Elimina
  45. Salve volevo sapere una cosa, nel mio blog ho messo in ogni post dei video di yuotube ma nella versione mobile non li fa vedere cioè non spuntano proprio, come potrei risolvere grazie

    RispondiElimina
    Risposte
    1. Ho controllato come si vede questo tuo post
      https://www.wantedstreaming.it/2021/06/naruto.html
      da mobile con questo tool
      http://it.infobyip.com/testwebsiteresolution.php
      e il video si vede anche se c'è una pubblicità Net-Parade molto invasiva. Prova anche te seguendo queste istruzioni
      https://www.ideepercomputeredinternet.com/2019/09/testare-risoluzione-smartphone-tablet.html
      Forse dipende dal modello dello smartphone o dal browser che hai usato per aprire il post
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy