Link esterni col disegnino
Warning: getimagesize() [function.getimagesize]: Filename cannot be empty in /var/www/web2/html/mondoinformatico.info/nuovo/wp-content/plugins/paginated-comments/paginated-comments.php(475) : eval()'d code on line 50
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!
Non ci sono commenti
Non ci sono commenti per questo articolo