Come posso stilizzare i blocchi di citazione (blockquote) nei post di Blogger?

Per dare risalto alle frasi importanti, ai pensieri o alle citazioni all'interno dei tuoi articoli, puoi stilizzare i blocchi di citazione (blockquote) con un design moderno, caratterizzato da una barra laterale elegante e dalla piena compatibilità con la modalità scura.

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 lo stile personalizzato:Codice CSS per Blockquote.

Individua il tag di chiusura ]]></b:skin> e inserisci subito prima il seguente blocco CSS. Questo codice sfrutta le variabili del tema per adattarsi automaticamente sia alla modalità chiara che a quella scura:

CSS

/* Stile moderno per i blocchi di citazione */
.post-body blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  border-left: 4px solid #2563eb; /* Spessa barra colorata a sinistra */
  background-color: var(--card-bg, #f9fafb);
  color: var(--text-color, #4b5563);
  font-style: italic;
  border-radius: 0 8px 8px 0; /* Angoli arrotondati solo a destra */
  font-family: inherit;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Rimuove margini superflui dei paragrafi interni alla citazione */
.post-body blockquote p {
  margin: 0;
  line-height: 1.6;
}

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

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

Clicca sull'icona del dischetto in basso a destra per salvare le modifiche, quindi apri un articolo del tuo blog che contiene una citazione.

Verifica: I blocchi di citazione mostrano una barra laterale colorata, uno sfondo coordinato e un aspetto tipografico curato ed elegante.