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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrBxBjAUdcFknxXACTlAgosDfIcZjO1ca6tKNv8F7yEfXWR-EGXYMNb_qOxhIueMY0ahBSaSvqGahk79cht83cTpmxeWVKSsoLVzHTkM3m3llhTRtgVws7YYQFazdqzLI7FL7dT6yBhjgQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwn_e1QKqMXB_SSXndJSaETb35kr3TnFE8IRmpm9LMe4Fp0z22HZxxnHTM_Lj15e5tQ3fAoZ620USfEKvjkzoT94jnEKA7n1if0FK1JdwC4KayUpifoTcE1ZVUkhUPnFT8EU49jc74fVA/s14/red-check.png) no-repeat scroll 0 4px;
}

per ottenere un effetto di questo genere in tutti gli articoli del blog

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.