Come posso creare dei riquadri di avviso o nota colorati (Callout boxes) per i post di Blogger?

Per creare dei riquadri di avviso o nota colorati (callout boxes) all'interno dei post di Blogger, puoi aggiungere alcune regole CSS nel template e poi richiamare i box direttamente dai tuoi articoli usando dei semplici tag HTML (<div>).

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.Inserisci gli stili e le varianti di colore:Codice CSS per i Callout.

Individua il tag di chiusura ]]></b:skin> e inserisci subito prima il seguente blocco CSS. Questo codice definisce la struttura base e quattro varianti di colore (Info, Avviso, Successo e Pericolo) compatibili anche con la modalità scura:

CSS

/* Stile base per i riquadri callout */
.callout {
  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);
}

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

/* Varianti per tipologia */
.callout-info {
  border-left-color: #2563eb; /* Blu */
  background-color: rgba(37, 99, 235, 0.04);
}

.callout-warning {
  border-left-color: #d97706; /* Arancione / Attenzione */
  background-color: rgba(217, 119, 6, 0.04);
}

.callout-success {
  border-left-color: #16a34a; /* Verde / Consiglio */
  background-color: rgba(22, 163, 74, 0.04);
}

.callout-danger {
  border-left-color: #dc2626; /* Rosso / Nota importante */
  background-color: rgba(220, 38, 38, 0.04);
}

Verifica: Il blocco CSS viene aggiunto correttamente all'interno del foglio di stile senza errori di sintassi.

3.Come inserire i box negli articoli:Utilizzo nei post.

Quando scrivi un post su Blogger, passa alla Vista HTML dell'editor e inserisci il testo racchiuso in un tag <div> con la classe desiderata:

HTML

<div class="callout callout-warning">
  <p><strong>Attenzione:</strong> Questo è un riquadro di avviso importante per i lettori.</p>
</div>

Verifica: Puoi usare le classi callout-info, callout-warning, callout-success o callout-danger a seconda del contesto.

4.Salva le modifiche al tema:Salvataggio.

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

Verifica: Pubblicando o visualizzando in anteprima un post con il codice HTML dei callout, i riquadri appariranno colorati e rifiniti correttamente.