Pubblicato il 01/10/15e aggiornato il

Personalizzare le Intestazioni dentro il post nella versione mobile di Blogger.

Come personalizzare le Intestazioni dentro l'articolo nella versione mobile dei blog su Blogger.
Riprendo brevemente il tema che ho affrontato nel post precedente riguardo alla Personalizzazione delle Intestazioni inserite all'interno dell'articolo. Come ho già evidenziato le Intestazioni che si inseriscono tramite l'Editor di Blogger spesso non hanno un aspetto coerente con il loro nome.

Capita infatti che l'Intestazione Principale abbia dei caratteri più piccoli di quella Secondaria e Minore. Le Intestazioni native di Blogger vengono inserite tramite i tag <h2>, <h3> e <h4> considerato che <h1> è il tag del titolo del post. Questi tag però sono presenti nel template e servono anche per altri elementi del blog quali la data del post (h2), il titolo dei widget (h2), l'inizio della sezione commenti (h3) e la scritta Posta un commento (h4).

Anche nella versione mobile se si è scelto Personalizza su Modello > Cellulare > Ruota dentata avremo delle Intestazioni native non in linea con le aspettative di una chiara gerarchia

intestazioni-mobile

Questi elementi vengono configurati dall'amministratore del blog tramite il Designer Modelli  che si apre andando su Modello > Personalizza. Quindi per avere delle Intestazioni svincolate da altre regole CSS dovremo usare gli altri tag disponibili che sono <h5> e <h6>.

Per risolvere la questione dovremo incollare questo CSS sopra alla riga ]]></b:skin>

h5 {
font-size:22px;
color:#f00;
font-weight:bold;
text-transform: uppercase;
}
h6 {
font-size:18px;
color:#00f;
font-weight:bold;
}

dove personalizzare a piacere i codici dei colori e le dimensioni dei font. Per inserire l'Intestazione principale e quella secondaria dovremo quindi andare nell'Editor su HTML e digitare

<h5>INTESTAZIONE PRINCIPALE</h5>
<h6>Intestazione Secondaria</h6>

Se dopo la pubblicazione si apre il post con un cellulare, con un tablet o con uno strumento tipo Screenfly si visualizzerà una casa del genere

intestazioni-mobile[4]

Ci potrebbe però essere l'esigenza di configurare diversamente le Intestazioni su mobile e su desktop. In questo caso si deve ricorrere ai tag condizionali specifici per mobile e desktop. Ecco un esempio di codice che può essere incollato subito sopra alla riga</head> e che riduce di un pixel le dimensioni dei caratteri nella versione mobile oltre che invertire i colori per maggiore chiarezza

<b:if cond='data:blog.isMobile'>
<!-- Regola Intestazioni Mobile -->
<style>
      h5 {
font-size:21px;
color:#00f;
font-weight:bold;
text-transform: uppercase;
}
h6 {
font-size:17px;
color:#f00;
font-weight:bold;
}
</style>
  <b:else/>
<!-- Regola Intestazione Desktop -->
<style>
      h5 {
font-size:22px;
color:#f00;
font-weight:bold;
text-transform: uppercase;
}
h6 {
font-size:18px;
color:#00f;
font-weight:bold;
}
</style>
    </b:if>
intestazioni-blogger
I due screenshot precedenti mostrano come si possa personalizzare in modo diverso le intestazioni su desktop e mobile in cui si sono alternati i colori per rendere la cosa più evidente.




3 commenti :

  1. Ciao Ernesto! Una domanda: siccome non veniva visualizzata bene il menu con le pagine a tendina sotto header l'ho messa aggiungendo un gadget html sopra. Adesso mi sono accorta che nella versione mobile è troppo grossa mi chiedevo come intervenire per renderlo più piccolo e esteticamente meglio. Devo aggiungere al css o modificare qualcosa nella sezione html del codice? Grazie

    RispondiElimina
    Risposte
    1. Per la versione mobile è meglio che usi un diverso menù, segui questo post
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.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.