Se hai bisogno per un articolo specifico di avere una lista con Numeri e punti e modificarla in base allo stile del tema ecc...
Se hai bisogno per un articolo specifico di avere una lista con Numeri e punti e modificarla in base allo stile del tema ecco un esempio e relativa spiegazione di come fare.
Passo 1: Aggiungi il link alla variabile font nel tuo <head>
Aggiungi il seguente link all'interno del tuo tag <head> nel file HTML per caricare le icone di Google Fonts, se lo aggiunti al tema grafico attenzione che la modifica sarà per tutto il sito.
Esempio codice
Esempio codice per Blogger
Se devi caricare le icone di Google Icons in Blogger puoi usare questo codice:
oppure verificare il codice da includere a questo indirizzo web: https://fonts.google.com/icons
Dove devi inserire questo codice?
Nel lato Admin > Tema > Personalizza (Pulsante arancione) > Modifica HTML > all'interno del tag <head>, io in genere lo metto alla prima della chiusura del tag </head>
Che differenza ha questo codice rispetto a quello sopra?
Se noti bene al posto degli doppi apici " bisogna usare l'apice singolo altrimenti il codice va in errore.
Passo 2: Definisci lo stile per l'icona nel tuo CSS
Aggiungi il seguente codice CSS per impostare le variabili delle icone:
Questo elemento lo puoi inserire nell'HTML della pagina singola senza attribuirlo a tutto il sito, oppure puoi aggiungerlo allo stile del tema se vuoi richiamarlo in più pagine.
Passo 3: Modifica il tuo CSS per le liste
Usa questo codice CSS per aggiungere l'icona come pseudo-elemento
::before
questo esempio di codice è se vuoi includere questo stile solo in un singolo post di Blogger.
Passo 4: Aggiorna il tuo HTML
Assicurati che la struttura HTML della tua lista sia corretta. Ecco un esempio di come dovrebbe essere.
Passo 5: Verifica l'integrazione.
Ora puoi visualizzare la tua pagina e vedere l'icona arrow_right applicata agli elementi di secondo livello della tua lista.
Se tutto è stato configurato correttamente, le tue sotto-liste dovrebbero mostrare l'icona arrow_right invece dell'immagine originale.
Se hai bisogno di ulteriori personalizzazioni, puoi aggiungere altre proprietà CSS al pseudo-elemento ::before per adattarlo al tuo design.
Esempio applicazione di Lista con numeri e punti modificata in CSS
-
Testo numerato:
- testo con rientro.
-
Secondo testo numerato:
- Cosa accade se il testo è più lungo è va a capo? Vediamolo in questo esempio inserendo del testo aggiuntivo. Gestendo i parametri a padding-left e text-indent è possibile allineare il testo a piacere.
-
Terzo testo numerato:
- testo con rientro.
-
Quarto testo numerato:
- facciamo un esempio con due sotto punti elenco questo è il primo;
- questo è il secondo.
Nessun commento