Come cambiare il colore del titolo del post.

In un blog di Blogger, se apriamo la homepage, i titoli dei singoli articoli avranno il colore che si è configurato per i link su Modello > Personalizza > Avanzato. Questo perché  in tutti è presente un collegamento per aprire il post. Quando quest'ultimo però viene visualizzato, in molti modelli ufficiali di Blogger, il titolo cambia di colore e diventa uguale a quello del testo degli articoli.

La ragione di questo comportamento risiede nel fatto che nel CSS che definisce il titolo del post spesso non ne viene indicato il colore. La classe di stile che determina l'aspetto del titolo dell'articolo è in genere unificata a quella dei commenti. Alla fine di ogni post c'è infatti una scritta X Commenti o Posta un commento che spesso ha lo stesso aspetto del titolo del post e del testo dell'articolo.

Se andiamo su Modello > Modifica HTML > Procedi e cerchiamo la riga h3.post-title che è quella che ci interessa, per esempio nel template Semplice troviamo questo codice

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

Come vedete oltre h3.post-title è inserita dopo la virgola anche la classe .comment h4 affinché Titolo del post e Numero dei commenti abbiano lo stesso aspetto. Come vedete sono definiti la famiglia dei font e i margini ma non il suo colore.  Possiamo selezionare un codice di colore che ci piace e inserire la relativa riga nel blocco di codice precedente in questo modo

h3.post-title, .comments h4 {
  color:#d84938;
  font: $(post.title.font);
  margin: .75em 0 0;
}

Il codice esadecimale nella riga colorata di rosso può naturalmente essere scelto a piacere. Dopo aver salvato il modello i titoli dei post assumeranno quel colore così come il numero dei commenti. Se volessimo avere due colori diversi per titolo e commenti, potremo per esempio sostituire il primo codice con due blocchi di questo genere

h3.post-title {
color:#d84938;
font: $(post.title.font);
margin: .75em 0 0;
}
.comments h4 {
color:#003366;
font: $(post.title.font);
margin: .75em 0 0;
}

dove le righe in rosso possono essere personalizzate a piacere.