Come posso aggiungere un bordo o una cornice stilizzata attorno alle immagini del blog?

Per aggiungere un bordo o una cornice stilizzata (stile "fotografia" o passe-partout) attorno alle immagini dei post del tuo blog Blogger, puoi utilizzare il CSS sfruttando anche le variabili della modalità scura impostate in precedenza, così la cornice si adatterà automaticamente a qualsiasi tema.

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 e pronto per le modifiche.

2.Aggiungi lo stile per le immagini dei post:Codice CSS per la Cornice.

Individua il tag di chiusura ]]></b:skin> e inserisci subito prima il seguente blocco CSS. Questo codice crea una cornice elegante con spaziatura interna (passe-partout) e un'ombra delicata che si adatta anche alla modalità scura:

CSS

.post-body img {
  border: 4px solid var(--card-bg, #ffffff); /* Bordo che si adatta al colore delle card/sfondo */
  border-radius: 8px; /* Angoli arrotondati della cornice */
  padding: 4px; /* Spazio interno stile passe-partout */
  background-color: var(--card-bg, #ffffff); /* Sfondo della cornice */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* Ombra per dare tridimensionalità */
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
}

Verifica: Il blocco CSS viene inserito correttamente nel 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 per controllare il risultato.

Verifica: Tutte le immagini all'interno dei post mostrano ora una raffinata cornice stilizzata che si armonizza perfettamente con il design del blog.