immagin top

17.5.13

Blog design: list-style, inseriamo un'immagine alla lista

17.5.13

Quando parlo di lista mi riferisco a quella che viene creata in automatico quando aggiungiamo il gadget delle etichette, oppure quella che creiamo noi in un determinato post.
Come questo:

Se andiamo a sbirciare nel codice noteremo che la lista è racchiusa fra i  tag  ul e li
<ul>
<li>primo</li>
</ul>
Se vogliamo, possiamo cambiare quei puntini che scandiscono la lista con immagini più carine, che possano rendere il nostro blog più carino ^_^ ... così
  • primo
  • secondo
  • terzo
Bastano pochi passi per fare queste modifiche.
Innanzitutto dobbiamo scegliere un'immagine che non sia molto grande, che affiancata al nostro testo non lo deformi troppo. Io utilizzerò questo mini pixel, che mi farà sembrare il testo nella lista 'spuntato' (per salvare l'immagine cliccateci sopra col tasto destro)

Entriamo in 'MODELLO' > 'MODIFICA HTML'
Cliccate come nella foto in basso per aprire gli stili del vostro blog.


Scorrete fino a passare oltre i codici che riguardano le variabili ed arrivate al punto come nell'immagine sotto.


Ora copiate e incollate questo codice:
ul {list-style: url(http://4.bp.blogspot.com/-Yz-KTOD8RRg/UKQKhsQiKaI/AAAAAAAADzk/m3h4u2NVBMU/s320/2guwow4.gif);}
Così facendo qualsiasi lista presente nel vostro blog avrà l'immagine che abbiamo inserito, A MENO CHE una lista in particolare (come ad esempio il menu in alto) non abbia già un suo stile ben definito.

Non abbiate paura se mentre scrivete il post non visualizzate l'immagine, controllate sempre nella preview e se dovessero esserci problemi scrivete un commento qui sotto.


35 commenti:

  1. Grazieee! Appena trovo un po' di tempo ci provo pure io,,,

    RispondiElimina
  2. santissima,,, Simona! ^_^
    finalmente, ho cercato per tutto il web, e stavo impazzendo per trovarlo! GRAZIE!
    francesca

    RispondiElimina
  3. Che bella chicca, grazie mille Simona ci provo e poi ti faccio sapere!
    p.s. che intendi quando dici: A MENO CHE una lista in particolare (come ad esempio il menu in alto) non abbia già un suo stile ben definito?
    Buon fine settimana
    Emanuela

    RispondiElimina
    Risposte
    1. Nel senso che questo stile non funzionerà nel caso in cui una lista, come quella del menu, abbia come stile predefinito l'annullamento di qualsiasi 'list-style'... nel codice infatti si troverà scritto 'list-style:none;' ovvero 'stile della lista nessuno'.

      Elimina
  4. Uh ma che bella questa cosa!!!
    Grazzissime!
    Appena invento la piccola immagine lo faccio anch'io!

    Mary

    RispondiElimina
    Risposte
    1. ahahahah m'immagino già gli occhietti del gufetto ^_^

      Elimina
  5. Risposte
    1. ma non so...me l'avrà suggerito un gufetto chiacchierone :P

      Elimina
  6. ci dai sempre un sacco di suggerimenti utilissimi.....peccato non aver un attimo per metterli in pratica! grazie molte

    RispondiElimina
  7. Innanzi tutto grazie per questo tutorial voglio però chiederti se questa nuova immagine sostituisce solo la lista con i pallini o anche la lista numerata?

    RispondiElimina
  8. solamente quella dei pallini, te lo dico perché l'ho già inserita...
    francesca

    RispondiElimina
    Risposte
    1. :D brava Franci!!! perdonatemi l'assenza, ma il monitor si è bruciato :(
      questa sostituisce solo la lista 'con i pallini' perchè quella con i numeri ha un tag diverso, ossia 'ol' anzichè 'ul'

      Elimina
  9. Ciao Simo,
    ho qualche problema con etsy, ti ho mandato una mail , l'hai ricevuta ?
    saluti
    Carla

    RispondiElimina
    Risposte
    1. Ciao Carla, ti ho inviato ora l'email...perdonami mi si è bruciato il monitor ed ora con quello nuovo ho difficoltà ad abituarmi ai colori... sono tutti troppo chiari :(

      Elimina
  10. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  11. Simona perdonami credo di aver fatto un pasticcio con i commenti!!!! Volevo ringraziare Francesca per la risposta alla mia domanda e siccome ho appena aggiunto delle forbicine alla mia lista grazie al tuo tutorial volevo ringraziarti immensamente con un grande abbraccio!!!!!

    RispondiElimina
    Risposte
    1. grazie a te Marella! ma sono carinissime le forbici!!! e lo sai che se tu avessi l'immagine di una forbicina chiusa, potresti 'animarla' al passaggio del mouse? :D

      Elimina
  12. Le hai viste allora!!!!! Ma per animarla occorre un'immagine che sia già animata? Grazie per le risposte e per tutta la tua disponibilità ad aiutarci!!!!!

    RispondiElimina
    Risposte
    1. sisi le ho viste! per animarla intendo che la forbice si chiuda al passaggio del mouse, come se tagliasse :D

      Elimina
  13. è veramente divertente io ho inserito le nuvolette come immagine.... ^_^
    francesca

    RispondiElimina
  14. :,( non mi compaiono, eppure non ho scelto una immagine troppo grande e penso di aver seguito tutti i punti. Sono un disastro XD

    RispondiElimina
    Risposte
    1. Ciao Federica! Non abbatterti ;)
      Mi mostri un link del tuo blog (che trovo molto carino :D) in cui posso vedere una lista?

      Elimina
    2. Ecco Simona (gentile come sempre <3) http://letturepericolose.blogspot.it/2014/03/battaglia-navale-per-il-compleanno-del.html

      Elimina
    3. Grazie ^_^
      Guarda siccome ho visto che non c'è il codice che ho inserito su nel tutorial, se tu mi dai il link all'immagine che vuoi inserire ti monto io il codice della lista ;)

      Elimina
    4. uh @_@ eppure ho seguito il tuto passo passo. Comunque grazie ancora Simo, il codice dell'immagine (l'ho caricata sul blog ;)) è questo: https://lh5.googleusercontent.com/Fw964M57Ng6YfEfQ_pu6MsRW5HOAZ0rbdtElTjdE0e4=w11-h8-no


      è possibile che, invece, non vada per via della url dell'immagine?

      Un baciotto

      F.

      Elimina
    5. allora il codice è questo, l'ho provato e funziona ;)
      ul {list-style: url(http://lh5.googleusercontent.com/Fw964M57Ng6YfEfQ_pu6MsRW5HOAZ0rbdtElTjdE0e4=w11-h8-no);}
      non so da cosa sia dipeso, ma l'importante è che si vede :D

      Elimina
    6. si è un po' deformato il codice,ma devi selezionare e copiare da 'ul' fino alla chiusura della parentesi :)

      Elimina
    7. Grazie!!! <3 ci provo subito :*

      Elimina
  15. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  16. Grazie Simona!
    Finalmente sono riuscita a sostituire gli orrendi puntini delle etichette. Ma avrei una domanda.
    Una mia amica mi ha chiesto di modificare quelli del suo blog ma non ci sono riuscita, probabilmente a causa del modello blogger applicato.
    Come posso aggirare il problema?
    Grazie infinite.
    Fabiola

    RispondiElimina
    Risposte
    1. Ciao Fabiola!
      Effettivamente può dipendere dal modello che ha attualmente sul suo blog, soprattutto se è uno di quelli scaricati su internet.
      Se riesci a darmi il link vedrò come è impostato il codice :)

      Elimina
    2. Ecco qua http://laportacolorlavandaa.blogspot.it/

      Elimina

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*