Pubblicato il 08/06/14e aggiornato il

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

 

link-personalizzati-blogger

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://lh4.googleusercontent.com/_nT13UtBmmiU/TahU3eZeNWI/AAAAAAAAS3E/zeDj_ZFT_-Y/sfondo-verde.jpg") 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.




3 commenti :

  1. Ciao caro, come stai? Cercavo su google (come sempre)come evidenziare i link nei miei post. Ad esempio: se io scrivo il nome di un prodotto tipo, clicca QUI per acquistare questo ombretto, io vorrei che magari i link appaiono di colore blu. Ma automaticamente! Come posso fare? Non so se hai capito bene, ma nel mio template, purtroppo non li evidenzia, e devo farlo io ogni volta, ma siccome dimentico, vorrei che la cosa fosse fatta automaticamente. Cioè, la parola "ombretto" automaticamente deve apparire come un link rosa. Certo che metterò il link nella parola nel post, così quando lo pubblico appare rosa e non nera come nel mio template. E quindi non si capisce se è un link o meno. :(( potresti aiutarmi? Il post è questo? Scusa del papiro, ma come sempre mi spiego male.

    RispondiElimina
    Risposte
    1. cioè, voglio evidenziarle così come nel tuo post, che ci sono le parole link che ti rimandano ad altri post. ecco. forse adesso mi sono spiegata. :D li vorrei rosa. ahaha aiuto!

      Elimina
    2. Questo è il post giusto. Le personalizzazioni che si possono fare sono spiegate bene. Se vuoi il colore rosa devi sostituire a #940F04; per esempio #FFC0CB
      I codici dei colori più conosciuti li puoi trovare qui
      https://it.wikipedia.org/wiki/Lista_dei_colori
      Fare le cose in automatico però non è possibile a meno di non modificare i colori di tutti i link
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.