Come posso aggiungere un pulsante interattivo per chiudere o nascondere i box callout?

 

Per aggiungere un pulsante interattivo che permette ai lettori di chiudere o nascondere un box callout direttamente con un clic, puoi aggiornare il CSS del tema e inserire un piccolo pulsante all'interno del codice HTML del riquadro.

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 il pulsante di chiusura:Aggiornamento CSS.

Individua il blocco CSS dei callout inserito in precedenza e aggiungi le regole per il pulsante .callout-close:

CSS

/* Stile per il pulsante di chiusura del box */
.callout-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--text-color, #666666);
  opacity: 0.4;
  padding: 0;
  margin-left: auto; /* Spinge il pulsante all'estrema destra del flexbox */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.callout-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

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

3.Come inserire il box chiudibile negli articoli:Utilizzo nei post.

Quando scrivi o modifichi un post in Vista HTML su Blogger, puoi aggiungere il pulsante alla fine del blocco callout usando un evento JavaScript nativo (this.closest('.callout').style.display='none'):

HTML

<div class="callout callout-info">
  <div class="callout-body">
    <span class="callout-title">Nota informativa</span>
    <p>Questo è un messaggio che il lettore può chiudere cliccando sulla "X" a destra.</p>
  </div>
  <button class="callout-close" onclick="this.closest('.callout').style.display='none'" title="Chiudi">×</button>
</div>

Verifica: L'attributo onclick individua automaticamente il riquadro genitore (.callout) e lo nasconde all'istante quando viene premuto il pulsante.

4.Salva le modifiche al tema:Salvataggio e Test.

Clicca sull'icona del dischetto in basso a destra per salvare il tema aggiornato.

Verifica: Visualizzando un articolo di prova, i box dotati di questo codice mostreranno la "X" di chiusura e spariranno fluidamente al click del lettore.