21/6/07

Links externos con icono

Estaría bien diferenciar los links externos en nuestro blog de los que no lo son, o sea, los que al pinchar sobre ellos nos llevan a otras páginas, de los que nos envían a una parte dentro de nuestro blog.
Podemos hacerlo añadiéndoles un pequeño icono, que los distinga, para ello empleamos el CSS.

1- En el css de nuestra plantilla, por ejemplo justo antes de ]]></b:skin>, añadimos esto:

a[href^="http"] {
background: transparent url(URL DE NUESTRO ICONO) no-repeat center right;
padding-right: 18px;
}

a img[href^="http"],
a[href^="URL DE NUESTRO BLOG"],
a[href^="URL DE NUESTRO BLOG"] {
background-image: none;
padding-right: 0;
}

El primer código le ordena a nuestros links que aparezcan con el icono, fijaros que en padding-right: he puesto 18px, es la distancia del icono a el texto, si vuestro icono es mayor o menos, probablemente tengáis que modificar esto para conseguir un mejor efecto estático. Podéis ir modificando y usando la vista previa.
El segundo es para que los links internos y las imágenes con link, no lo muestren. No se os olvide poner la url (dirección que aparece en el navegador cuando entráis a vuestro blog) en el código, las dos veces que lo pide.

Los links externos se verían así:

Por si queréis usar la flechita verde, os dejo su dirección:

http://img213.imageshack.us/img213/6841/arrowrighttp6.png

38 comentarios:

  1. Rosa, es la primera vez que vengo a tu blog, pero estoy encantado de la información que tienes en él, muy buena y muy útil.
    Te voy a enlazar a mi blog, eres inmensamente necesaria para muchos blogueros.

    Saludos!!

    ResponderEliminar
  2. Anónimo21/6/07

    Hola Rosa.

    Estoy intentando poner un background en mi blog pero este se incrusta por todo el espacio del blog. A mi me gustaria que quedase como te quedan a ti estas gotas de agua que tienes a los lados. Supongo que tengo "encerrar" el resto de elementos pero no se como "encerrar" ni la side-bar ni los logos y el contador que tengo abajo...

    ¿Podrías ayudarme?

    ResponderEliminar
  3. Anónimo21/6/07

    Claro toxic! La pregunta sobra...esta noche le pego un repasito a tu blog:D

    ResponderEliminar
  4. Anónimo21/6/07

    Gracias trimardito, es la primera vez que me llaman "necesaria" XD ¡se me ha dispado el ego!:D

    No se donde he visto antes tu avatar...ese pijamita es inconfundible:P mola!!

    ResponderEliminar
  5. Anónimo21/6/07

    Gracias rosa!

    Ya sabes que si alguna vez quieres un diseño asi de algo me lo dices y te lo envio..

    ResponderEliminar
  6. Hola Rosa! Ultimamente estaba pensando en diferenciar los links externos de los que no los son, así que me va a ir genial tu información (como siempre ;) ).

    ResponderEliminar
  7. Anónimo21/6/07

    Toxicboy, mira en mi blog de pruebas y sobre el, ve orientandome sobre los cambios que quieres...
    http://newhelp.blogspot.com/

    ResponderEliminar
  8. Anónimo21/6/07

    Joder Rosa eres la caña... Al final la mitad de mi blog lo vas a hacer tu... es exactamente lo que tenia pensado solo que con otra imagen de fondo...

    como lo ves tu? te gusta mas asi?

    ResponderEliminar
  9. Anónimo21/6/07

    A mi me gusta, y nada de que lo hago yo, no te menosprecies, yo solo explico y tengo la gran suerte(en tu caso) de tener un alumno espabilado.

    Oye, creo que no tengo o extravié, no se, tu email:$ mándame un mail para pasarte las instruciones, o mejor dicho, las explicaciones:

    lejaniaimposible@hotmail.com

    ResponderEliminar
  10. Anónimo22/6/07

    Cambios realizados!!

    No se si me convence del todo!!! Quiza quedaria mejor si encuadraría con borde la sidebar y la parte de abajo (la del contador)

    Espero tus comentarios!!!

    ResponderEliminar
  11. Anónimo22/6/07

    Toxic, sabía que serían calaveras ¡te lo juro!:D

    Para el borde de la sidebar:

    #sidebar-wrapper {
    border:1px solid #cccccc;

    Enmarcar el footer:

    Primero le ponemos el tamaño del cuerpo, que nolo tiene, o lo dejas como está, según más te guste, ahora está así:
    #footer {
    width:660px;

    Para ensancharlo y que ocupe el mismo ancho del cuerpo:

    #footer {
    width:910px;

    Ahora lo enmarcamos, añadiendo: border:1px solid #cccccc;

    Mira a ver...para hacerte una idea

    http://newhelp.blogspot.com/

    ResponderEliminar
  12. Anónimo22/6/07

    Gracias Rosa! lo probare mañana a ver que tal queda...

    jijiji

    por cierto ¿eres española?

    es una duda que tengo....

    jijijiji

    ResponderEliminar
  13. Anónimo22/6/07

    Española, si señor, y de Asturias para más señas:P

    ResponderEliminar
  14. Anónimo22/6/07

    Ah!!!! yo estuve todo un verano en gijon de practicas en una television...

    gran ciudad........

    ResponderEliminar
  15. Anónimo22/6/07

    Por cierto. Acabo de aplicar el borde a la side-bar pero el contenido se me queda muy pegado al borde añadido.

    He intentado poner lo que me enseñaste una vez "padding" pero no se me separa. ¡desaparece la linea!

    Echa un vistazo cuando puedas...

    Por cierto... estoy preparando otro fondo diferente "menos llamativo"

    ResponderEliminar
  16. Anónimo22/6/07

    Hola toxic, prueba con esto, en:

    #sidebar-wrapper {

    añade una nueva línea con: padding-left:5px;

    Se separará de la parte derecha los pixeles que marques, 5 en este caso.

    ResponderEliminar
  17. Anónimo22/6/07

    Lo siento Rosa, no funciona...

    Habría que separarlo del lado izquierdo...

    ¿Se pueden quitar esas barras horizontales discontinuas que separan los elementos del sidebar? O en su defecto hacerlas continuas..

    Gracias ROOOOOOOOOOSSSSSSSSAAAAAAAA!!!

    ResponderEliminar
  18. Hola Rosa,

    Estoy peleandome con el tema de diferenciar los links externos siguiendo tus instrucciones. Copio el código tal cual, pongo mi url las dos veces, pero sigue identificando todas las imágenes como links externos...
    He visto que la url de estas imagenes suele ser bp*.blogger.com * es un nº del 1 al 9).

    ¿ Alguna idea de como puedo salir de esta ?

    Gracias!

    ResponderEliminar
  19. Anónimo24/8/07

    kcb, pues siento decirte que no se que pasará...he vuelto a comprobarlo y a mi no me salen en las imagenes subidas a Blogger...

    ResponderEliminar
  20. Rosa y kcb: descubrí que esto era posible, en otro blog, para ser sincero. Pero llegué aquí porque tenía el mismo problema que kcb, me salían las imágenes al lado de los links externos pero también de aquellas imágenes con link.

    Encontré una solución que se da si se suben las imágenes a través del mismo blogger, ya que le agrega el atributo onblur a la etiqueta a.
    Por lo que en vez de preguntar por href se debe preguntar por onblur. Por defecto blogger le pone "try" así que en vez de a href^="http://", hacemos a onblur^="try" y le ponemos que no lleve imagen como tú indicas.

    también es posible usar otro condicional distinto de ^. Ese pregunta "si comienza con". Hay otro que permite preguntar "si termina con"
    Es: a href$='.pdf'
    lo que añadiría una imagen especial a los links hacia un pdf. Se pueden usar todos los que se quiera con distintas extensiones de archivo.

    Saludos

    ResponderEliminar
  21. Anónimo30/1/08

    Gerardo, muchísimas gracias por el dato. Es muy acertado lo que dices, el caso es que supongo que será cosa de la plantilla que estemos usando, porque como le dije a kcb, a mi misma y a otros no les surgía ese problema, por lo que no le di más vueltas...mea culpa. :-$

    De verdad, te agradezco tu aclaración, gracias.

    ¡Un saludo!

    ResponderEliminar
  22. Anónimo24/2/08

    hola ROSA, he pensado mucho en escribirte por varias razones la principal para agradecerte tu magnanimidad y paciencia de una gran maestra.y la segunda sera que me contestas a tiempo mi pregunta con tanto solicitud de ayuda que recibes.
    1. como hago para que mis comentarios o entradas tengan un link interno que permita ampliar la informacion en otra ventana

    gracias rosa

    ResponderEliminar
  23. Anónimo25/2/08

    andres de caracas, tendrás que perdonarme, pero no he entendido tu pregunta,lo siento. :-$

    ResponderEliminar
  24. Anónimo6/6/08

    ¿Esto vale también para el Sidebar? Si quiero que en mis enlaces del sidebar aparezca la flechita dónde debo de colocar este código?

    ResponderEliminar
  25. Hola Rosa, que tal como estas?? Espero que seal el lugar correcto para preguntar esto,pero quisiera saber como poner un link y al darle click mostrar imagenes dentro del mismo blog, por ejemplo si puedes meterte por favor a www.thecitylovesyou.com y en varios posts trae "Read More" y al darle click abre mas imagenes relacionadas al tema. Ojalá puedas contestarme. Mil gracias. Adios.

    ResponderEliminar
  26. Anónimo18/6/08

    nanogoo, en esa página lo usan para mostrar imágenes pero no es que sea solo para imágenes, lo que hace es ocultar parte de la entrada hasta que se pincha en "leer más". Ellos han incluido solo imágenes, pero puede incluirse lo que sea con este sistema:
    http://elescaparatederosa.blogspot.com/2007/04/entradas-expandibles-blogger-beta.html

    y también con este:

    http://elescaparatederosa.blogspot.com/2007/04/el-leer-ms-con-resumen.html

    ResponderEliminar
  27. Anónimo28/8/08

    Hola de nuevo Rosa, quería reiterar la pregunta de anxo (mas arriba, la 24) pues que no he encontrado la respuesta quizá por despistada, muchas gracias de nuevo!!

    ResponderEliminar
  28. Anónimo28/8/08

    Vic, en la entrada digo "links externos del blog" o sea los links de todo el blog que llevan a otro sitio fuera del blog, en la sidebar o entradas da lo mismo donde estén.

    ResponderEliminar
  29. Anónimo30/8/08

    Perfecto, gracias Rosa!

    ResponderEliminar
  30. hola rosa antes que todo dejame decirte que eres una mestra, muchas gracias por el apoyo que brindas a los demas sin esperar nada a cambio besos y siempre sé asi

    bueno mi pregunta es esta, he buscado por todos lados y hasta ahora no he encontrado, bueno mi blog es de diseño digital,y siempre subo cositas para que a las personas que les guste descrguen greatuitamente entonces para descargar tengo que poner el link de descarga pero no me gusta como se ve, entonces me gsutaria que apareciera que en lugar del link solo dijera esto DESCARGA AQUI, y esto te llevara a la pagina para descargar. espero haberme explicado
    mi blog es este
    http://lagaleriadephotoshop.blogspot.com/
    mi correo es este
    betzy_2_martinez@hotmail.com

    ResponderEliminar
  31. Anónimo28/1/09

    Betxy, tendrás que ponerlo así:

    <a href="url de la descarga">DESCARGA AQUI</a>

    Por ejemplo, para la entrada que tienes con "marco de bebé" sería esto:
    <a href="http://www.4shared.com/file/82983271/2b884f31/BLOG_008.html">DESCARGA AQUI</a>

    ResponderEliminar
  32. muchisisisimas gracias rosa ya lo he hecho
    ;)

    ResponderEliminar
  33. Anónimo29/7/09

    Hola Rosa. Antes que nada quiero decirte que eres genial, más de la mitad de mi blog lo configuré con ayuda tuya. Ya lo puse en mi blog (links externos con icono), pero tengo un widget en mi sidebar para afiliados y el iconito de la flechita sale también en los banners. ¿Hay alguna forma de que salga sólo en el texto?

    ResponderEliminar
  34. Anónimo29/7/09

    Akira Se supone que el código hace que no salga en las imágenes con link... pero algunos navegadores no lo respetan :S
    Lo siento, pero no se como hacer para que eso no suceda. :(

    ResponderEliminar
  35. Anónimo29/7/09

    Hola Rosa. Ya lo solucioné. Ahora cada vez que agregue un afiliado, voy a ir a la lista de urls sin iconoy voy a agregar la url del nuevo afiliado
    a img[href^="http"],
    a[href^="URL DE NUESTRO BLOG"],
    a[href^="URL DEL NUEVO AFILIADO"],
    a[href^="URL DE NUESTRO BLOG"] {
    background-image: none;
    padding-right: 0;
    }

    Y sí funciona

    ResponderEliminar
  36. Anónimo30/7/09

    Akira Pues me alegro, aunque es un poco...¿molesto?

    ResponderEliminar
  37. Anónimo5/8/09

    Rosa,

    Esta é mais uma excelente idéia, mas a opção de "Links Especiales" feito manualmente é melhor, pois esta opção automática agregaria o ícone aos links de bookmarks sociais, por exemplo, quebrando todo o layout do template.

    Teríamos uma solução para isto?!...

    Parabéns pelo seu blog! Ele é minha "Fonte do Conhecimento" sempre!

    []'s

    Uhu, Galera!...

    ResponderEliminar
  38. Anónimo5/8/09

    uhugalera No he encontrado una solución de momento, lo siento :(
    Si la encuentro, la añadiré a la entrada.

    ResponderEliminar

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

Nota: solo los miembros de este blog pueden publicar comentarios.