Pubblicato il 23/09/15e aggiornato il

Come adattare i blog su Blogger a smartphone e tablet.

Come personalizzare alcuni elementi di un blog su Blogger quali il Nome del Blog, il Titolo del Post, il Testo dell'articolo, la data del post per adattarli alla visualizzazione con tablet e smartphone.
Nel precedente post abbiamo visto come si possa rendere Responsive un elemento di un sito quando se ne conosca il suo selettore univoco e si abbia la consapevolezza degli attributi che debbono essere adattati alle diverse risoluzioni.  Ricordo che il Disegno Responsive è quella tecnica per adattare il layout di una pagina web alla risoluzione del dispositivo con cui si è aperta. Si tratta di un tema molto importante anche dal punto di vista SEO visto che Google da Aprile sta penalizzando i siti non mobile-friendly.

Se si prova a implementare su Blogger la tecnica della media query che abbiamo visto nel precedente articolo avremo dei buoni risultati quando i selettori siano estranei a Blogger come potrebbe essere quelli di un menù, un widget o un altro elemento che non dipenda dal codice nativo di Blogger. Se però proviamo con i CSS media query a adattare le dimensioni per esempio del nome del blog non si noteranno cambiamenti nelle varie risoluzioni dei dispositivi. La ragione dipende dal fatto che Blogger ha già nel codice i tag per adattare i vari elementi del layout alla versione mobile.

La prima cosa da fare è andare su Modello > Cellulare e cliccare sulla ruota dentata. Va messa la spunta su Sì. Mostra il modello per cellulari nei dispositivi mobili. Per quello che riguarda il Modello per cellulari si sceglie Personalizza perché è l'unico che permette di modificare il codice di Blogger per quello che riguarda la sua versione mobile.

I selettori su cui intervenire vanno cercati direttamente nel template. Se si va su Modello > Modifica HTML in modello Semplice subito sotto a /* Mobile ci sarà un codice come questo

/* Mobile
----------------------------------------------- */
body.mobile  {  
   background-size: $(mobile.background.size);}
.mobile .body-fauxcolumn-outer {
  background: $(mobile.background.overlay);
}
.mobile .body-fauxcolumn-outer .cap-top {
  background-size: 100% auto;
}
.mobile .content-outer {
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}
body.mobile .AdSense {
  margin: 0 -$(content.shadow.spread);
}
.mobile .tabs-inner .widget ul {
  margin-left: 0;
  margin-right: 0;
}
.mobile .post {
margin: 0;
}
.mobile .main-inner .column-center-inner .section {
  margin: 0;
}
.mobile .header-outer {
}
.mobile .date-header span {
  padding: 0.1em 10px;
  margin: 0 -10px;
}
.mobile h3.post-title {
  margin: 0;
}
.mobile .blog-pager {
  background: transparent none no-repeat scroll top center;
}
.mobile .footer-outer {
  border-top: none;
}
.mobile .main-inner, .mobile .footer-inner { 
  background-color: $(content.background.color);}
.mobile-index-contents {
  color: $(body.text.color);}
.mobile-link-button {
  background-color: $(link.color);}
.mobile-link-button a:link, .mobile-link-button a:visited {
  color: $(mobile.button.color);}
.mobile .tabs-inner .section:first-child {
  border-top: none;
}
.mobile .tabs-inner .PageList .widget-content { 
  background-color: $(tabs.selected.background.color);
  color: $(tabs.selected.text.color);  border-top: $(tabs.border.width) solid $(tabs.border.color);  border-bottom: $(tabs.border.width) solid $(tabs.border.color);}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);
}

Si tratta del codice che determina l'aspetto del sito quando si apre con i dispositivi mobili. I tag che iniziano con il simbolo del dollaro $ prendono il loro valore dalla prima parte della sezione <b:skin> che inizia con /* Variable definitions . Per esempio i tag

background-size: $(mobile.background.size); e color: $(body.text.color);

che ne determinano il colore di sfondo e il colore del testo possono essere modificati andando appunto nelle Variable definitions cambiando il codice del colore su value.

codice-blogger

Va considerato che questi valori sono spesso comuni a quelli desktop quindi bisogna stare attenti alle modifiche ed è assolutamente necessario salvare il template prima di procedere. Molti di questi blocchi di CSS sono mancanti dei parametri. Faccio alcuni esempi di come si possa operare. Modificando alcuni blocchi di codice in questo modo

.mobile .post {
font-size:9px; /* Dimensione font del testo del post */
margin: 0;
}
.mobile .date-header span {
font-size:18px; /* Dimensione font della data */
padding: 0.1em 10px;
  margin: 0 -10px;
}
.mobile h3.post-title {
font-size:12px; /* Dimensione font del titolo post*/
margin: 0;
}

si potranno settare le dimensioni rispettivamente dei caratteri del testo dell'articolo, dei caratteri della data e dei caratteri del titolo del post. Sono state aggiunte le righe evidenziate di giallo.  La dimensione dei caratteri è uno degli aspetti più importanti ma ce ne possono essere altri. Possiamo anche modificare i colori aggiungendo oltre alle righe evidenziate anche i tag color:#f00;, color:#00f;. Il risultato dopo il salvataggio del template visto con Screenfly potrebbe essere così

modificare-caratteri

Volete intervenire anche nelle dimensioni dei caratteri del nome del blog? Non ho trovato il blocco di codice giusto ma si può ovviare incollando questo codice subito sopra al tag </head>

<b:if cond='data:blog.isMobile'>
<style>
#header-inner > div.titlewrapper > h1 {
font-size:18px;  
}
</style>
</b:if>

Il codice utilizza il selettore univoco colorato di viola  e, dopo aver salvato il template, modificherà l'aspetto del nome del blog con una dimensione più piccola dei caratteri.

dimensioni-nome-blog

Con l'altro selettore univoco #header-inner > div.descriptionwrapper > p si può intervenire anche per modificare la dimensione e il colore dei caratteri della descrizione.




17 commenti :

  1. Salve Ernesto, in alcuni dei miei blog ho, in home page, un solo post che in realtà è una slide di immagini. Naturalmente, nella versione per dispositivi mobili non viene visualizzato correttamente; chiedevo se si potesse, solo per la versione mobile, inserire una immagine singola e statica e come. Grazie.

    RispondiElimina
    Risposte
    1. Difficile. Fosse stato un widget potevi usare i tag condizionali per scegliere due cose diverse da mostrare da mobile e desktop ma per un post non mi viene in mente nulla di utile
      @#

      Elimina
    2. Grazie comunque... :)

      p.s. comunicazione di servizio: quando apro il suo sito, mi compare sempre la barra dei cookie, nonostante ho, più volte, premuto OK per il consenso (uso sempre lo stesso browser e consulto il sito spesso).

      Elimina
    3. Me lo hanno detto anche altri non conosco la ragione. Lo script è quello di Google :(
      @#

      Elimina
  2. Non è possibile cambiare il font (titolo, descrizione e post)?

    RispondiElimina
    Risposte
    1. Certamente. Oltre alle righe per la dimensione tipo
      font-size:18px;
      subito sotto o subito sopra a questa puoi incollare la riga
      font-family: Georgia;
      ovviamente con il nome del font che hai scelto
      @#

      Elimina
  3. Ciao Ernesto, mi puoi indicare per favore come modificare solo la dimensione dei caratteri del titolo nella versione mobile? Ho difficoltà . Grazie mille.

    RispondiElimina
    Risposte
    1. Il post è questo. Devi aprire il tuo modello e cercare i blocchi di codice giusti
      @#

      Elimina
  4. Ernesto scusami ho fatto come scritto sopra:
    vorrei ridurre la grandezza dei caratteri dei titoli dei post nella versione mobile di questo sito
    http://infoutili.blogspot.it/

    ho cercato la stringa .mobile h3.post-title {
    e subito sotto ho incollato la stringa font-size:12px; /* Dimensione font del titolo post*/
    che tu evidenzi in gialo, ma non cambia nulla salvando.
    Dove sbaglio?
    Grazie mille

    RispondiElimina
    Risposte
    1. Nel fatto che hai introdotto i tag h1 e h2. Prova a creare un nuovo CSS di questo genere
      .mobile h1.post-title { font-size:12px;}
      da incollare dopo la chiusura di una parentesi graffa ma non so se funzionerà
      @#

      Elimina
  5. Grazie lo stesso Ernesto,non funziona. Si ho introdotto i tag h2 come intestazione all'interno dei post ed i tag h1 nel titolo del post.
    hO copiato la stringa .mobile h1.post-title { font-size:12px;}
    nel template proprio sopra .mobile h3.post-title {
    ma non succede nulla.
    Proverò a cercare qualche soluzione alternativa.
    Grazie ancora.Ti stimo per quello che fai.

    RispondiElimina
  6. Ciao. C'è la possibilità di cambiare solo il font dei testi della versione mobile?
    Perchè sulla versione desktop ho un font mentre sulla versione mobile ne vedo un altro, che non mi piace. come posso fare?
    Grazie mille

    RispondiElimina
    Risposte
    1. Sì. Dovresti cercare questo blocco di codice

      .mobile .post {
      margin: 0;
      }

      o uno simile che cmq abbia la classe .mobile .post
      Prova a modificarlo in questo modo

      .mobile .post {
      font-family: Georgia !important;
      margin: 0;
      }

      dove al posto di Georgia metti una qualsiasi famiglia di font tra quelle supportate da Blogger
      @#

      Elimina
  7. Ciao! Scusa, ma c'è anche la possibilità di cambiare il colore del titolo del blog? Sulla versione mobile me lo dà nero quando nella versione web il colore è #a90033
    Grazie mille :)

    RispondiElimina
    Risposte
    1. @# Sì. Considera l'ultimo codice, quello che serve per cambiare le dimensioni dei caratteri del nome del blog. Puoi lasciare la riga
      font-size:18px;
      per le dimensioni dei caratteri oppure eliminarla e al suo posto o subito dopo o subito prima aggiungere quest'altra riga
      color:#a90033 !important;

      Elimina
  8. Ciao! Ho da poco modificato la larghezza delle immagini in modo che siano larghe quanto il post, ma nella versione mobile non ha funzionato. In più mi ha inserito parte del post accanto alle foto e parte al di sotto, spezzandolo. Come posso fare per rendere la versione mobile con le stesse caratteristiche di quella desktop? Grazie

    RispondiElimina
    Risposte
    1. La larghezza di tutte le immagini con questo sistema?
      http://www.ideepercomputeredinternet.com/2016/04/blogger-immagini-css.html
      In questo caso confermamelo qui sotto e ci farò un post che potrà servire anche ad altri
      @#

      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.