Come posso personalizzare la colonna laterale (sidebar) o aggiungere un box autore moderno nel blog?

 

Per personalizzare la colonna laterale (sidebar) del tuo blog e trasformarla in elementi visivi coordinati con le card dei post, puoi agire su due fronti: stilizzare tutti i widget esistenti affinché sembri un blocco di design pulito e moderno, e creare un box autore dedicato da inserire facilmente tramite un gadget HTML.

1.Trasforma i widget della sidebar in card moderne:Codice CSS.

Accedi a Blogger, vai su Tema > Modifica HTML, individua il tag ]]></b:skin> e inserisci subito prima questo blocco CSS. Questo codice uniforma tutti i riquadri della barra laterale adattandoli automaticamente alla modalità scura:

CSS

/* Trasforma ogni widget della sidebar in una card coordinata */
.sidebar .widget, .blog-sidebar .widget {
  background-color: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  color: var(--text-color, #374151);
}

/* Stile dei titoli dei widget nella sidebar */
.sidebar .widget h2, .blog-sidebar .widget h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--heading-color, #111827);
  margin-top: 0;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-color, #f3f4f6);
}

/* Stili interni di base per liste ed elementi nei widget */
.sidebar .widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar .widget li {
  margin-bottom: 10px;
  font-size: 14px;
}

.sidebar .widget a {
  color: var(--text-color, #2563eb);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sidebar .widget a:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* Classi specifiche per il Box Autore Moderno */
.author-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border-color, #e5e7eb);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.author-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--heading-color, #111827);
  margin: 0;
}

.author-bio {
  font-size: 14px;
  color: var(--text-color, #4b5563);
  line-height: 1.5;
  margin: 0;
}

Verifica: Il foglio di stile si integra con le variabili del tema per la modalità scura. Salva le modifiche al tema cliccando sull'icona del dischetto.

2.Inserisci il gadget nel layout di Blogger:Aggiunta del Box Autore.

Ora puoi inserire un box autore personalizzato nella tua colonna laterale:

1. Vai su Layout nella dashboard di Blogger.

2. Nella sezione della colonna laterale (Sidebar), clicca su Aggiungi un gadget.

3. Scegli HTML/JavaScript.

4. Lascia vuoto il titolo e incolla questo codice nel campo dei contenuti (sostituendo l'immagine e i testi con i tuoi):

HTML

<div class="author-box">
  <img src="URL_DELLA_TUA_FOTO_PROFILO" alt="Nome Autore" class="author-avatar" />
  <h3 class="author-name">Il tuo Nome</h3>
  <p class="author-bio">Breve descrizione o biografia personale che spiega di cosa tratta il blog e la tua passione per la scrittura.</p>
</div>

1. Clicca su Salva.

   Verifica: Sposta il gadget nella posizione desiderata all'interno della sidebar e salva la disposizione della pagina.

3.Verifica il risultato sul blog:Test finale.

Apri la pagina principale del blog.

Verifica: Tutti i widget della sidebar appaiono incorniciati come card ordinate e il box autore si presenta con un cerchio fotografico pulito e una tipografia perfettamente allineata al design generale.