Come personalizzare l'aspetto dei link su Blogger.

Come personalizzare i colori e altri parametri dell'aspetto dei collegamenti in una pagina web in generale e su Blogger in particolare.

Nel modello di Blogger sono presenti dei blocchi di codice che servono per determinare l'aspetto dei link o collegamenti che dir si voglia. Tali elementi si suddividono in tre categorie: link non ancora visitati, link già visitati e link puntati con il mouse. 

Se andate su Modello > Modifica HTML i blocchi di codice per i link iniziano rispettivamente con a:link a:visited e a:hover. Si possono anche personalizzare questi colori andando su Modello > Personalizza > Avanzato > Link.  Un esempio di codici per il link potrebbe essere questo a:link {color: #048;}, a:visited {color: #808;}, e a:hover {color: #FCB;} dove i codici dei colori in rosso determinano l'aspetto dei tre tipi di collegamenti.

Nel template oltre al colore ci possono essere altri parametri 

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

dove text-decoration:none; serve per non aggiungere nulla al testo di ancoraggio. Al posto di none potrebbe esserci underline per una sua sottolineatura o overline con ovvio significato. Come vedete non è presente il codice del colore ma è presente una variabile che poi viene configurata con il Designer Modelli ed è presente nella parte alta della sezione <b:skin> del template

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

dove sono definiti i colori dei link visitati, dei link non visitati e dei link puntati con il cursore. Il colore di default è quello previsto dal modello ed è colorato di viola mentre quello effettivo è quello determinato in value e che è colorato di blu. Se volete modificare i colori dei collegamenti del vostro blog senza andare su Modello > Personalizza basterà cambiare i codici in value.

 

COME MODIFICARE L'ASPETTO DI TUTTI I LINK

Possiamo operare sul codice del modello in questo modo 

a:hover {
color: #FDBCB7;
border-bottom:1px dotted #036;
}

per inserire un bordo punteggiato di un pixel come sottolineatura ai link puntati dal mouse. I meno esperti possono consultare il post sullo stile dei bordi per avere maggiori informazioni. Questa operazione può essere fatta anche per i link visitati e per quelli non ancora visitati.

 

MODIFICARE L'ASPETTO SOLO DI DETERMINATI LINK

 

Se un webmaster volesse evidenziare in modo particolare solo determinati Collegamenti si possono creare a tale scopo delle apposite classi. Un blog di motori potrebbe colorare in modo diverso i link che conducono a post di auto rispetto a quelli che conducono a post di moto, un sito di letteratura potrebbe invece usare colori diversi per link a post di poesia rispetto a link a post di narrativa. La cosa potrebbe anche interessare un blog che si occupa di cinema o di spettacolo in genere oltre ai siti di cucina per rendere subito evidente che la ricetta si riferisce a un primo, a un secondo, a un antipasto o a un dessert.

Andate su Modello > Modifica HTML e incollate il seguente codice 

.bici:hover{
color: #940F04;
border-bottom:1px dotted #940F04;
text-decoration:none;
}
.moto:hover{
color: #fff;
background:#000;
text-decoration:none;
}
.race:hover{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1IhYYSzy6jORQLKYGar5jT1sRrLjyuN8Tz0485Iz0Ktaw8vEaEZ9qDL6IW7v-Xr6h99gCau8uvYl0YSqzzqFZQkf8hWajPO8LfHwWQTOUFqW2FL43R1E-cOnJNO1bBwg5ZU1XUi2oFam/") scroll right center transparent;
padding: 3px;
text-decoration: none;
}

subito sopra alla riga ]]></b:skin>. In questo modo saranno modificati solo i link puntati con il mouse ma si può estendere il concetto anche a link visitati e non visitati. Ho preso come spunto un blog che si occupa di due ruote che voglia suddividere i link dei post che si occupano di bicicletta (bici) da quelli che si occupano di motociclismo (moto) e da quelli che invece si occupano di gare (race). Nei primi link si visualizzerà una sottolineatura punteggiata, nei secondi si vedrà uno sfondo scuro con testo bianco mentre nel testo lo sfondo sarà formato da una immagine di background

Per applicare questa personalizzazione a un semplice link questo deve essere inserito nell'Editor del post di Blogger in Modalità HTML con questa sintassi

<a class="bici" href="URL_COLLEGAMENTO">TESTO DI ANCORAGGIO BICI</a>
<a class="moto" href="URL_COLLEGAMENTO">TESTO DI ANCORAGGIO MOTO</a>
<a class="race" href="URL_COLLEGAMENTO">TESTO DI ANCORAGGIO GARA</a>

È evidente che la personalizzazione più interessante riguarda i link puntati con il mouse rispetto agli altri. Ovviamente le classi moto, bici e race sono puramente indicative e possono essere sostituite da altre espressioni così come se ne puossono aggiungere anche altre con il relativo codice.