1 dicembre 2009

35 commenti Condividi il post Facebook Twitter Google+

Come personalizzare i link del blog

Spesso voi lettori mi contattate via email o lasciando commenti nel blog con domande del tipo:

  • Come posso modificare il colore dei link? Nel mio blog sono blu e vorrei che fossero verdi.
  • Come posso modificare il carattere e la dimensione dei link del mio blog?
  • I link nel mio blog sono sottolineati. Come posso togliere la sottolineatura?
  • Cosa devo aggiungere al codice html per far visualizzare la manina al passaggio del mouse sui link?

Queste sono solo alcune delle domande che mi sono state poste.
Vediamo insieme come personalizzare i link e quale parte del css del blog modificare.

Come ho ripetuto più volte, i template non sono tutti uguali. Quindi quello che scrivo potrebbe non esserci nel vostro o essere diverso.

In generale in ogni template, il css per i link dovrebbe essere del tipo:

a {
proprietà dei link
}

a:hover {
proprietà dei link al passaggio del mouse
}

Questa parte di codice si riferisce allo stile dei link di tutto il blog in generale; potreste trovare anche lo stile per i link dei post, della sidebar, dell'header o di altre sezioni del blog. In questo caso il codice è del tipo:

per i link dei post:

.post a {...}
.post a:hover {...}

per i link della sidebar:

#sidebar-wrapper a {...}
#sidebar-wrapper a:hover {...}

per i link dell'header:

#header-wrapper a {...}
#header-wrapper a:hover {...}

Dopo questa premessa vediamo insieme alcune proprietà dei link.

Partiamo dal colore. Per impostare il colore dei link basta aggiungere nel codice a {...} la proprietà color: codice_colore;
Se vogliamo che il colore del link cambi al passaggio del mouse allora aggiungiamo in a:hover {...} la proprietà color ma con un codice colore differente.

Ecco alcuni esempi:


Link rosso che al passaggio del mouse diventa blu

Codice: a {color: #F71A1A;} a:hover {color: #4B58FF;}


Link giallo che al passaggio del mouse diventa verde

Codice: a {color: #E09B00;} a:hover {color: #00A212;}

Vediamo ora come cambiare la font-family, la dimensione del carattere e l'aspetto (grassetto o normale). Le proprietà sono:

font-family: nome_font;
font-size: dimensione_font;
font-weight: bold (per il grassetto) o normal;

Anche in questo caso se vogliamo che il link al passaggio del mouse assuma un aspetto diverso basta impostare nelle proprietà del link e in quelle del link al passaggio del mouse dei valori diversi di font-family, font-size e font-weight.

Ecco un esempio:


Al passaggio del mouse cambia font-family, font-size e font-weight

Codice:
a {font-family: Comic Sans MS; font-size: 15px; font-weight: normal;}
a:hover {font-family: Verdana; font-size: 12px; font-weight: bold;}

Possiamo anche impostare uno sfondo aggiungendo la proprietà background: codice_colore;

Ecco un esempio:


Al passaggio del mouse cambia il colore di sfondo

Codice:
a {color: #FFFFFF; background: #6FA2E5;}
a:hover {color: #6FA2E5; background: #FFFFFF;}

Possiamo inoltre impostare dei bordi aggiungendo la proprietà border.

La sintassi per i bordi è: border: spessore colore tipo;
dove spessore può essere 1px, 2px, ...
colore è il codice del colore
e tipo può essere solid, dashed, dotted, ridge, inset, outset, double oppure groove

Impostando la proprietà border avremo i bordi su tutti e quattro lati del link, se ne vogliamo solo uno basta impostare una delle seguenti proprietà:

border-top: dimensione colore tipo: in alto
border-bottom: dimensione colore tipo: in basso
border-left: dimensione colore tipo: a sinistra
border-right: dimensione colore tipo: a destra

Ecco alcuni esempi:


Al passaggio del mouse cambia il colore e il tipo del bordo

Codice:
a {border: 3px #F59BB2 ridge;}
a:hover {border: 3px #FA7900 double;}


Al passaggio del mouse cambia il tipo del bordo

Codice:
a {border-bottom: 1px #0D7E00 dotted;}
a:hover {border: 1px #0D7E00 dashed;}

Vediamo ora la proprietà text-decoration:

text-decoration: none;: link non sottolineati (Esempio)
text-decoration: underline;: link sottolineati (Esempio)
text-decoration: line-through;: link barrati (Esempio)
text-decoration: blink;: link lampeggianti (Esempio)

Quest'ultimo effetto non è visibile su tutti i browser, tra cui Internet Explorer e Chrome!

Infine vediamo come far apparire la manina o altri tipi di cursore aggiungendo la proprietà cursor (per vedere l'effetto passare sulla scritta Esempio):

cursor: pointer;: (Esempio: pointer)
cursor: progress;: (Esempio: progress)
cursor: crosshair;: (Esempio: crosshair)
cursor: help;: (Esempio: help)
cursor: move;: (Esempio: move)
cursor: text;: (Esempio: text)
cursor: wait;: (Esempio: wait)
cursor: e-resize;: (Esempio: e-resize)
cursor: n-resize;: (Esempio: n-resize)
cursor: ne-resize;: (Esempio: ne-resize)
cursor: nw-resize;: (Esempio: nw-resize)
cursor: s-resize;: (Esempio: s-resize)
cursor: se-resize;: (Esempio: se-resize)
cursor: sw-resize;: (Esempio: sw-resize)
cursor: w-resize;: (Esempio: w-resize)

Resto a disposizione per ogni dubbio o chiarimento.


Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

35 commenti

  1. Ciao iole....ieri sera ho provato a mettere l'opzione stampa post...ma dopo che salvavo il modello modificato...mi dava un codice di errore.come mai?

    RispondiElimina
  2. eh si ... quando generavo codici in html mi divertivo un casino nel provare i cambi ... nel blog invece ho fatto prima, ho inserito delle immagini e linkate :-)

    RispondiElimina
  3. Grazie mille! Veramente un'eccellente guida molto dettagliata! Complimenti!

    RispondiElimina
  4. Carissima Iole, a che punto sei?

    RispondiElimina
  5. Grazie Iole dei tuoi preziosissimi aiuti e consigli.
    Ciao Daniela.

    RispondiElimina
  6. In genere consiglio sempre di lasciare commenti inerenti al post in modo che le vostre domande e le mie risposte possono essere d'aiuto ad altri lettori con le stesse vostre difficoltà.
    Purtroppo spesso per qualsiasi difficoltà i commenti vengono lasciati sull'utlimo post di turno...

    @Alice4161: per l'opzione di stampa non so da cosa dipende l'errore non sapendo di che errore si tratta.
    Ho aiutato tantissimi lettori ad aggiungere la funzione di stampa in ogni tipo di template (perché non riuscivano da soli) e seguendo le istruzioni del mio post non ho avuto alcun errore.
    @Bruno: anche a te piace smanettare sul template del blog?
    @Den: ho scritto la guida in base alle numerose domande...
    @stella: ti riferisci al template??? Ho problemi con il pc, non so quando riuscirò a sistemarlo. Ci lavorerò appena possibile, impegni personali e di lavoro permettendo!
    @Daniela: prego! Per qualsiasi cosa, contattami pure.

    RispondiElimina
  7. ciao Iole...
    sei bravissima...troppo in gamba...
    Alessia mi ha dato il tuo link, ma ti "conosco" da tempo, grazie a Germana...
    comunque...
    Complimenti...

    RispondiElimina
  8. Ciao Iole,
    ti chiedo scusa se lascio qui il mio commento,ad un post tuo che parla di altro,ma è il solo modo che ho per avere il tuo aiuto.Della serie:Qualsiasi cosa...ma notami:))))
    Vengo al dunque.Ho scoperto il tuo bellissimo e utile blog grazie a quello di Tenebrae,che davvero rappresenta un valido aiuto per chi come me decide di aprire un blog.Sono venuta a sbirciare nel tuo blog ed ho scoperto altre dritte interessanti per modificare al meglio il blog.

    Così,senza recarti alcun disturbo,spero,desidero anche io chiederti un aiuto.Con i codici Html me la cavo molto bene,non mi perdo,con tutte le prove e straprove fatte,capirai:))Cioè:se leggo come modificare un punto del blog riesco al primo colpo,ma se dovessi farlo da sola non sarebbe possibile.Per questo ti chiedo:come aggiungere una foto in movimento o anche una scritta sull'header? O anche entrambe le cose? Il mio template e a tre colonne,Scribe per intenderci.C'è poi una cosa che mi da ai nervi,forse perchè sono troppo pignola:)))le colonne laterali!
    Destra e Sinistra.Posto per prova foto link o altro ma non riesco a incolonnarli in modo ordinato.Insomma credo hai capito bene:tutto deve combaciare:))

    Quando il blog sarà pubblico capirai il motivo di questa mia "pignolaggine" Tratterò un mio hobby che e anche la mia passione da sempre.La realizzazione e creazione di Case di Bambole:Dolsshouse e Roombox.Quindi preferisco con molta calma dare un aspetto allegro e pulito al mio blog.
    Scusa se mi sono dilungata,spero che nel frattempo tu non ti sia addormentata o che magari hai pensato di buttare dalla finestra il tuo "piccì" :))))))))))

    Grazie e scusami ancora.Aiuto o meno,comunque sia complimenti per il tuo blog così "positivo e allegro"

    Ciao e Buona Giornata.

    P.S. questo è il secondo post che ti scrivo,speriamo non mi dia errore...brutta bestia la fretta:))

    RispondiElimina
  9. @Vinnie e bestar: grazie per i complimenti!
    @catarinys: per aggiungere un'immagine animata nell'header ti basta caricare una gif dalla bacheca di Blogger cliccando sul link Modifica della sezione Intestazione.
    Per quanto riguarda le colonne laterali, sinceramente non ho ben capito quali problemi hai. Se il tuo blog ancora non è pubblico, non posso vedere cosa non va a meno che non mi aggiungi come lettore del blog (trovi la mia email nel menu sull'header).
    Per qualsiasi altra cosa contattami via email.

    RispondiElimina
  10. Ciao Iole,
    per quanto riguarda l'immagine Header del Blog so come si fa,ma se volessi mettere un immagine in movimento,purtroppo noto che mi resta statica.Oltre a questo,se volessi modificare il titolo del mio blog con uno Glitterato (tipo quello della Ciccer)anche lì ho delle difficoltà.Ho preso riferimento dal blog della Ciccer perchè mi piace come è strutturato,dato che anche il mio è a tre colonne.Spero questa volta di essermi spiegata bene.Appena riesco a renderlo pubblico ti metterò al corrente,ma adesso ti prego,fammi stare "da sola con i miei strafalcioni html" :))))
    Grazie per la tua Gentilezza.
    Buona Notte

    RispondiElimina
  11. Ciao iole! Sono tornato a curiosare con un pò più di tempo a disposizione... e più o meno ho trovato quello che cercavo.

    Ovvero:

    Inserire pop-up nel blogger... e fin li ci sono, ma non so come farlo mettendoci adsense. Si può?

    RispondiElimina
  12. @Catherines: se provi a caricare un'immagine animata e rimane fissa allora dovresti provare a modificare l'html del template; se non sai come fare mandami il tuo template via email e il link dell'immagine che vuoi utilizzare che ti aiuto volentieri.
    @Channel 360 News: mi dispiace ma su AdSense mi trovi impreparata.

    RispondiElimina
  13. Iole..
    c'è una piccola sorpesa da me..un pensierino!
    Un grande abbraccio!!!

    RispondiElimina
  14. Grazie Iole,domani ti mando tutto.Grazie per la tua disponibilità:))
    Buona Notte:))

    RispondiElimina
  15. ciao Iole! Questa tua ultima dritta è davvero carinissima!! Dovrò certamente studiare un modo per applicarla, prima o poi. Un abbraccio, ciao^^^

    RispondiElimina
  16. @Daniela: sei riuscita a fare cose ben più complicate di questa! ^_^

    RispondiElimina
  17. Ciao iole.
    Grazie per il tuo nuovo post...vado subito a sperimentare i tuoi suggerimenti sul mio blog, che finalmente ha il logo a posto!

    marta

    RispondiElimina
  18. Ciao Iole, è possibile modificare il codice del tamplete per cambiare lo stile dei link senza dover ripetere ogni volta la procedura?

    RispondiElimina
  19. @igc: sono contenta che siamo riuscite a risolvere il problemino del logo!
    @Alessio Angelico: con questa procedura imposti lo stile dei link nel template e non devi ripeterla ogni volta che inserisci un link. Basta aggiungere tutte le proprietà che vuoi in a {...} e a:hover {...} e tutti i link del blog avranno quelle caratteristiche.

    RispondiElimina
  20. Ma Iole, cosa mi combini!
    Hai sbagliato, c'è un erroraccio!
    Hai scritto "passaggo" invece di "passaggio" su quasi tutti i link di esempio!!!

    XD

    Non ti preoccupare, è una banalità, ma mi divertiva far finta di essere scandalizzata ;)
    Di solito sei così perfetta che finiamo per ignorare che sei umana anche tu ;)

    RispondiElimina
  21. @D-chan: grazie per la segnalazione! Correggo subito l'erroraccio!

    RispondiElimina
  22. Gentilissima Iole

    torno a disturbarti con nuovi interrogativi che spero possano interessare anche altri tuoi follower ^^. Con ordine:

    1) Nel menu che hai in alto, sui pulsanti, al passaggio del mouse appare il suggerimento corrispettivo (Esempio: Home - Torna all' Home Page). Come li hai inseriti?

    2) in un blog avevo trovato un suggerimento per aggiungere gli avatar ai commenti, ma come potrai notare, NON FUNZIONA!!! (satanismoveneto.blogspot.com) Eppure i codici dovrebbero essere corretti... no?

    3) Ehhm... Avendoti aggiunta tra i miei powered by potresti addarmi tra i blog che ti hanno linkata? ;P

    4)ultimissima domanda (XD). Quando clicco sui commenti di un post dalla home mi apre una finestra/scheda separata con tutto il post + i commenti. Onestamente preferirei che senza che venga aperta un' altra finestra, si "estendesse" il post mostrando i commenti nella stessa pagina... secondo te è fattibile?

    Grazie della disponibilità e dell' attenzione!!!

    Atane.

    RispondiElimina
  23. Ed io ti rispondo in ordine:

    1) per far apparire le descrizioni al passaggio del mouse come sulle icone del mio menu, leggi questo post: Script per visualizzare l'anteprima delle immagini nel blog

    2) nel mio blog ho inserito gli avatar nei commenti seguendo un post di dantearaujo. Prova a seguire tutte le istruzioni e fammi sapere.

    3) lo farò al più presto!

    4) io utilizzo (e consiglio) sempre la finestra popup di Blogger. Non mi piace né il modulo dei commenti incorporato sotto al post né la pagina dei commenti. Per quello che mi chiedi, molto probabilmente con qualche funzione javascript si possono visualizzare i commenti sotto al post. Ci lavorerò appena mi libero un po', le tue richieste sono sempre molto complesse ^_^

    RispondiElimina
  24. 1) OH! Ottimo! Non l' avevo visto prima! ^^

    2)Ho seguito il link, ho corretto, e ora va come dovrebbe andare!!! Grazie di cuore!

    3) Gentilissima come sempre!

    4)XD scusa! Allora seguirò il tuo consiglio che ritengo sicuramente valido!!!

    Esaustiva e precisa come sempre! Iole, complimenti e grazie di tutto!!!

    RispondiElimina
  25. Ciao Iole, avrei bisogno di un piccolo consiglio se puoi: Vorrei modificare i link sulla sidebar di destra del mio blog, e mettere come hai fatto te (essendo troppi) una scroll bar laterale.
    Ho guardato nel tuo post ma a parte l'aspetto dei link non ho trovato nulla su come inserire la scrollbar.
    Per favore mi puoi dare una mano?
    Grazie
    Jackina

    RispondiElimina
  26. @miriam schinello: trovi tutte le istruzioni per inseire una scrollbar in questo mio post:
    Come inserire un "box con barra di scroll" nel blog

    RispondiElimina
  27. Ti ringrazio: ho quasi risolto!

    RispondiElimina
  28. Ciao, dopo infinita ricerca trovo un post che è legato a un mio problema.
    Ho da poco clonato www.automotivespace.it e creato il nuovo www.automotivespace.it/news.
    Il problema sta nei link e nel loro coloro anche a livello dei widget.
    Apparentemente è tutto ok
    --a {text-decoration: none; color: #999; font-weight: bold; background: transparent;}
    --a:hover {text-decoration: underline; color: #666;}

    Ma in realtà ogni pagina/categoria ha una sua regola diversa e io invece vorrei tutto come il blog genitore, che è poi come il codice che vedi.
    A me interessa solo che tutti i link siano grigio chiaro e che diventino, cliccandoli grigio scuro, con esclusione di "Continua a leggere" che resti blu/blu scuro.
    Ci sto impazzendo da 10gg e anche usando firebug non ci riesco....mi puoi dare una dritta?
    Grazie

    RispondiElimina
  29. @Unknown: ho dato un'occhiata al codice html del tuo sito e ho visto che i link "Continua a leggere" hanno classe more-link, quindi il css che mi hai scritto va bene per tutti i link del sito mentre per i "Continua a leggere" devi aggiungere:

    a.more-link { qui devi scrivere le proprietà del link "Continua a leggere" (colore, font, ecc) }
    a.more-link:hover { proprietà del link "Continua a leggere" (colore, font, ecc) al passaggio del mouse }

    Spero di essere stata chiara!

    RispondiElimina
  30. Ciao c'è un modo per modificare il comportamento dei link in modo diverso nel blog. Tipo sottolineati nei post, non sottolineati nelle etichette e nel titolo dei post?
    So solo come renderli tutti sottolineati :/
    Bel blog :)

    RispondiElimina
  31. @Ayumi: per visualizzare i link sottolineati nei post e non sottolineati nelle etichette e nel titolo dei post devi modificare il codice css del template oppure puoi inserire questo codice in un gadget di tipo html/javascript della sidebar:
    <style>
    .post-body a { text-decoration: underline; }
    h3.post-title a { text-decoration: none; }
    #Label2 a { text-decoration: none; }
    </style>

    RispondiElimina
  32. Ciao Iole,
    trovo il tuo blog molto interessante e utile visto che ho appena incominciato il mio e con il tuo aiuto sto imparando un sacco di cose.... grazie mille

    RispondiElimina
  33. @krisstyn: sono contenta che il mio blog ti sia stato utile.
    Per qualsiasi cosa... chiedi pure e ti aiuto volentieri!

    RispondiElimina

Se volete sostenere il mio blog, visitate questi siti. Grazie!
Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy