Es muy común que tengamos enlaces externos en las entradas, algunas veces para dar referencia de alguna información que sirva de respaldo a lo que escribimos, para dar los créditos sobre una imagen o información que encontramos en una página, o bien para dar referencia de un sitio de descarga, etc.
Anteriormente, les había hablado un poco sobre el uso del tooltip, y como este puede ayudar a dar información extra o adicional sobre un enlace, y en el caso de los enlaces externos, es muy útil, ya que podemos avisar al usuario que al hacer click sobre este, va ir a otra página. Para completar la misión hoy les voy a decir la manera en que pueden personalizar los enlaces externos por medio de un icono, para que sea evidente que es un enlace externo, y usaremos este:
¿Recuerdan que el otro día les hablaba un poco sobre las clases, y como estas pueden ser muy útiles para aplicar estilos de manera ilimitada a cualquier elemento en nuestro blog?, pues ahora necesitaremos usar una clase, para que nuestros enlaces externos puedan tener el susodicho icono.
Entonces veamos paso a paso como aplicarlo:
Paso 1. Vamos a Diseño ► Diseñador de Plantillas ► Avanzado ► Añadir CSS y agregamos ahí este código CSS, o si lo prefieres, puedes pegarlo antes en una nota de tu computadora para editarlo, según tu gusto y necesidad...
También hemos creado efecto hover en el enlace, (cuando pasamos el ratón encima del enlace) .Tu puedes personalizar los colores a tu gusto y necesidad, puedes usar esta tabla de colores.
Paso 2. Luego, guarda los cambios en APLICAR AL BLOG.
Paso 3. Ahora, para poner en acción la clase que hemos creado, cada vez que escribamos una entrada y tengamos un enlace externo (creado nuestro enlace con la herramineta de Enlace que dispone Blogger), vamos a Edición de HTML de la entrada y buscamos el código de nuestro enlace:
<a href="Mi_enlace">El texto de mi enlace</a>
Luego, nos ubicamos después de la etiqueta a y escribimos la clase externo que creamos, dejando un espacio antes y después de esta; también aprovechando que estamos ahí, agregamos un tooltip, (usando el atributo title) entonces, nuestro código quedaría así:
...y así lo haremos cada vez que necesitemos aplicarlo a un enlace externo.
El resultado o demostración, ya lo habrás notado en mi blog.
Funciona en todos los navegadores incluyendo IE6.
Espero sea útil, siéntete libre de comentar cualquier duda o compartir otra idea que pudiera ayudar a mejorar nuestro blog :)
Que tengan un estupendo fin de semana!
Anteriormente, les había hablado un poco sobre el uso del tooltip, y como este puede ayudar a dar información extra o adicional sobre un enlace, y en el caso de los enlaces externos, es muy útil, ya que podemos avisar al usuario que al hacer click sobre este, va ir a otra página. Para completar la misión hoy les voy a decir la manera en que pueden personalizar los enlaces externos por medio de un icono, para que sea evidente que es un enlace externo, y usaremos este:
¿Recuerdan que el otro día les hablaba un poco sobre las clases, y como estas pueden ser muy útiles para aplicar estilos de manera ilimitada a cualquier elemento en nuestro blog?, pues ahora necesitaremos usar una clase, para que nuestros enlaces externos puedan tener el susodicho icono.
Entonces veamos paso a paso como aplicarlo:
Paso 1. Vamos a Diseño ► Diseñador de Plantillas ► Avanzado ► Añadir CSS y agregamos ahí este código CSS, o si lo prefieres, puedes pegarlo antes en una nota de tu computadora para editarlo, según tu gusto y necesidad...
.post-body a.externo {En el código anterior, hemos creado la clase a la que hemos identificado como externo, y esa es la manera en la que vamos a identificar los enlaces externos de las entradas cada vez que queramos aplicar los estilos a dichos enlaces.
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtVDbDFZ6K0p0UZNa7F6mUlPNv4xePI9-yHMiwyipnuvOqm7j2zA21B-uklBSiyzziM97dwm4sRAXxgHF54CyNmcLr9L68HVflSjy4l0DYc4eL-2ggcjHjeIxCm44IU_Ozp3PJCxq0j476/s1600/link-externo-post.gif) no-repeat right center;
padding-right: 16px; /*le damos padding a la derecha tomando en cuenta el ancho del icono*/
color:#61380B; /*el color de la letra del enlace*/
text-decoration: none;
}
.post-body a.externo:hover { /*para crear efecto hover en el enlace*/
color: #FF8000; /*aquí cambiamos el color de la letra*/
text-decoration: underline; /*subrayamos el texto*/
}
También hemos creado efecto hover en el enlace, (cuando pasamos el ratón encima del enlace) .Tu puedes personalizar los colores a tu gusto y necesidad, puedes usar esta tabla de colores.
Nota: Recuerda ubicarte después de cualquier llave de cierre } (por ejemplo) y dar enter, para que sea leído lo que has agregado. También si lo prefieres puedes agregar el código yendo a la edición de HTML de tu plantilla y pegarlo antes de ]]></b:skin> es lo mismo, con la diferencia de algunas algunas ventajas que les decía anteriormente.
Paso 2. Luego, guarda los cambios en APLICAR AL BLOG.
Paso 3. Ahora, para poner en acción la clase que hemos creado, cada vez que escribamos una entrada y tengamos un enlace externo (creado nuestro enlace con la herramineta de Enlace que dispone Blogger), vamos a Edición de HTML de la entrada y buscamos el código de nuestro enlace:
<a href="Mi_enlace">El texto de mi enlace</a>
Luego, nos ubicamos después de la etiqueta a y escribimos la clase externo que creamos, dejando un espacio antes y después de esta; también aprovechando que estamos ahí, agregamos un tooltip, (usando el atributo title) entonces, nuestro código quedaría así:
<a class="externo" href="Mi_enlace" title="mi descripción del enlace">El texto de mi enlace</a>
...y así lo haremos cada vez que necesitemos aplicarlo a un enlace externo.
El resultado o demostración, ya lo habrás notado en mi blog.
Funciona en todos los navegadores incluyendo IE6.
Espero sea útil, siéntete libre de comentar cualquier duda o compartir otra idea que pudiera ayudar a mejorar nuestro blog :)
Que tengan un estupendo fin de semana!
No hay comentarios:
Publicar un comentario