Guida alla Personalizzazione dell’Accordion in Blogger (Tema Anartisis)

Etichette troppo ingombranti nel tuo blog? Ecco la soluzione... con un tocco di stile! In questo articolo facciamo un po’ di chirurgia ...

Etichette troppo ingombranti nel tuo blog? Ecco la soluzione... con un tocco di stile!

In questo articolo facciamo un po’ di chirurgia estetica al tuo blog Blogger, più precisamente al widget Etichette, usando il tema Anartisis e un pizzico di Bootstrap 4.6. L’obiettivo? Trasformare l’elenco infinito delle etichette in un accordion elegante e ordinato. Un po’ come passare da una pila di vestiti sparsi sul letto a un armadio con cassetti ben chiusi.

Nota Bene 1. Puoi vedere l'esempio qui nel sito (versione desktop) a destra: vedi Etichette.

Perché un accordion può salvarti la sidebar

Quando le etichette iniziano a moltiplicarsi come i conigli, il tuo widget Etichette può diventare una colonna chilometrica che scoraggia la navigazione. L’accordion arriva in soccorso: clicchi, si apre. Clicchi di nuovo, si chiude. Facile, comodo e ordinato.

Passo 1: Ricerca del Widget nel Codice HTML

1. Accesso all’Editor del Tema

   Accedi al pannello di controllo di Blogger e vai su Tema > Personalizza > Modifica HTML.

2. Ricerca del Codice del Widget

   All’interno dell’Editor, clicca nell’area del codice e premi CTRL+F per attivare la funzione di Ricerca. Inserisci la parola chiave "Etichette". Mediamente nel tema potrebbero esserci 2 o 3 risultati. Ovviamente devi aver già attivato nel Layout il widget Etichette.

3. Individuazione del Widget

   Cerca la riga di codice simile a questa:

   <b:widget id='Label1' locked='false' title='Etichette' type='Label'>

   Nota: L’id (ad esempio Label1) potrebbe variare, quindi cerca sempre la stringa "Etichette".

4. Scorrimento del Codice

   Scorri il codice fino a trovare il blocco condizionale che gestisce la visualizzazione del titolo:

   <b:if cond='data:title != &quot;&quot;'>
     <h2><data:title/></h2> 
   </b:if>

Passo 2: Modifica del Codice del Widget

Seleziona il blocco individuato e sostituiscilo con il seguente codice:

<!-- Titolo del Widget -->
<b:if cond='data:title != &quot;&quot;'>
  <h2><data:title/></h2>
</b:if>

<!-- Testo Cliccabile per Espandere l'Accordion -->
<a aria-controls='collapseLabels1' aria-expanded='false' class='btn btn-link collapsed lp-spz' data-target='#collapseLabels1' data-toggle='collapse' href='#'>
  <span class='when-closed'>VEDI TUTTE LE ETICHETTE</span>
  <span class='when-open'>NASCONDI LE ETICHETTE</span>
</a>

<!-- Contenuto Collassabile dell'Accordion -->
<div class='collapse' id='collapseLabels1'>

Cosa fa questo codice?

Questo codice crea un bottone che cambia testo a seconda che il contenuto sia visibile o nascosto. Tipo prestigiatore con due cartelli. Vediamo meglio nello specifico.

• Sezione del Titolo:

  Il blocco condizionale mantiene il comportamento originale: se il titolo del widget non è vuoto, viene visualizzato all’interno di un tag <h2>.

• Testo Cliccabile per l'Accordion:

  L’elemento <a> agisce da pulsante. Grazie alle classi di Bootstrap (ad esempio btn btn-link collapsed), permette di espandere o collassare il contenuto. All’interno sono presenti due <span>:

  • when-closed: visualizza il testo "VEDI TUTTE LE ETICHETTE" quando il contenuto è nascosto.
  • when-open: visualizza il testo "NASCONDI LE ETICHETTE" quando il contenuto è visibile.
    
    
• Contenitore Collassabile:

  Il tag <div class='collapse' id='collapseLabels1'> apre il contenitore in cui verrà inserito il contenuto del widget, che potrà essere mostrato o nascosto tramite l’accordion.

Passo 3: Aggiunta del Tag di Chiusura del Div

Scorri il codice fino a individuare il tag </b:includable>. Prima di questo elemento, aggiungi il tag di chiusura:

</div>

Così chiudiamo per bene il contenitore che avevamo aperto. Chiudere i div è importante quasi quanto chiudere la porta del frigorifero: se dimentichi, qualcosa potrebbe andare storto. Quindi  questo tag completerà correttamente la struttura dell’accordion, chiudendo il contenitore aperto precedentemente (un po' come chiudere il frigorifero). 

Passo 4: Inserimento del CSS Personalizzato

Per garantire il corretto funzionamento dell’accordion e la gestione dinamica dei testi cliccabili, aggiungi il seguente CSS personalizzato.

Ricerca del Punto di Inserimento del CSS: All’inizio del tema, utilizza CTRL+F per cercare la stringa "/* Normalize". Prima di questo commento, incolla il seguente codice:

/* Per l'Accordion */
.lp-spz {margin-bottom: 20px;}
.btn-link .when-open {display: none;}
.btn-link .when-closed {display: inline;}
.btn-link:not(.collapsed) .when-open {display: inline;}
.btn-link:not(.collapsed) .when-closed {display: none;}

Spiegazione del CSS:

• .lp-spz {margin-bottom: 20px;}

  Aggiunge un margine inferiore al link per garantire una spaziatura adeguata e migliorare l’aspetto visivo.

• .btn-link .when-open e .btn-link .when-closed:

  Queste regole controllano la visualizzazione dei testi in base allo stato del pulsante:

  • Quando il pulsante è collassato (contenuto nascosto), viene mostrato "VEDI TUTTE LE ETICHETTE" (when-closed) e nascosto "NASCONDI LE ETICHETTE" (when-open).
  • Quando il pulsante non è collassato (contenuto visibile), la situazione si inverte.

Perché non abbiamo dovuto aggiungere codice JavaScript?

Se ti stai domandando come mai non abbiamo dovuto aggiungere codice JavaScript il motivo è perché il tema grafico Anartisis include (chiama) Bootstrap 4.6, il quale fornisce tutte le funzionalità JavaScript necessarie per l’implementazione dell’Accordion. Gli attributi come data-toggle="collapse" e data-target="#collapseLabels1" attivano automaticamente il plugin Collapse di Bootstrap, che gestisce l’apertura e la chiusura del contenuto in modo dinamico.

In sostanza, essendo le funzioni di Bootstrap già richiamate nel <head> del tema XML, il comportamento interattivo dell’accordion è garantito senza ulteriori modifiche o aggiunte di script personalizzati. Questo approccio semplifica la personalizzazione del tema, riducendo il rischio di conflitti e mantenendo il codice più pulito e manutenibile.

In conclusione: etichette domate e blog più elegante

Ecco cosa abbiamo fatto, in sintesi:

• individuato il blocco del widget Etichette
• sostituito il codice con una versione a fisarmonica (non suona, però si apre e chiude)
• chiuso il contenitore in modo corretto
• aggiunto un pizzico di CSS per farlo funzionare a dovere

Ora il tuo blog è più ordinato, moderno e anche un po’ più furbo. Le etichette sono tutte lì, pronte a essere mostrate solo quando serve. Come dire: ordine, bellezza e funzionalità ... tutto in un clic!