Come migliorare ulteriormente la formattazione di altri elementi di testo all'interno dei post.

Per completare la cura tipografica del tuo blog Blogger e rendere ogni articolo estremamente curato, puoi stilizzare altri piccoli elementi testuali fondamentali che spesso passano in secondo piano: il codice in linea (<code>), i collegamenti ipertestuali (<a>) con animazioni al passaggio del mouse, e i separatori di sezione (<hr>).

1.Apri l'editor HTML del tema:Accesso al codice.

Accedi alla dashboard di Blogger, seleziona Tema, clicca sui tre puntini accanto a Personalizza e scegli Modifica HTML.

Verifica: L'editor del codice sorgente del blog risulta aperto.

2.Aggiungi gli stili per inline code, link e divisori:Codice CSS.

Individua il tag di chiusura ]]></b:skin> e inserisci subito prima questo blocco CSS avanzato, pienamente compatibile con la modalità scura:

CSS

/* 1. Codice in linea (inline code) all'interno dei paragrafi */
.post-body p code, .post-body li code {
  background-color: var(--card-bg, #f3f4f6);
  color: #db2777; /* Tonalità rosa/magenta elegante in stile editor di codice */
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'Fira Code', Consolas, monospace;
  border: 1px solid var(--border-color, #e5e7eb);
}

/* 2. Link nei post con sottolineatura animata al passaggio del mouse */
.post-body a {
  color: #2563eb;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s ease, color 0.2s ease;
}

.post-body a:hover {
  color: #1d4ed8;
  background-size: 100% 2px;
}

/* 3. Separatori di sezione (<hr>) stilizzati con decorazione centrale */
.post-body hr {
  border: none;
  height: 1px;
  background: var(--border-color, #e5e7eb);
  margin: 40px auto;
  width: 60%;
  position: relative;
}

.post-body hr::after {
  content: "✦ ✦ ✦";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-color, #ffffff);
  padding: 0 15px;
  color: var(--text-color, #9ca3af);
  font-size: 11px;
  letter-spacing: 6px;
}

Verifica: Il codice unisce tre micro-miglioramenti estetici che donano al blog un aspetto tipografico professionale e rifinito nei minimi dettagli.

3.Salva e verifica sul blog:Salvataggio e Test.

Clicca sull'icona del dischetto in basso a destra per salvare le modifiche e apri un articolo di prova.

Verifica: Noterai che le parole in codice nei paragrafi hanno un riquadro dedicato, i link mostrano una sottolineatura fluida quando ci passi sopra col cursore, e le linee divisorie presentano un elegante motivo decorativo centrale che si adatta automaticamente allo sfondo della modalità scura.