Pubblicato il 10/05/12 - aggiornato il  | 4 commenti :

Come personalizzare lo stile degli elenchi al passaggio del mouse

Come mostrare delle icone come marcatori negli elenchi dei post su Blogger che cambiano di aspetto al passaggio del cursore
Ho già trattato lo stile degli elenchi in conclusione di un articolo dedicato al widget degli Articoli più commentati. Oltre ai classici numeri e puntini pieni ci sono anche gli elenchi con puntini vuoti, con i quadratini, con i numeri romani, con le lettere greche minuscole e maiuscole. Se non si vuole mostrare nessuno stile negli elenchi di un widget, occorre usare il tag list-style:none; che elimina eventuali stili ereditati dal blog.

In questo articolo mi occuperò più diffusamente della introduzione negli elenchi di icone al posto di numeri, puntini o lettere. Il tag da usare in questo caso è

list-style-image: url(URL_IMMAGINE); 

dove dovrà naturalmente essere inserito l'indirizzo della immagine. Se si vuole visualizzare una icona nell'elenco di un particolare widget occorre andare su Modello > Modifica HTML > Procedi, cercare

]]></b:skin>

quindi, subito sopra, incollare un codice di questo tipo

#HTMLX li {
list-style-image: url(URL_IMMAGINE);
}

dove X e l'ID del widget così come illustrato per il gadget degli Ultimi Articoli. E' possibile cambiare l'icona che viene visualizzata durante il passaggio del mouse in questo modo

icona-passaggio-mouse

Il codice aggiuntivo da inserire, sempre sopra alla stessa riga, diventa in questo caso

#HTMLX li {
list-style-image: url(URL_IMMAGINE1);
}
#HTMLX li:hover {
list-style-image: url(URL_IMMAGINE2);
}

dove X è sempre l'ID del gadget e la seconda icona sarà visualizzata quando il link dell'elenco verrà puntato dal mouse.

Facciamo un ulteriore passo in avanti e vediamo come si possano personalizzare tutti gli elenchi degli articoli e non solo quelli di un singolo widget. Nei template di Blogger l'aspetto degli articoli viene determinato dalle classi .post, .post-body, .post-header, .post-footer, ecc.

Per personalizzare tutti gli elenchi presenti nei nostri articoli visualizzando una icona al posto dei numeri o dei puntini, bisogna andare su Modello > Modifica HTML > Procedi e, subito sopra la riga ]]></b:skin>, incollare un codice simile a questo

.post-body ul {
    list-style: none;
}
.post-body ul li {
    line-height: 1.2em;
    background: transparent  url(https://lh4.googleusercontent.com/-DLDS6wTN87Q/Tz0J1-9jYRI/AAAAAAAAWmA/nilLePZY2qs/s10/check.png) no-repeat scroll 0 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 18px;
}
.post-body ul li:hover {
    background: transparent url(https://lh3.googleusercontent.com/-A9zmBdgNiYc/T5-RPwNMwhI/AAAAAAAAX5c/1nv2SropIiQ/s14/red-check.png) no-repeat scroll 0 4px;
}

per ottenere un effetto di questo genere in tutti gli articoli del blog
elenco-personalizzato-blogger


con i link puntati dal mouse che mostreranno una icona diversa. L'attributo transparent serve per dare trasparenza alla icona e può anche essere anche tolto. Gli URL delle immagini sono puramente indicativi e possono essere rimpiazzati da altri di vostro gradimento.

I valori dei parametri in rosso possono essere modificati per allineare meglio l'icona al testo. Ricordo che line-height: 1.2em; determina l'altezza delle righe in funzione di quella dei caratteri. I due tag margin e padding invece determinano rispettivamente la distanze esterne e quelle interne a partire dalla direzione in alto e poi a seguire in senso orario.

Prima di aggiungere il codice controllate che nel codice del vostro Tema esista una classe CSS .post-body con la hotkey Ctrl + F che è quella che determina l'aspetto del contenuto del post.



4 commenti :

  1. ciao Ernesto, incollo questo ma non funziona, sai perché?
    .post ul {
    list-style: none;
    }
    .post ul li {
    line-height: 1.2em;
    background: transparent url(https://lh4.googleusercontent.com/-DLDS6wTN87Q/Tz0J1-9jYRI/AAAAAAAAWmA/nilLePZY2qs/s10/check.png) no-repeat scroll 0 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 18px;
    }
    .post ul li:hover {
    background: transparent url(https://lh3.googleusercontent.com/-A9zmBdgNiYc/T5-RPwNMwhI/AAAAAAAAX5c/1nv2SropIiQ/s14/red-check.png) no-repeat scroll 0 4px;
    }

    RispondiElimina
    Risposte
    1. Hai un profilo non disponibile. Come faccio a sapere perché non funziona il codice? Non ho capacità divinatorie 😊
      Posso solo fare l'ipotesi che nel tuo modello invece della classe .post ci sia la classe .post-body come è nei codici dei modelli più recenti. Il post in questione è del 2012 e da allora il codice di Blogger è cambiato.
      Prova a usare lo stesso codice sostituendo le tre occorrenze di .post con .post-body
      Prima magari vai su Tema -> Modifica HTML e controlla che effettivamente esista quella classe
      @#

      Elimina
    2. Ciao,scusa per il profilo non disponibile.
      Ho risolto inserendo (#HTMLX li {
      list-style-image: url(URL_IMMAGINE1);
      }
      #HTMLX li:hover {
      list-style-image: url(URL_IMMAGINE2);
      })
      Che ho trovato in un altra pagina del tuo blog, ho inserito l'ID del gadget e funziona bene 😃

      Elimina
    3. Dimenticavo ho lo stesso modello tuo

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy