38

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

Entradas Relacionadas:

38 comentarios:


El Trimardito

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!!

Anónimo

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?

Anónimo

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

Anónimo

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!!

Anónimo

Gracias rosa!

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

Bolbo_reta

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 ;) ).

Anónimo

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

Anónimo

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?

Anónimo

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

Anónimo

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!!!

Anónimo

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/

Anónimo

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

jijiji

por cierto ¿eres española?

es una duda que tengo....

jijijiji

Anónimo

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

Anónimo

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

gran ciudad........

Anónimo

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"

Anónimo

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.

Anónimo

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!!!

Franz Häuser

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!

Anónimo

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...

Gerardo Blanco

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

Anónimo

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!

Anónimo

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

Anónimo

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

Anónimo

¿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?

nanogoo

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.

Anónimo

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

Anónimo

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!!

Anónimo

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.

Anónimo

Perfecto, gracias Rosa!

Betxy

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

Anónimo

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>

Betxy

muchisisisimas gracias rosa ya lo he hecho
;)

Anónimo

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?

Anónimo

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. :(

Anónimo

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

Anónimo

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

Anónimo

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!...

Anónimo

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

Publicar un comentario

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.

:) :(( :( :P :D :$ ;) :I :X :O |O :S