Etiquetas

sábado, 8 de enero de 2011

Enlaces en nueva ventana y en imágenes

Hay un par de cosas que echo a faltar en el editor de Blogger y creo que son importantes fallos:
  1. Poder elegir si los enlaces se abren en la misma ventana o pestaña del navegador o en otra aparte.
  2. Poner enlaces en imágenes de forma fácil.
Ambas cosas se podría haber añadido de forma gráfica en el editor de entradas, pero por ahora la única forma que hay de hacerlo es desde la "Edición de HTML" y hay que aprender un poquito del mismo.
1.- Por defecto los enlaces se abre en la misma ventana del navegador y tienen esta forma en HTML:

<a href="http://www.ENLACEdelaPAGINA.com" >Texto mostrado en el enlace </a>

Para que se abran en otra ventana de forma que no perdemos la ventana del blog, debemos añadir  target="_blank" de la siguiente forma:

<a href="http://www.ENLACEdelaPAGINA.com" target="_blank">Texto mostrado en el enlace </a>

2.- Para poner una imagen con un enlace: primero ponemos normalmente el enlace y a continuación la imagen desde el editor, el resultado en este ejemplo será:
Si pasamos a "Edición de HTML" veremos el código correspondiente:

<a href="http://www.google.es/">Google</a>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSlDCVRMba-qZTl-1mdIDb04vtSAiR92omFgaqhL9pSW5TSB-K39422L8rrKC1yF6jcyMZe1oEw0Bvdz5eVps-cV7jfoel_wvj0rSJz4ZX-yONCOkbHqT7rFHpmbMudsp4ZHihkQauToA/s1600/ico-google.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSlDCVRMba-qZTl-1mdIDb04vtSAiR92omFgaqhL9pSW5TSB-K39422L8rrKC1yF6jcyMZe1oEw0Bvdz5eVps-cV7jfoel_wvj0rSJz4ZX-yONCOkbHqT7rFHpmbMudsp4ZHihkQauToA/s1600/ico-google.jpg" /></a></div>

Ahora copiamos el código de inserción de la imagen que he puesto en negrita <img border="0".......jpg"> y lo lo pegamos en lugar del texto del enlace (Google en nuestro ejemplo) y quedaría  del siguiente modo:

<a href="http://www.google.es/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSlDCVRMba-qZTl-1mdIDb04vtSAiR92omFgaqhL9pSW5TSB-K39422L8rrKC1yF6jcyMZe1oEw0Bvdz5eVps-cV7jfoel_wvj0rSJz4ZX-yONCOkbHqT7rFHpmbMudsp4ZHihkQauToA/s1600/ico-google.jpg" /></a>

El resto del código desde <div class.....> hasta </div> lo podemos borrar y además, he añadido el  target="_blank" para que se abra en una ventana aparte.
El resultado es la imágen con el enlace:

No hay comentarios:

Publicar un comentario

Lista de blogs

Seguidores