Come aggiungere un titolo o un'intestazione in grassetto automatica all'interno dei box callout.

Per aggiungere un titolo o un'intestazione in grassetto all'interno dei box callout, puoi aggiornare il foglio di stile CSS per definire una struttura pulita e dedicata al titolo, mantenendo l'icona e l'allineamento perfetti.

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 la struttura per il titolo:Aggiornamento CSS.

Sostituisci il blocco CSS dei callout con questa versione aggiornata, che introduce un contenitore interno (.callout-body) e lo stile specifico per il titolo (.callout-title):

CSS

/* Stile base per i riquadri callout */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 0 8px 8px 0;
  border-left: 5px solid #2563eb;
  background-color: var(--card-bg, #f9fafb);
  color: var(--text-color, #374151);
  font-family: inherit;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Icona automatica in base alla tipologia */
.callout-info::before { content: "ℹ️"; }
.callout-warning::before { content: "⚠️"; }
.callout-success::before { content: ""; }
.callout-danger::before { content: ""; }

.callout::before {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
}

/* Contenitore interno per titolo e testo */
.callout-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

/* Stile dell'intestazione in grassetto */
.callout-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--heading-color, #111827);
}

.callout p {
  margin: 0;
  line-height: 1.6;
}

/* Varianti di colore */
.callout-info { border-left-color: #2563eb; background-color: rgba(37, 99, 235, 0.04); }
.callout-warning { border-left-color: #d97706; background-color: rgba(217, 119, 6, 0.04); }
.callout-success { border-left-color: #16a34a; background-color: rgba(22, 163, 74, 0.04); }
.callout-danger { border-left-color: #dc2626; background-color: rgba(220, 38, 38, 0.04); }

Verifica: Il codice CSS viene inserito correttamente senza errori di sintassi.

3.Come inserire il box con titolo negli articoli:Utilizzo nei post.

Quando scrivi un post, passa alla Vista HTML dell'editor di Blogger e utilizza questa struttura con la classe .callout-title per il titolo:

HTML

<div class="callout callout-warning">
  <div class="callout-body">
    <span class="callout-title">Attenzione ai dettagli</span>
    <p>Questo è il testo descrittivo inserito all'interno del riquadro di avviso.</p>
  </div>
</div>

Verifica: La struttura HTML permette di separare nettamente il titolo in grassetto dal corpo del testo sottostante.

4.Salva le modifiche al tema:Salvataggio.

Clicca sull'icona del dischetto in basso a destra per salvare il tema aggiornato.

Verifica: I box nei tuoi articoli mostreranno l'icona a sinistra, il titolo in evidenza e il testo formattato correttamente.