En este blog de pruebas podreis ver una demo sobre cómo quedaría el asunto, así como todas las extensiones disponibles.
Esto se consigue insertando después de <head> la línea que se muestra a continuación y que incluye un fichero en Fileden totalmente operativo. Pero aunque sea así, no os quedeis aquí y seguid leyendo para poder evitar problemas futuros y también para poder ajustar el código a vuestras necesidades.
<link href='http://www.fileden.com/files/2009/9/13/2573667/iconize2.css' rel='stylesheet' type='text/css'/>
Como habeis podido ver, el fichero es una hoja de estilo (CSS) externa, que ligamos a nuestra página mediante la etiqueta link. Esta hoja contiene diversos selectores de atributos como los que vimos anteriormente, que incluyen un pequeño estilo para insertar un icono relativo al tipo de enlace, por medio de un padding.
La idea la vi en pooliestudios, aunque he incorporado a su paquete original unos cuantos selectores e iconos más, con el fin de incluir algunos sitios que hoy día se usan muy habitualmente, como Twitter, YouTube, Flickr, Facebook, Imageshack... entre otros, al tiempo que he suprimido otros quizás un poco en desuso.
Como siempre, para no depender de la constancia del propietario de los ficheros o del hosting dónde se alojan, lo conveniente es alojarlos nosotros mismos. Para ello, nos descargamos este fichero que corresponde a la hoja de estilo y este otro dónde van los iconos. A continuación subimos todas las imágenes a nuestro sitio de almacenamiento habitual y editando la hoja, vamos sustituyendo todas las direcciones de los fondos-iconos (background) por las nuestras. Luego, subimos la hoja de estilo también al lugar dónde acostumbremos y finalmente, sustituimos la nueva dirección por la marcada en verde en el código del principio.
Quizás es un poco laborioso, pero una vez hecho sirve para siempre y nos evita que un buen día deje de funcionar porque haya desaparecido el fichero o las imágenes originales. Una alternativa para el fichero .css, sería simplemente copiarlo e insertarlo dentro de nuestra hoja de estilo (en el caso de Blogger, entre las etiquetas SKIN). En este último caso, no sería necesaria la línea del principio porque no habría que llamar a ninguna hoja de estilo externa.
Y ahora los problemillas, sobre todo hablando de Blogger. En esta plataforma, como sabeis, cada vez que se sube una imagen se incorpora automáticamente un enlace a la imagen original. Como mediante la hoja de estilo, hemos marcado los enlaces a ficheros con extensiones .jpg, .png, .gif y .bmp para que muestren un icono, estas imágenes con enlace, mostrarán también un icono que nos puede estropear el diseño de las mismas. Esto dependerá de la plantilla de cada uno.
Para evitar esto hay dos soluciones. La primera es utilizar una clase que ya incorpora la hoja de estilo de iconos, llamada imagelink y que provoca que todos los enlaces que la incluyan, dejen de mostrar el icono.
De esta manera, si incorporamos class="imagelink" al enlace de cualquier imagen...
<a class="imagelink" href="http://enlace_a_imagen.jpg"><img src="http://imagen.jpg"/></a>
...esa imagen en concreto NO mostrará el icono, tal y como podeis ver en la parte inferior de la página de ejemplo.
La segunda solución es más radical pero casi inevitable para sitios con muchas imágenes con enlace en sus páginas. La cosa es que habría que prescindir de los iconos en estos casos, para no tener que ir modificándolos uno por uno. Para ello sólo habría que editar la hoja de estilo y suprimir los selectores de atributos que hagan referencia a imágenes, antes de guardarlo en nuestro hosting. Para los perezosos, aquí teneis otra versión del fichero CSS preparada para ello.
Al igual que con las imágenes, si algún icono más os "estorba", sólo teneis que eliminar su selector de la hoja de estilo o modificar sus reglas hasta ajustarlas a vuestros deseos.
A partir de aquí, imaginación al poder. Podeis sustituir los iconos por otros que cuadren más con el estilo de vuestro sitio, podeis ponerlos a la izquierda en lugar de a la derecha modificando el padding, incorporar enlaces de otro tipo o a otros sitios, quitar otros que no os queden bien... o cualquier otra cosa que se os ocurra y que esperamos compartais a través de los comentarios.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Este comentario ha sido eliminado por el autor.
ResponderEliminarbueno, no tengo mucha idea... pero voy intentando hacer cosas y con post tan bien explicados no es dificil ir aprendiendo a manejar códigos.saludos
ResponderEliminarHola WiFi. Para probar sólo tienes que copiar y pegar en la plantilla el primer código que se muestra. Si te gusta, ya es cuestión de seguir leyendo el post.
ResponderEliminarBuen dato :D
ResponderEliminarGracias chata. Me has animado un poco, porque estaba deprimido con la poca repercusión de esta entrada después del trabajo que me costó montarlo todo.
ResponderEliminarUn saludazo :D
Hola. Gran aporte Oloman. Gracias por compartir y por tu tiempo. Saludos.
ResponderEliminarGracias Oloman este blog es de mucha ayuda.saludos
ResponderEliminarSé lo que quieres decir con lo de currarte una entrada y que apenas tenga repercusión. O al menos no tanta como esperas de ella.
ResponderEliminarPor lo que a mi respecta, que sepas que esta (entrada) me la guardo en marcadores para verla con detenimiento y para probar a hacerlo en mi blog... Eso si, cuando regrese. Me voy a tomar unas indefinidas vacaciones blogueras para terminar algo que empecé hace ya varios años.
Ánimo, Oloman.
Hasta pronto.
Muchas gracias, Oloman, me lo quedo para mi blog, jeje. No obstante, hay un icono para la categoría "external" que no está incluida en el código CSS y que supongo que sirve para cualquier enlace que no sea ninguno de los incluidos en las otras categorías. ¿Cómo sería la línea de código completa, para ponerla en el CSS, en este caso particular? Mil gracias.
ResponderEliminarGracias Amador. Un saludo.
ResponderEliminarTranqui José. Sólo fue que me pilló en mal momento. Estoy acostumbrado a este tipo de cosas. Como tú dices, eso nos pasa a todos :D
Efter, estuve haciendo pruebas con eso pero se ve que al final no lo incluí. El código sería este:
a[target="_blank"] {padding: 5px 20px 5px 0;background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/external.gif) no-repeat center right;}
...pero sólo funciona con los enlaces que lleven el TARGET apuntando a una ventana nueva. De ahí lo de EXTERNAL.
Para un auténtico "enlace externo", el selector debería ser:
a[href*="oloblogger.blogspot"]
...pero cambiando lo entrecomillado por lo que corresponda a tu dirección.
Muchas gracias Oloman, te agradezco tu pronta respuesta y como siempre, felicitarte por tu blog y sus contenidos que tanto nos ayudan a todos.
ResponderEliminarMenos mal que has comentado, porque esta mañana me vino a la cabeza que lo había explicado mál y ahora se me había olvidado comentarlo. Lo último que dije en #11 no te funcionará como quieres.
ResponderEliminarPara distinguir enlaces en la misma ventana de aquellos que se abren en ventana nueva, si tienen el TARGET lo primero funcionará perfectamente.
Sin embargo, ni lo que queremos es distinguir los enlaces internos (propios) de aquellos que llevan a otras webs, lo que habría que hacer sería poner al principio de todo el CSS
a[href] {padding: 5px 20px 5px 0;background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/external.gif) no-repeat center right;}
Esto haría que TODOS los enlaces sean del tipo que sean, incorporen el icono del cuadradito con flecha. Pero no hay problema, porque en CSS, cuando hay duplicidad de definiciones, lo último es lo que se ejecuta, así que los posteriores selectores "sobreescribirían" este y cada uno llevaría su propio icono.
Como tras incluir esto (recuerdo que tiene que ser al principio), cada tipo de enlace llevará su propio icono y el RESTO llevarán el cuadradito, ahora nos faltaría poner AL FINAL del todo, otro selector que quite el cuadrado a nuestros enlaces internos. Esto sería así:
a[href*="oloblogger.blogspot"] {padding: 0px;background-image: none;}
...cambiando oloblogger.blogspot por la parte significativa de tu URL.
Perdón por el despiste.
Lo que me gusta de este blog es que la explicaciòn que ya es excelente siempre está acompañada de ejemplos, gracias.
ResponderEliminarMe esfuerzo en ello Pergolas, así que gracias por comentarlo.
ResponderEliminarMe encanta.
ResponderEliminarOloman, es genial, lo único, no e causará ningún conflicto con jquery ni con scriptaculous (uso la función no-conflict de jquery, no te asutes)
Me va a provocar algún problema, macho?
Drawer, es sólo CSS, o sea estilo. Yo creo que no tiene nada que ver con los JavaScripts que comentas. No te digo que estoy al 100% seguro, porque nunca lo estoy con nada, pero en esta ocasión... casi.
ResponderEliminarlanza y acierta.
ResponderEliminartenías razón, no afecta nada, es que al ver los $ pensé que podría provocar algun tipo de fallo.
Si es que soy un poco bobo :(
Muchas gracias.
es algo que me ha llamado la atención, sabes como esta hecho el literal de google de hoy, lo de las bolas que se mueven cuando llevas el raton a ellas, un saludo
ResponderEliminarJe, je, je... No lo había visto, Luz. Supongo que es un script. Hay un tipo por ahí que hace cosas de ese tipo, pero no recuerdo exactamente el link. Me suena que tenía algo parecido. Esta es su web:
ResponderEliminarhttp://www.dhteumeuleu.com
No hay de qué Drawer.
ResponderEliminargracias man me interesa aprender mucho sobre esto
ResponderEliminar¿Cómo consigues estas plantillas tan originales en tu blog? Es todo un misterio. En fin, hay algunas cosas que no se pueden contar :P.
ResponderEliminarBueno, a lo que íbamos... Quería comentar esta entrada, y quería decir que... ¡me marean tantas letras :P! Jeje... Aunque seguro que este "truquitruco" queda muy bien.
comentas que subamos la hoja de estilos para que si hay cambios no nos afecte, pero blogger permite subir ese tipo de archivo??? Y si no lo permite, tu por ejempo donde me das opcion para subirlo, algun servicio de google hay? u otra opcion
ResponderEliminarAna, no hay misterio y sí se puede contar: Coges una plantilla cualquiera que tenga el esqueleto que tienes en mente y luego la modificas añadiéndole o quitándole lo que quieras. Desde la simple Mínima se pueden conseguir muy buenos resultados. Sobre las letras, este es un blog que no se presta demasiado a las imágenes. Ya me gustaría escribir menos y dibujar más ;)
ResponderEliminarAliastaz, puedes incorporar todo el código de la hoja de estilo a tu plantilla, pero por comodidad "visual" proponía que se alojara externamente. Ya comento en la entrada que yo lo hice en Fileden. Esa es una buena opción.
Excelente truco y esto les ayuda a los lectores a diferenciar los links que hay en el blog, saludos!
ResponderEliminar