Come posso personalizzare l'aspetto delle anteprime dei post nella home page di Blogger?

Per personalizzare l'aspetto delle anteprime dei post nella home page del tuo blog Blogger, puoi trasformarle in card moderne ed eleganti, dotate di bordi arrotondati, ombreggiature delicate, un effetto di zoom sull'immagine in evidenza al passaggio del mouse e la 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.Aggiungi lo stile per le anteprime:Codice CSS per le Card.

Individua il tag di chiusura ]]></b:skin> e inserisci subito prima questo blocco CSS. Questo codice si adatta alla struttura standard dei post in home page e sfrutta le variabili del tema per la modalità scura:

CSS

/* Stile generale delle card dei post nella Home Page */
.post-outer, .blog-posts .post {
  background-color: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

/* Effetto di sollevamento al passaggio del mouse sulla card */
.post-outer:hover, .blog-posts .post:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.08);
}

/* Contenitore dell'immagine di anteprima */
.post-image-link, .snippet-thumbnail {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* Mantiene proporzioni widescreen pulite */
  background-color: var(--border-color, #f3f4f6);
}

.post-image-link img, .snippet-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Zoom fluido dell'immagine quando si passa sopra la card */
.post-outer:hover img, .blog-posts .post:hover img {
  transform: scale(1.05);
}

/* Area del testo all'interno della card */
.post-header, .post-body, .snippet-container {
  padding: 20px 24px;
}

/* Titolo del post nell'anteprima */
.post-title h3 a, .entry-title a {
  color: var(--heading-color, #111827);
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-title h3 a:hover, .entry-title a:hover {
  color: #2563eb;
}

/* Testo dell'estratto (snippet) */
.post-snippet, .snippet-text {
  color: var(--text-color, #4b5563);
  font-size: 15px;
  line-height: 1.6;
  margin-top: 12px;
  margin-bottom: 16px;
}

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 ritorna alla pagina principale del tuo blog.

Verifica: I post in home page non appaiono più come semplici blocchi di testo separati da linee, ma come card indipendenti e rifinite, con effetti dinamici fluidi sia in modalità chiara che scura.