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.

Newsletter by follow.it

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