Link esterni col disegnino



Quando un navigatore arriva in una pagina del vostro sito internet, l’unico modo che ha per capire se un link è diretto ad una vostra pagina o ad una pagina di un altro sito è quello di guardare l’ALT, sempre che lì abbiate scritto “sito esterno“. Oppure dal disegnino, ebbene si, potete mettere un disegnino a fianco a tutti i link esterni del vostro sito. Come?

Con i css e con un disegnino semplice semplice, si puo’ fare perfino con Paint. Vediamo come. Per prima cosa apriamo un qualunque programma di disegno, poi apri nuovo, dimensioni, larghezza 12px altezza 8px. A questo punto facciamo un cerchio nella parte sinistra dello spazio, e dal centro di esso verso destra facciamo passare una linea retta orizzontale che arriva fino alla fine dello spazio del disegno. A questo punto un pixel prima del bordo mettiamo due puntini uno sopra e uno sotto attaccati alla linea, salvate in formato PNG col nome externo.png. I colori li scegliete voi naturalmente, e anche la forma, o la direzione della freccia, potete fare come volete. Ora si passa alla parte un po’ piu’ tecnica, il css.

Il codice css da inserire nel vostro file esterno o nelle vostre pagine (se non usate un file css esterno) e’ il seguente:

a.externo { padding-right: 16px; background: url(externo.png) 100% 50% no-repeat; height: 0; vertical-align: bottom; }

Se il codice lo inserite all’interno della vostra pagina, ricordatevi di inserirlo in questa posizione:

<html> <head> <title>Titolo</title> <style type="text/CSS"> a.externo { padding-right: 16px; background: url(externo.png) 100% 50% no-repeat; height: 0; vertical-align: bottom; } </style> </head> <body> Bla bla bla... </body> </html>

Ora è quasi pronto, dovete solo inserire nei link la classe. Esempio:

<a xhref="http://www.mondoinformatico.info/">Mondo Informatico</a> Diventerà: <a class="externo" xhref="http://www.mondoinformatico.info/">Mondo Informatico</a>

PS: Lo stesso lavoro potete farlo con le opportune modifiche anche per i link mailto:, le e-mail. Questo è il codice css:

a.email { padding-right: 16px; background: url(email.png) 100% 50% no-repeat; height: 0; vertical-align: bottom; }

Potete divertirvi a presonalizzare i vari link, ad esempio se nel vostro sito trattate argomenti diversi, potete mettere immagini differenti per ogni link che dirige verso un diverso argomento. Alla prossima!

Lkv

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
Pinterest