Pubblicato il 22/03/15e aggiornato il

Come creare un modello Responsive Design da un template ufficiale di Blogger.

Come convertire un modello ufficiale di Blogger (Semplice, Filigrana, Fantastico, Etereo, Finestra Immagine e Viaggi) in un template Responsive Design per la visualizzazione nei dispositivi mobili senza attivare la funzionalità che modifica l'URL della pagina.
Nell'articolo precedente abbiamo visto come testare la visualizzazione del nostro sito con i vari dispositivi tramite lo strumento Screenfly. Gli utenti di Blogger possono usare la funzionalità della piattaforma che in automatico, se la pagina viene aperta da un dispositivo mobile, ne modifica l'URL aggiungendogli ?m=1 e mostrando un nuovo aspetto nei tablet e negli smartphone. Questa opzione è presente di default ma può essere abilitata o disabilitata andando su Modello > Cellulare

Questa soluzione però non soddisfa appieno tutte le esigenze. Su internet ci sono siti che offrono modelli gratuiti per Blogger con Responsive Design. Basta fare una ricerca con Google e se ne trovano quanti se ne vuole. Saprete però che la scelta di un template scaricato da internet è sconsigliata a meno che il modello scelto non sia perfetto per le nostre esigenze. Per tali template ci sono infatti un sacco di controindicazioni che vanno dai link di attribuzione al sito dell'autore che potrebbe essere malvisto da Google alla difficoltà o addirittura alla impossibilità di personalizzarlo ulteriormente.

Vediamo come si possa con pochi passaggi rendere Responsive un Modello Ufficiale di Blogger. Ricordo che il Responsive Design è una tecnica in grado di adattare automaticamente l'aspetto della pagina alla risoluzione e al tipo di dispositivo con cui viene visualizzato. Nel caso di Blogger quando diminuisce la risoluzione i contenuti della sidebar si visualizzeranno sotto l'area del post o sotto la home. Ho creato un blog di prova apposito con cui potete testare la funzionalità


 

COME CONVERTIRE IN RESPONSIVE I MODELLI SEMPLICE E FILIGRANA

 

   Passo 1) Si salva il template 

   Passo 2) Si va su Modello > Cellulare e si disattiva la versione per dispositivi mobili

   Passo 3) Si disattiva la Navbar andando su Layout > Navbar > Modifica > Disattivato
 
disattivare-navbar
   
Passo 4) Si fa in modo che le immagini del blog diventino Responsive. Si va quindi su Modello > Modifica HTML e si cerca il seguente codice

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

che va cancellato e sostituito con quest'altro

.post-body img, .post-body .tr-caption-container {
    padding: 0;
    width:auto;
    max-width:100%;
    height:auto;
    }
  
responsive-immagini-blogger

Passo 5) Si cerca ora sempre su Modello > Modifica HTML il codice predeterminato per il mobile

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

e si sostituisce con quest'altro 

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

come mostrato nello screenshot seguente

responsive-design-blogger
  
 Passo 6) Incolliamo subito sopra a </head> il codice per il Responsive Design
 
<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>
    codice-responsive-blogger
  
 Passo 7) Si salva il modello.

COME CONVERTIRE IN RESPONSIVE I MODELLI FANTASTICO S.p.A E ETEREO


Proseguiamo come sopra con il Passo 1), Passo 2) e Passo 3) mentre per il

   Passo 4) Cerchiamo questo codice

.post-body img {
....
}

Cancelliamo tutti i CSS che ci sono al posto dei puntini e sostituiamoli con questi altri

padding: 0;
width:auto;
max-width:100%;
height:auto;

Continuiamo come sopra per gli altri passaggi.

 

COME CONVERTIRE IN RESPONSIVE I MODELLI FINESTRA IMMAGINE E VIAGGI

 

Procediamo come per il Modello Semplice per i primi 3 Passi mentre per il

   Passo 4) cerchiamo la riga di codice  che inizia con
 
/* Posts

e subito sotto incolliamo questo nuovo CSS

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

Proseguiamo come sopra per tutti gli altri passaggi. Concludo osservando che se nella Demo scorrete la pagina visualizzerete alla fine i widget che nella visualizzazione desktop si vedono invece nella sidebar. In sostanza questo metodo serve a impedire che con una risoluzione più bassa si tagli una parte del sito che invece viene mostrata al di sotto dell'area principale del post

visualizzazione-redsponsive-blogger

Fonte | Amor Sevillista -




40 commenti :

  1. A me capita che da PC, facendo una ricerca su Google mi ritrovo indicizzati gli articoli della versione mobile del mio blog con ?m=1. E' un problema della versione mobile di Blogger? E se uso questi suggerimenti si risolve oppure è il solito caso raro e strano per cui non conviene fare nulla?

    RispondiElimina
    Risposte
    1. Google dovrebbe inserire i risultati desktop nelle ricerche da desktop e quelli mobili nei risultati da mobile. Tra l'altro ora c'è anche il tag mobile-friendly. Succede però che alcuni risultati finiscono nel posto sbagliato. È capitato pure a me. Non mi pare un grosso problema arrivano comunque sul blog. Se disabiliti la versione mobile è evidente che i risultati per il mobile non si vedranno più però questa procedura serve per altre cose come mostrare dei widget che riteniamo essenziali e che sono nella sidebar che nella versione mobile di default non si vedrebbero
      @#

      Elimina
  2. pensavo fosse più complicato; interessante.

    RispondiElimina
  3. Se vado su Modello > Cellulare, noto che la versione mobile non viene applicata se si accede da tablet di 7 pollici. Se disattivo la versione mobile e seguo i tuoi passaggi pensi che si risolve la questione o alla fine si ottiene lo stesso risultato?

    RispondiElimina
    Risposte
    1. Non te lo so proprio dire :)
      Prova a vedere che succede salvando il template
      @#

      Elimina
    2. alla fine il blog è diventato abbastanza incasinato da mobile, ad esempio il testo degli articoli risultava troppo accentrato.
      Però adesso mi chiedo: chi usa un tema classico di Blogger o altri scaricabili basati sullo stesso metodo, nonostante l'attivazione della versione mobile verrà escluso dalle ricerche da tablet?
      Sarebbero minimo l'11% di visite in meno per tutti, che ansia questa vigilia del 21 aprile :(

      Elimina
    3. Escluso no però ci potrebbe essere una penalizzazione
      @#

      Elimina
  4. Ciao Ernesto, avevo intenzione di procedere alle modifiche di un modello "Filigrana" secondo le tue indicazioni, ma mi sono accorto che i passaggi descritti vanno bene per il modello "Semplice" e non "Filigrana".
    Puoi spiegarmi meglio? Magari mi sfugge qualcosa. Grazie.

    RispondiElimina
    Risposte
    1. Non ho testato il modello Filigrana. Procedi in questo modo:
      a) Salva il template
      b) I passi da 1) a 3) sono gli srtessi
      c) Per il passo 4) cerca questa riga
      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      subito sotto
      incolla queste nuove righe
      width:auto;
      max-width:100%;
      height:auto;
      d) Segui il resto della procedura come negli altri casi
      @#

      Elimina
    2. Grazie. Ho notato però che, i widgets della colonna di sinistra vengono visualizzati anche su cellulare nella loro posizione naturale, mentre quelli di destra vengono sistemati sotto ai post (come avevi già detto prima); come mai?

      Elimina
    3. Perché vengono posizionati sotto solo i widget della sidebar di destra. A queste classi di stile
      .content-fauxcolumn-outer, .region-inner
      prova ad aggiungere quella della colonna di sinistra che però non so quale siano
      @#

      Elimina
  5. Funziona tutto tranne blog header che non si ristringe e quindi tutto il resto rimane più stretto guardando dal cellulare. E' possibile a cambiarlo?
    Grazie.

    RispondiElimina
    Risposte
    1. Ho capito il problema. Il fatto è che tutte le immagini si restringono ma non l'header perché la sua classe di stile non è compresa tra quelle del codice. Non è una cosa semplice. Cosa intendi per cambiarlo? l'immagine dell'header, certo che sipuò cambiare. È questo un post del tuo sito?
      http://karamode.blogspot.it/2015/01/knits-and-denim.html
      Potresti mettere una condizione di vedere l'header solo da desktop ma immagino che tu voglia mostrare la versione desktop anche da mobile. È una situazione complessa. Cerca di essere più analitica in quello che vorresti fare e cercherò di vedere se è possibile (senza impegno)
      @#

      Elimina
  6. Salve,
    forse sbaglio qualcosa ma a me sembra che questo codice generi una situazione ibrida tra modello responsive e ad url separati.

    La disabilitazione della versione mobile consente una visualizzazione stile desktop che si comporta in maniera responsive ma, a meno che l'utente non scelga esplicitamente la visualizzazione desktop, c'è un reindirizzamento automatico all'url con parametro ?m=1 , cosa che non dovrebbe accadere in un modello realmente responsive.

    Vorrei eliminare il parametro in modo da ottenere url univoci indipendentemente che l'accesso avvenga da desktop o mobile.

    Per caso si può risolvere il problema tentando di utilizzare uno dei modelli classici?

    Grazie.

    RispondiElimina
    Risposte
    1. Se su Modello > Cellulare > Ruota dentata hai messo NO non dovrebbe esserci il redirect con ?m=1. Se nel tuo blog succede non ne conosco la ragione. Si potrebbe fare il redirect di una singola pagina dalla versione mobile a quella desktop con questo sitema
      http://www.ideepercomputeredinternet.com/2012/03/come-fare-un-redirect-302-con-blogger.html
      ma ovviamente npon si può fare per tutti i post e poi potrebbe creare un loop. Dovresti assicurarti di aver disabilitato la versione mobile
      @#

      Elimina
  7. Grazie per la risposta ma anche su modelli ethereal originali e "puliti" la disabilitazione della versione mobile non evita il redirect ad url con parametro ?m=1.

    Mi sembra strano che accada solo a me, potresti gentilmente effettuare analoga verifica?

    Grazie.

    RispondiElimina
    Risposte
    1. Ho controllato. C'è il redirect con ?m=1 ma se si è disabilitato la versione per cellulare viene mostrata sempre quella per desktop anche cliccando sui link. Probabilmente il redirect è impostato in automatico quando si apre una pagina con un dispositivo mobile e però sempre in automatico si va vedere la versione per desktop. Non vedo quindi il problema
      http://i.imgur.com/ViswOrw.png
      @#

      Elimina
    2. Il problema è che in ottica seo, per tutta una serie di motivi, è google stesso ad indicare come preferibile una configurazione responsive ma quell'opzione non consente di ottenerla.

      https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/select-config?hl=it

      Aver avuto una conferma è già un aiuto ma sarebbe importante ottenere ulteriori informazioni in merito.

      Grazie.

      Elimina
  8. Salve, non c'è un modo per scalare i caratteri a seconda della dimensione dello schermo sul quale viene visualizzato il sito?
    Sul cellulare i titoli dei post e il titolo del blog sono - a dir poco - immensi!

    Grazie

    RispondiElimina
    Risposte
    1. Non è cosa semplice ma visto che potrebbe interessare anche altri salvo il tuo commento. Se poi trovo la chiave giusta ci faccio un post, seguimi nei prossimi giorni (senza impegno)
      @#

      Elimina
    2. Ti seguo certamente. Grazie mille!

      Elimina
    3. Il post che ti interessa l'ho già pubblicato oggi
      @#

      Elimina
    4. L'ho visto solo ora... lo leggerò con calma appena riesco. Grazie mille

      Elimina
  9. Questa è la procedura che cercavo da anni. Il problema è che non riesco a trovare questa riga (.post-body img, .post-body .tr-caption-container) e soprattutto, una volta riattivata la versione mobile, noto che mi si è spostata tutta in su.

    RispondiElimina
    Risposte
    1. Cerca soltanto .post-body img
      Le varie classi possono essere state aggregate in modo diverso a seconda dei vari template. .tr-caption-container è la didascalia sotto le foto. Quando si fa una modifica bisogna sempre salvare il template perché Blogger talvolta lo modifica in modo permanente anche se si torna indietro.

      Elimina
  10. Ciao Ernesto, ho provato questa procedura sul mio blog e mi sembra che funzioni abbastanza bene, se non fosse che le immagini caricate nel footer (bannerini e altre cose) invece non si adattano al modello: come potrei intervenire?
    Il blog è qualcosadirosso . com, se vuoi vedere come viene per capire meglio il problema. Di nuovo grazie

    RispondiElimina
    Risposte
    1. Se il problema riguarda le immagini che mantengono le stesse dimensioni prova a modificarle con questo sistema
      http://www.ideepercomputeredinternet.com/2015/09/responsive-images-blogger.html
      Ti avverto che è un lavoro impegnativo se le immagini sono molte
      @#

      Elimina
  11. Ciao Ernesto, io ho un problema con la visualizzazione dei post da mobile: strabordano dallo schermo. T_T
    Non ho idea di come porvi rimedio, hai qualche suggerimento? Il blog è: letturepericolose.blogspot

    RispondiElimina
    Risposte
    1. Tu hai le abitudine ti inserire le immagini con allineamento a destra. Forse è per questo che ti vanno fuori layout. Prova a inserirle centralmente e dovresti risolvere
      @#

      Elimina
  12. C'è una cosa che non capisco. Se rendiamo il nostro modello responsive non c'è più bisogno di attivare la versione per cellulari? Non sarà più mobile friendly?

    RispondiElimina
    Risposte
    1. No, non sarà più necessario anzi potrebbe essere controproducente attivare la versione per cellulari. Il modello responsive si adatterà automaticamente alla risoluzione del dispositivo con cui viene aperto
      @#

      Elimina
    2. E qual è la scelta migliore (se c'è)secondo te? Attivare la versione mobile o modificare il modello alla versione responsive?

      Elimina
    3. Non si può dire in assoluto. Io preferisco la versione mobile perché i modelli Responsive si devono scaricare da internet e come tutti i modelli non ufficiali sodo difficilmente personalizzabili
      @#

      Elimina
    4. (Buongiorno, io sono quella dalle domande impossibili).
      Ho provato a seguire la procedura. Io avevo implementato il read more automatico che suggeristi tu qualche tempo fa e nella versione mobile si sballa completamente. Mi domando: esiste un modo per tenere il read more automatico solo nella versione desktop? (Anche il menu è fuori limite ma per quello credo di poter ovviare seguendo l'articolo del manu responsive - correggimi se sbaglio)

      Elimina
    5. @# Sì. Non ho testato ma penso che funzionerà. Se ti riferisci a questo post
      http://www.ideepercomputeredinternet.com/2014/03/blogger-read-more-automatico.html
      Subito dopo alla riga
      <!-- Read More Automatico Inizio -->
      incolla questa riga
      <b:if cond='!data:blog.isMobile'>
      e prima della ultima riga
      <!-- Read More Automatico Fine -->
      incolla un'altra riga
      </b:if>

      Elimina
  13. In un modello Responsive come si fa a disattivare l'header nella vista da cellulari?

    RispondiElimina
    Risposte
    1. In un modello Responsive è difficile disattivarlo perché non esiste la versione mobile. Puoi mettere delle condizioni per non visualizzare l'header se la risoluzione del dispositivo è inferiore per esempio a 800 pixel. Leggi qui
      http://www.ideepercomputeredinternet.com/2015/11/media-query-mediascreen-risoluzione-blogger-wordpress.html
      L'ID del tuo header lo puoi ricavare andando su Layout
      http://www.ideepercomputeredinternet.com/2015/06/blgger-layout-section-widget.html
      @#

      Elimina
  14. ho fatto tutto, ma i widget a lato restano a lato (scusate il gioco di parole) e si sovrappongono via mobile

    RispondiElimina
    Risposte
    1. Dipende dall'ID delle sezioni del tuo template. Prima devi trovare gli ID della sidebar, leggi questo post
      http://www.ideepercomputeredinternet.com/2015/06/blgger-layout-section-widget.html
      poi devi sostituire gli ID presi in esame cioè .columns, .column-right-outer con quelli del tuo modello. Ti può aiutare anche il tool Analizza elemento
      http://www.ideepercomputeredinternet.com/2014/12/analizza-elemento-firefox.html
      @#

      Elimina

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.