Pubblicato il 10/05/12e aggiornato il

Come personalizzare lo stile degli elenchi al passaggio del mouse.

Inserire delle icone negli elenchi dei post su Blogger che cambiano al passaggio del mouse.
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 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;
}

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.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.