Come posso stilizzare e organizzare il piè di pagina (footer) del blog?

 

Per stilizzare e organizzare il piè di pagina (footer) del tuo blog Blogger, puoi applicare un blocco CSS dedicato che si armonizza con le card, la sidebar e i pulsanti che hai già creato, garantendo 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.Inserisci lo stile personalizzato:Codice CSS per il Footer.

Individua il tag di chiusura ]]></b:skin> e inserisci subito prima questo blocco CSS. Questo codice si adatta alle sezioni standard del footer di Blogger e definisce un layout pulito, centrato e ordinato:

CSS

/* Stile moderno e pulito per il piè di pagina (Footer) */
.site-footer, #footer, .footer-container, .post-footer {
  background-color: var(--card-bg, #ffffff);
  color: var(--text-color, #4b5563);
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding: 40px 20px;
  margin-top: 60px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  width: 100%;
}

/* Struttura interna per allineare elementi e link */
.footer-content, .site-footer .widget {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* Testi e copyright nel footer */
.site-footer p, .site-footer span, .site-footer div {
  color: var(--text-color, #4b5563);
  margin: 0;
  line-height: 1.5;
}

/* Link rapidi o note legali nel footer */
.site-footer a {
  color: var(--text-color, #2563eb);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

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 scorri fino in fondo a una qualsiasi pagina del tuo blog.

Verifica: Il footer mostra ora una linea di demarcazione pulita, uno sfondo coerente con le card, margini spaziosi e una tipografia ordinata sia in modalità chiara che scura.