Come creare elenchi personalizzati in un post di Blogger o Wordpress.

Come creare degli elenchi personalizzati usando HTML e CSS usando come marcatori numeri, lettere latine,romane e greche, simboli e immagini

Negli Editor WYSIWYG che vengono solitamente utilizzati per creare del testo formattato da inserire in una pagina web solitamente sono presenti solo i pulsanti per inserire gli elenchi numerati e quelli puntati. Questo vale non solo per l'Editor di Blogger ma anche per quello di Wordpress e pure per Open Live Writer.

Le molte altre tipologie di elenchi non vengono prese in considerazione. In questo post vedremo di fare chiarezza e di dare molte utili informazioni per creare elenchi personalizzati con lettere latine, lettere greche e anche con immagini come marcatori.

I tag HTML che vengono usati per gli elenchi sono <ol> per quelli numerati e <ul> per quelli puntati insieme alle loro chiusure </ol> e </ul> e ai tag dei singoli elementi che in entrambi i casi sono <li> e </li>. In sostanza se voi cliccate sul pulsante dell'elenco puntato nell'Editor di Blogger o in altro Editor per poi aggiungere i singoli elementi se poi andate in Modalità HTML visualizzerete un codice di questo genere

<ul>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
</ul>

mentre se invece cliccate sul pulsante dell'Elenco numerato il codice che visualizzate sarà il seguente

<ol>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
</ol>

dove il numero degli elementi ciascuno dei quali compreso tra <li> e </li> è indefinito. Potete fare la prova anche con lo strumento Real Time Editor che consente di visualizzare quello che appare in una pagina web quando si inserisce un determinato codice

ELENCHI CON STILE DIVERSO

Si può aggiungere uno stile diverso semplicemente aggiungendolo al primo tag. Cominciamo con due esempi pratici per mostrare un elenco con lettere latine e uno con lettere greche. Si parte da un elenco numerato come il precedente ma si può partire anche da uno puntato.

Al primo tag <ol> si aggiunge questa stringa style="list-style:lower-greek;" per le lettere greche minuscole e quest'altra stringa style="list-style:lower-alpha;"  per le lettere latine minuscole in questo modo

Oltre alle lettere latine minuscole e greche minuscole possono essere creati molti altri stili di elenchi. L'attributo da modificare è quello colorato di rosso (lower-greek o lower-alpha) secondo queste regole

1. disc: un cerchietto pieno
   
2. circle: un cerchietto vuoto
   
3. square: un quadratino
   
4. decimal: sistema decimale 1, 2, 3, ...
   
5. decimal-leading-zero: sistema decimale ma con due cifre: 01, 02, 03, ...
   
6. lower-roman: cifre romane in minuscolo. i, ii, iii, iv, ...
   
7. upper-roman: cifre romane in maiuscolo. I, II, III, IV, ...
   
8. lower-alpha: lettere minuscole. a, b, c, ...
   
9. upper-alpha: lettere maiuscole. A, B, C, ...
   
10. lower-greek: lettere greche

Ecco qualche esempio di screenshot presi con Real Time Editor

ELENCHI NIDIFICATI

Nei menù multilivello vengono spesso usati degli elenchi nidificati. Si utilizza questo sistema quando un elemento a sua volta contiene un elenco di altri elementi. Facciamo un esempio e partiamo da un classico elenco numerato con questo codice

<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
 </ol>

Poniamo che l'Elemento 2 e l'Elemento 4 siano a loro volta formati da degli elenchi. Questa situazione la si potrebbe trovare in un indice dove i capitoli solo a loro volta suddivisi in sezioni. Il sistema è quello di aggiungere un nuovo elenco prima del tag di chiusura </li> dell'elemento in questione. Questo codice

<ol>
 <li>Elemento 1</li>
<li>Elemento 2
<ol style="list-style:lower-alpha;">
 <li>Elemento 2.1</li>
 <li>Elemento 2.2</li>
</ol> </li>
<li>Elemento 3</li>
<li>Elemento 4
 <ol style="list-style:lower-alpha;">
 <li>Elemento 4.1</li>
<li>Elemento 2.2</li>
 </ol> </li>
 <li>Elemento 5</li>
 </ol>

produce questo risultato

Per i due elenchi nidificati è stato usato uno stile diverso anche per rendere le cose più chiare. I due elenchi nidificati sono stati evidenziati di verde e di giallo per mostrare meglio la posizione di inserimento.

COME CREARE UN ELENCO SU DUE O TRE COLONNE

Quando vogliamo mostrare un elenco su due colonne si può usare il codice di una tabella di una riga e due colonne o una riga e tre colonne come per esempio questo

<table>
 <tbody>
 <tr>
<td>E1</td>
<td>E2</td>
 <td>E3</td>
</tr>
 </tbody>
 </table>

Al posto rispettivamente di E1, E2 e E3 possiamo incollare un elenco in modo da avere questo risultato

Per far iniziare la seconda e la terza colonna dal numero voluto basterà aggiungere start="6" al secondo tag <ol> e start="11" al terzo tag <ol>.

COME PERSONALIZZARE I COLORI DI UN ELENCO

Per impostare dei colori diversi da quelli ereditati dal sito occorre creare una classe. Con questo codice

<style> .elenco { background:#000; /* Colore di sfondo */}
 .elenco ol li a { color:#f00;  /* Colore del link */}
 .elenco ol li a:visited {
 color:#00f; /* Colore del link visitato */}
 .elenco ol li a:hover {
 color:#0f0; /* Colore del link al passaggio del mouse */}
 </style>
 <div class="elenco">
 <ol>
 <li><a href="#">Elemento 1</a></li>
 <li><a href="#">Elemento 2</a></li>
<li><a href="#">Elemento 3</a></li>
<li><a href="#">Elemento 4</a></li>
<li><a href="#">Elemento 5</a></li>
 </ol>

si ottiene questo risultato

COME USARE UNA IMMAGINE COME MARCATORE

Al posto dei numeri, delle lettere latine e greche si possono usare come marcatori delle immagini. Le icone dovranno essere prima pubblicate online in modo da averne il link diretto. Si può usare uno dei 4 metodi illustrati per Google Foto oppure inserire le immagini in un post retrodatato.  Il codice da usare è

<ol style="list-style-image: url(URL_ICONA);">
 <li>Primo elemento.</li>
<li>Secondo elemento.</li>
 <li>Terzo elemento.</li>
 <li>Quarto elemento.</li>
<li>Quinto elemento.</li>
</ol>

dove al posto di URL_ICONA si incolla il link diretto del marcatore dell'elenco. Il risultato è il seguente

ELENCO SENZA MARCATORI

Per un elenco senza marcatori si usa questo codice

<ol style="list-style:none;">
 <li>Primo elemento.</li>
<li>Secondo elemento.</li>
<li>Terzo elemento.</li>
 <li>Quarto elemento.</li>
 <li>Quinto elemento.</li>
</ol>

che porta a questo risultato:

ELENCHI PERSONALIZZATI PARTICOLARI

Con un opportuno codice si possono creare degli elenchi particolari. Per esempio con questo codice

<style type='text/css'>
 .elenco ol{   counter-reset:li;   margin-left:0;   padding-left:0 } .elenco ol li{   position:relative;       margin:0 0 20px 2em !important;   padding:4px 8px !important;   list-style:none;   *list-style: decimal; } .elenco ol li:before{   content:counter(li);   counter-increment:li;   position:absolute;   top:-8px;   left:-39px;   font-family:Trebuchet; /* Famiglia di Font */   font-size:40px; /* Dimensione dei numeri */   width:34px;   margin:0 0 10px 0;   padding:4px !important;   color:#191919; /* Colore dei numeri */   text-align:center; }
 </style>
 <div class="elenco">
 <ol>
 <li>Primo elemento.</li>
 <li>Secondo elemento.</li>
 <li>Terzo elemento.</li>
 <li>Quarto elemento.</li>
 <li>Quinto elemento</li>
 </ol>
 </div>

si ottiene questo risultato

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus ultricies urna, quis commodo odio viverra non. Quisque sit amet lectus justo.
2. Duis sit amet lectus arcu. Aenean eu arcu nibh. Sed massa dui, luctus eget sollicitudin non, porta id leo. Fusce pharetra, ante eu rutrum lacinia, sem justo sodales justo, at pellentesque lectus erat non arcu. Praesent feugiat nibh vel tellus molestie quis ullamcorper erat eleifend.
3. Etiam luctus metus id dolor vehicula eget mollis quam tristique. Sed elementum scelerisque turpis et mollis. Quisque auctor, lorem a venenatis ultrices, mi risus condimentum mi, quis iaculis mi nisl eu felis.
4. Morbi ligula nisl, lobortis at dapibus sit amet, ultricies vel metus. Proin hendrerit luctus tempus. Aenean fermentum, elit at auctor faucibus, velit magna convallis tortor, in mattis massa magna at risus.
5. Suspendisse nunc odio, semper eget mattis eget, sagittis sit amet arcu. Ut sed lorem nibh. Quisque euismod, erat sed condimentum euismod, erat ipsum ullamcorper sem, eu pharetra ligula lorem sit amet tortor. Mauris et mauris id lectus venenatis luctus.

Mentre con quest'altro codice

<style type='text/css'>
 .elenco1 ol{ counter-reset:li; margin-left:0; padding-left:0 }
 .elenco1 ol li{ position:relative;     margin:0 0 13px 2em !important; padding:4px 8px !important; list-style:none; *list-style:decimal; } .elenco1 ol li:before{ content:counter(li); counter-increment:li; position:absolute; top:0; left:-2em; width:27px; margin-right:8px; padding:3px 1px 4px 0 !important; color:#ffffff; /* Colore dei numeri */ font-size:16px; /* Dimensione dei numeri */ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsFYl75pMpwmIvv8KdOON-NwTcFw-95eXkIL_zSfR-MdCHJX_fji5lbkJHtng7gmgVJvX86ALHtkD3thi_id983kiZCPyzn1r2fDS2hjKavP59kesBDn3DLuP6xz2iY_mgDvN9o1G0M4I/s28/cerchio.png) no-repeat left top; /* Immagine di sfondo */ font-weight:bold; text-align:center }
 </style>
 <div class="elenco1">
 <ol>
 <li>Primo elemento.</li>
 <li>Secondo elemento.</li>
 <li>Terzo elemento.</li>
 <li>Quarto elemento.</li>
 <li>Quinto elemento.</li>
 </ol>
 </div>

si ottiene questo ultimo risultato

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus ultricies urna, quis commodo odio viverra non. Quisque sit amet lectus justo.
2. Duis sit amet lectus arcu. Aenean eu arcu nibh. Sed massa dui, luctus eget sollicitudin non, porta id leo. Fusce pharetra, ante eu rutrum lacinia, sem justo sodales justo, at pellentesque lectus erat non arcu. Praesent feugiat nibh vel tellus molestie quis ullamcorper erat eleifend.
3. Etiam luctus metus id dolor vehicula eget mollis quam tristique. Sed elementum scelerisque turpis et mollis. Quisque auctor, lorem a venenatis ultrices, mi risus condimentum mi, quis iaculis mi nisl eu felis.
4. Morbi ligula nisl, lobortis at dapibus sit amet, ultricies vel metus. Proin hendrerit luctus tempus. Aenean fermentum, elit at auctor faucibus, velit magna convallis tortor, in mattis massa magna at risus.
5. Suspendisse nunc odio, semper eget mattis eget, sagittis sit amet arcu. Ut sed lorem nibh. Quisque euismod, erat sed condimentum euismod, erat ipsum ullamcorper sem, eu pharetra ligula lorem sit amet tortor. Mauris et mauris id lectus venenatis luctus.

In entrambi i codici si possono personalizzare i codici dei colori, dimensioni, font e immagine di sfondo. Questi elenchi personalizzati potrebbero essere utilizzati per presentare liste di ingredienti di ricette, elenchi di regole, schede tecniche, bibliografie e altro ancora.