Identificar vinculos externos

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.