Colocar iconos a los enlaces externos segun su tipo
Hace mucho tiempo que viendo algunos blogs de Blogger, he notado que en algunos enlaces externos presentes en el, siempre hay un icono, diferenciando el tipo de enlace o la extensión a la que pertenece, entoces, me pregunte, ¿Eso lo haran de forma manual o automatica?, aplicando codigos CSS se puede hacer de forma automatica, reconociendo el blog a que extension pertenece identificando si el link termina en formatos como .zip, o .rar, etc.
En la imagen, puedes ver una vista previa rapida de como quedarian, el icono flotando a la izquierda del texto, pero a continuacion, antes de comenzar a axplicarte, te doy una vista previa con los enlaces funcionando...
Los siguiente enlaces son de muestra, y por lo tanto, no tienen funcion alguna, asi que mejor evita dale clicks.
Archivo .zip
Ahora si, comienzo con los codigos.
[1] como aplicarlo
Te explico, como aplicarlo y luego te muestro el codigo. Para aplicarlo solo basta con crear un enlece normal, es decir:
<a href='http://Archivo.zip'>Archivo.zip</a>Como puedes notar, remarque en la direccion el formato del archivo, ".zip", al tu colocar la direccion entera, y que esta termine en ese formato, tu blog reconocera automaticamente que icono debe colocar justo antes del enlace, asimismo, ocurrira con los demas formatos.
codigos
[1] Para .zip
a[href $='.zip']{
padding-left: 18px;
background: transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0p3r_2lFoTxZCKkjoDMtD6SeN10odJmxMfSGKEGluln-t7JMny-lYybOj_buFYnTX5X7VModevqSicojlt2CjQLVIvyw7W39tm5Xk_xzX8Y-aDQDD6wFCJ5R0aJS0dcddRpdo59Zggfg/s1600/icono_zip.gif) no-repeat center
left;
}a[href $='.rar']{
padding-left: 18px;
background: transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ7UDKZD3bhrsFqTOcobhyphenhyphenZQO5tbG0iWTrZlAvSfp2KMS_xarPbn-qM09N0kcI4mp06n5UsNlgAvIFloTXn-KwgxeSoWERgMi0WgktsK3nr80o8b-Pd71G9Olfz5_kDulVMvxzLwlyq8k/s1600/rar.png) no-repeat center
left;
}[3] Para .css
a[href $='.css']{
padding-left: 18px;
background: transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJInvyYW9KjKmrxWuSeP4hrhC0GhbY6Hj-Eu48IjRPOGvIL-BBwVgUyC9f8bhQ75tTtssZ-9cZMsHuq9zjBJaM8hjNDxG4aj4HmvKExXvYhCubuOjK50cqXeWRRs4XNJgbiA9_OTims-w/s1600/icono_css.gif) no-repeat center
left;
}[4] Para .txt
a[href $='.txt']{
padding-left: 18px;
background: transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8DQdBVmJNbMp0JPBr5jHwwv_kHeXDiMeT7FJuhafQGxQr-IApQUHN7mDkxOsCgLtror0Dx711sywnWCGCDSLyTiMFhpcBXOgCrQI-MHlCLJXV6r_YjxF3SjZMocr1ccwV0VKWH-hZCsA/s1600/icono_textoplano.gif) no-repeat
center left;
}
[5] Para una direccion de correo
a[href ^="mailto:"] {
padding-left: 18px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKYmAssU08NBALI3CJztpbxyWije8gN32QU5c0A5ypkZpBKbJx4jYSa9oRCnOw60_AfNwXZZVI_Tpyj4Jp0ar9y7qEbDJPsUdYFrzCvy8tz-CTwYNiL5Wfu2FMors6uLewHZjSqx83Zdc/s1600/1271284939_mail.png)
no-repeat center left;
}[6] Para un enlace externo
Este si es distinto a los demas, ya que no se aplica de la misma manera... Para agregar esto, debes usar el siguiente codigo.
<a class='linkexterno' href='Direccion'>Nombre</a>Ahora el codigo
.linkexterno {
background: transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcjsM3k_10D_6pllW80Hda-iaIjbSv6ykwmlb8HVxtTKO7XdWqoVkh6ryp0rMDDhnsXOcYiT2qAx6q4Jm710oH-tAaChZ_yCclcPaLGocTZeao9Hi-nzBG-GGCu5TFFoDJNKEEOqLdX40/s1600/icono-link-externo.png) no-repeat
center left;
padding-left: 14px;
}
Todos ellos antes de ]]></b:skin>
Esta no es la unica forma en la que puedes colocarle iconos a los enlaces, si te puedes fijar bien en el codigo, puedes editarlo a tu modo, con solo cambiar la imagen, y el formato coloreado en el codigo, coloca el tuyo propio, como .exe o .png, entre otros, solo es cuestion de prestar atencion
Enlaces para compartir en tu blog o pagina web.
![[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK06o3qxRgndTN83gagg5xMy8Y0s4rg9GCiBabAgKpoFDpCUkp8Al_rfR6HKBuaEHmmst0IOnxKE7V2kHfX63AoPgzF_mZQ-nZ-Bkj4vdbhyphenhyphenPMU_bP1Dk_0ZJf_4_NgJh7dzseZHN7Okh/s72-c/calculadora.JPG "[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)")
No hay comentarios :
Publicar un comentario