Come posso personalizzare l'aspetto grafico e i colori del menu a tendina con i CSS

Per personalizzare l'aspetto grafico e i colori del menu a tendina delle etichette in Blogger, puoi applicare regole CSS mirate utilizzando la classe .label-dropdown definita in precedenza.

1.Apri l'editor dei fogli di stile:Accesso al codice.

Dalla dashboard di Blogger, vai su Tema, clicca sui tre puntini accanto a Personalizza e seleziona Modifica HTML (oppure utilizza la sezione Aggiungi CSS se presente nel menu di personalizzazione grafica).

Verifica: L'editor del codice sorgente del tema risulta aperto e modificabile.

2.Inserisci il codice CSS:Applicazione stili.

Individua il tag di chiusura ]]></b:skin> all'interno del codice del tema e inserisci subito prima il seguente blocco racchiuso tra i tag <style>:

CSS

<style>
  .label-dropdown {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    color: #333333;
    background-color: #fdfdfd;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  .label-dropdown:hover {
    border-color: #9ca3af;
  }

  .label-dropdown:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  }
</style>

Verifica: Il blocco CSS viene aggiunto senza alterare la struttura del resto del template.

3.Salva le modifiche:Salvataggio.

Clicca sull'icona del dischetto in basso a destra per salvare il tema e visita il tuo blog per visualizzare il nuovo design del menu.

Verifica: Aggiornando la pagina pubblica del blog, il menu a tendina mostra i nuovi colori, bordi arrotondati ed effetti al passaggio del mouse o al click.