English Português

Todas las páginas web o blog hacemos uso de otras y las enlazamos por medio de un link, bien, pues una manera de direfenciar a estos links que van a páginas web externas es acompañarlos con un pequeño icono, como ya hace wikipedia, por medio de CSS lo que hace un poco más controlada la navegación de tus visitantes.

Una forma de hacerlo es creando una clase e incluirla en todos nuestros links externos como lo explica maxdesign, pero demanda la correción de todos los links que ya hemos publicado y inclusión de dicha clase en todos links futuros, lo que hace dificil de implementar.

Otra forma es haciendo uso de CSS 3, con el que ya trabajan IE7, Firefox y Safari y que tiene la ventaja de aplicarse automaticamente a todos los links externos de nuestra web y te explicamos a continuación:

  1. En tu archivo CSS o la sección de tu página destinada a los estilos coloca la siguiente clase:
    a[href^="http"] {
    background: transparent url(http://bp2.blogger.com/_Zuzii37VUO4/RihddRN7pbI/AAAAAAAAAls/aMdsiWrikMo/s1600/link_go.png) no-repeat center right;
    padding-right: 18px;
    }

    Con esto indicamos la colocación de un icono a todos los links de nuestra web, haciendo uso de un icono de famfamfam.

  2. Como se indico que todos los links tendran un icono, ahora habra que eliminar el icono a los vinculos internos y a las imagenes con la siguiente clase:
    a img[href^="http"],
    a[href^="http://www.tupagina.com"],
    a[href^="http://tupagina.com/"] {
    background-image: none;
    padding-right: 0;
    }

    Donde tienes que remplezar “http://www.tupagina.com” con la dirección de tu web (con www) y “http://tupagina.com/” (sin www) para tener todos los enlaces externos indicados.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad