Come personalizzare l'aspetto dei link su Blogger tramite le pseudo-classi con selettori.

In tutti i modelli di Blogger c'è una classe che sovrintende all'aspetto dei link che si vedono nei post o nei widget. Più che di classe si dovrebbe parlare di pseudo-classe visto che non definisce un elemento ma un suo stato particolare. Per esempio la pseudo classe

a:link {color: #004488;}

inserisce la regola che i link non ancora visitati abbiano quel particolare colore. Un'altra pseudo classe sicuramente presente potrà essere così

a:visited {color: #800080;}

in cui la regola impone il colore del codice esadecimale per i link che sono già stati aperti. Ai meno esperti consiglio di leggere il post sui codici dei colori. L'altra pseudo classe utilizzata per i link è la seguente

a:hover {color: #FDBCB7;}

che determina la regola per i link puntati con il mouse. Questi colori sono tutti gestibili da Design > Designer Modelli > Avanzato > Link, in cui si possono scegliere i colori del normale collegamento, di quello visitato e di quello puntato dal mouse. Quindi la pseudo classe che li definisce è in genere simile a questa

a:link {
  text-decoration:none;
  color: $(link.color);
}

in cui per il colore si rimanda alla sezione delle variabili del template in cui è definito il colore del link con un blocco di codice simile a questo

<Group description="Links" selector=".main-outer">
    <Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#993300"/>

in cui è visibile il colore di default del modello e quello che invece è stato scelto dall'utente. La riga text-decoration:none; è il contraltare dell'altra text-decoration: underline; che serve per esempio per sottolineare i titoli dei post. 

Vediamo come personalizzare i link che vengono puntati con il mouse in modo da avere dei colori e dei comportamenti diversi. Potrebbe essere utile per informare visivamente il lettore di che genere di link si tratta. Mettiamo il caso che il sito tratti di cinema, possiamo colorare di rosa i link che rimandano a delle attrici, di blu quelli che rimandano a degli attori e di rosso quelli che portano a dei registi. Il concetto è quello di associare dei selettori alla pseudo-classe a:hover che è quella che definisce il comportamento al passaggio del mouse. Ecco tre esempi di codice

.url1:hover{
color: #940F04;
border-bottom:1px dotted #940F04;
text-decoration:none;
}

.url2:hover{
color: #EEEEEE;
background:#000000;
text-decoration:none;
}

.url3:hover{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1IhYYSzy6jORQLKYGar5jT1sRrLjyuN8Tz0485Iz0Ktaw8vEaEZ9qDL6IW7v-Xr6h99gCau8uvYl0YSqzzqFZQkf8hWajPO8LfHwWQTOUFqW2FL43R1E-cOnJNO1bBwg5ZU1XUi2oFam/") scroll right center transparent;
padding: 3px;
text-decoration: none;
}

I selettori sono stati indicati come url1, url2 e url3 ma possiamo scegliere anche altri nomi più attinenti al loro compito. Nel primo caso si formerà un bordo sotto al link secondo la regola dello stile dei bordi e nel terzo caso si vedrà una immagine di sfondo al passaggio del mouse. Ne ho scelta una di colore giallo che sembra un normale background colorato ma ci si può sbizzarrire come si vuole. Il secondo codice è invece per uno stile più classico: testo quasi bianco con sfondo nero.

Dopo che si sono scelti i blocchi di codice vanno inseriti nel modello. Bisogna andare su Design > Modifica HTML e cercare la riga ]]></b:skin> quindi incollarli subito sopra. Per fare in modo che un link abbia un aspetto secondo la regola inserita, dobbiamo usare uno di questi codici

<a class="url1" href="URL_COLLEGAMENTO">TESTO DI ANCORAGGIO 1</a>
<a class="url2" href="URL_COLLEGAMENTO">TESTO DI ANCORAGGIO 2</a>
<a class="url3" href="URL_COLLEGAMENTO">TESTO DI ANCORAGGIO 3</a>

A seconda della classe inserita, class="urlX", si assisterà a un diverso comportamento del link al passaggio del mouse sull'anchor text. Per vedere dal vivo il funzionamento di questa personalizzazione aprite il post

• Collegamenti con colori personalizzati -

Credo che sia superfluo aggiungere che tutto questo discorso fatto sull'aspetto dei link al passaggio del mouse può essere ripreso pari pari per i link normali e per quelli visitati. E' sufficiente sostituire hover rispettivamente con link e visited. Queste personalizzazioni possono tranquillamente coesistere.