Hacktime

Que seria de la web sin este blog

Identificar vinculos externos

Posted by yaju en junio 9, 2007

En esta ocasión aprenderemos algo muy útil, que nos sirve para identificar los vinculos externos por medio de un icono pequeño.

El truco consiste en utilizar los “selectores de atributos”. Por ejemplo, esto permitiría detectar todas las etiquetas A que contengan un vínculo a cualquier tipo de archivo:

En este caso identificaremos a dos tipos de archivos similares (en este caso archivos comprimidos), así que usaremos el mismo icono:

a[href $=’.zip‘], a[href $=’.rar‘]{
padding-right: 18px;
background: transparent url(http://bp0.blogger.com/_Zuzii37VUO4/Rh1xnUrQooI/AAAAAAAAAhc/wU0nM7M_Ebo/s1600/icono_zip.gif) no-repeat center right;
}

Aqui identificaremos con un icono a una hoja de estilo (CSS) externa:

a[href $=’.css‘]{
padding-right: 18px;
background: transparent url(http://bp2.blogger.com/_Zuzii37VUO4/Rh2GS0rQopI/AAAAAAAAAhk/4QyZEOVo2L8/s1600/icono_css.gif) no-repeat center right;
}

Aquí identificamos un archivo de texto:

a[href $=’.txt‘]{
padding-right: 18px;
background: transparent url(http://bp2.blogger.com/_Zuzii37VUO4/Rh2JS0rQoqI/AAAAAAAAAhs/8cn9Frf0DqE/s1600/icono_textoplano.gif) no-repeat center right;
}

O incluso podemos identificar el enlace a un e-mail:

a[href ^=”mailto:”] {
padding-right: anchoImagen;
background: transparent url(URL_imagen) no-repeat center right;
}

Y para identificar a un vinculo externo cualquiera (sin definir las clases) el siguiente código:

.linkexterno {
background: transparent url(http://bp1.blogger.com/_Zuzii37VUO4/Rimp_xN7pfI/AAAAAAAAAmM/kp9QQ5bj-nc/s1600/icono-link-externo.png) no-repeat center right;
padding-right: 14px;
}

Todos estos códigos deben de ser añadidos en:

Plantilla–Edición de HTML

Antes de ]]></b:skin>

Guardar los cambios y listo

Nota: Los iconos usados pertenece a BlogyWeb.

Otros Trucos

Diferenciar links externos con CSS

Selectores condicionales

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: