Come personalizzare i colori dei link su Blogger.

Come personalizzare nel colore anche del background tutti i link di Blogger oppure crearne di personalizzati da usare per evidenziare alcuni contenuti.

Un collegamento in una pagina web è formato da tre componenti:  il testo di ancoraggio che è il testo visibile su cui cliccare per attivare il collegamento, l'URL della pagina web di destinazione e infine il target in modo da aprire il link nella stessa scheda oppure in un'altra.

Gli utenti di Blogger possono personalizzare i colori dei link sia dal Designer Modelli che dal codice del Tema. Andando su Bacheca -> Tema -> Personalizza -> Avanzato -> Link si possono impostare il colore del link, il colore del link visitato e il colore del link al passaggio del mouse.

Dopo aver scelto i codici dei colori tra quelli proposti per il tema o averli digitati autonomamente si va in alto a destra su Applica al blog per renderli effettivi. Nella anteprima del layout del sito posta in basso si potrà controllare l'aspetto che prenderà il blog dopo questa modifica.

Un altro sistema per modificare i colori dei link di tutto il sito è quello di andare su Bacheca -> Tema -> Modifica HTML dopo aver salvato il template. Usando la scorciatoia da tastiera Ctrl+F si cercano i blocchi di codice che iniziano rispettivamente con a:link { , a:visited { e a:hover { che determinano questo aspetto.

Nei blog ufficiali di Blogger non è presente il codice del colore ma quello determinato dalle Variabili cioè in sostanza quello impostato dal Designer Modelli. I tre blocchi di codice saranno simili a  questi

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

Per modificare i colori si va in alto nel template e si cercano le stringhe colorate di rosso link.color, link.visited.color e link.hover.color. Si trovano solitamente in questo blocco di codice

<Group description="Links" selector=".main-outer">
      <Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#993300"/>
      <Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#0000ff"/>
      <Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#ff1900"/>
    </Group>

dove è presente il colore di default cioè quello impostato da Blogger e quello scelto dall'utente. Questi ultimi per le tre tipologie di colori di link sono i codici presenti nel campo value che nel codice precedente sono stati colorati di blu. Per modificare i colori di tutti i link del blog basterà sostituire tali codici. Per esempio sostituendo value="#993300" con value="#003366" si modificherà il colore del link.

Analogamente lo si può fare per i link visitati e per il colore del link al passaggio del cursore.

MODIFICARE I COLORI SOLO DI ALCUNI LINK

Per rendere più evidenti alcuni collegamenti si possono creare delle regole CSS da usare solo per particolari link. Se subito sopra alla riga ]]></b:skin> del Tema incolliamo questo codice

a.url1{
color:#f00 !important;
font-size:20px;
font-weight:bold;
}
.url1:hover{
color: #00f !important;
border-bottom:2px dotted #940F04;
text-decoration:none;
}
a.url2{
color:#0f0 !important;
font-size:20px;
font-weight:bold;
}
.url2:hover{
color: #EEEEEE !important;
background:#000 !important;
text-decoration:none;
}
a.url3{
color:#f0f !important;
font-size:20px;
font-weight:bold;
}
.url3:hover{
color:#036 !important;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1IhYYSzy6jORQLKYGar5jT1sRrLjyuN8Tz0485Iz0Ktaw8vEaEZ9qDL6IW7v-Xr6h99gCau8uvYl0YSqzzqFZQkf8hWajPO8LfHwWQTOUFqW2FL43R1E-cOnJNO1bBwg5ZU1XUi2oFam/") scroll right center transparent;
padding: 3px;
text-decoration: none;
}

per creare le regole delle classi url1, url2 e url3. Naturalmente i parametri colorati di rosso possono essere modificati a piacere. Ho inserito un background colorato, uno sfondo di una immagine, uno stile del bordo, il grassetto e ho modificato le dimensioni del carattere.

I parametri per l'aspetto del link in condizioni normali sono inseriti tra parentesi graffe nei blocchi di codice a.url1, a.url2 e a.url3 mentre per l'aspetto del link al passaggio del mouse si modificano i parametri nei blocchi di codice .url1:hover, .url2:hover e .url3:hover. Il codice dei link da usare nei post è il seguente

<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>

Per aprire il link in un'altra pagina si aggiunger il tag target="_blank" in questo modo

<a class="url1" href="URL_COLLEGAMENTO" target="_blank" >TESTO DI ANCORAGGIO 1</a>

Il risultato di questi link personalizzati sarà simile a questo

In genere nei blog su Blogger è presente la riga text-decoration:none; come vediamo nel primo codice.  Con tale riga non c'è sottolineatura del link come invece è mostrato nello screenshot che è stato preso dal Real Time Editor. Se così non fosse si può aggiungere tale riga nel template o nel codice dei link personalizzati.

TESTO DI ANCORAGGIO 1
TESTO DI ANCORAGGIO 2
TESTO DI ANCORAGGIO 3

Se si vuole inserire un link personalizzato solo in una pagina web il codice CSS di tale link va incollato tra i tag <style> e </style> direttamente nella pagina web prima dell'HTML del link. Chi non avesse nessuna conoscenza dei linguaggi di programmazione può scaricare il mio ebook gratuito Guida all'HTML e al CSS.