Inserción de imágenes en el blog
Todos sabemos que el contenido principal de un blog se basa en el texto, pero las imagenes juegan un papel muy importante cumpliendo la función del aspecto en una entrada, así como algunos otros que debemos tener presente para que estas sean útiles.
Entremos al editor de entradas, lo mas conveniente es que sea una entrada nueva en forma de borrador, en modo redactar buscamos el icono de una pequeña imagen azul, ese es el icono con el que insertaremos una imagen, damos clic sobre el para llevar a cabo esta acción.
Al dar clic sobre el icono aparece una ventana emergente, donde al lado izquierdo tenemos una lista con un menú el cual nos permite elegir una imagen desde nuestro blog, desde uno de nuestros albums de Picasa, desde las fotos de nuestro teléfono o desde una URL. Cabe resaltar que cada vez que agregamos una imagen a una entrada de nuestro blog esta se guarda automaticamente en un álbum de Picasa.
Lo mas sencillo seria subir una imagen alojada en nuestro ordenador.
Parra subirla pulsamos el botón Elegir Archivos de esa manera buscaremos la imagen en nuestro disco duro, una vez que la imagen este subida aparecerá en miniatura, para incluirla en el editor del blog pulsamos el botón Añadir imagenes seleccionadas o simplemente damos doble clic sobre ella.
Si hacemos clic sobre la imagen, nos aparece junto a ella una especie de etiqueta de color azul que contiene algunas opciones, si hacemos clic en alguna de ellas podemos elegir el tamaño para nuestra imagen, ya se Pequeño, mediano, Grande, Extra grande y Tamaño original, este ultimo seria el mas recomendado si la imagen no excede en tamaño al espacio del contenido de nuestro blog, también podemos editar la posición, ya sea Alineada a la izquierda o a la Derecha del párrafo, en todo caso conviene que la imagen tenga el tamaño adecuado de acuerdo al texto para que esta no le reste importancia, por ello lo mas recomendable seria centrar la imagen, y por ultimo podemos añadir una leyenda en el pie de nuestra imagen con cualquier texto que deseemos.
Cuando una imagen es insertada dentro de cualquier entrada de nuestro blog, el editor reduce la imagen si esta es muy grande, presentando cuatro tamaños a elegir ya antes descrito, comente que lo mejor era dejarla en tamaño original si esta no sobrepasa el tamaño en cuanto al ancho del diseño del blog ya que si esto sucede la imagen invade la barra lateral del mismo.
Si lo queremos es personalizar el tamaño de la imagen a nuestro total gusto podemos editar el código de la imagen. Para esto con las opciones en la etiqueta azul dejemos la imagen en su Tamaño original, de esta manera la imagen no queda pixelada. Una vez que tenemos el tamaño original vamos al botón HTML para ver el código donde modificaremos los atributos width (ancho) y height (alto) como se ve en el código anterior el cual es el código que nos ofrece Blogger.
Si no conocemos el código HTML conviene conocer por lo menos lo básico de este lenguaje, ya que el código que nos ofrece Blogger para una imagen no cuenta con algunos atributos importantes.
Texto alternativo ALT. Toda imagen debe incluir un texto breve en forma de descripción, esto puede ser muy útil para que los buscadores puedan clasificar las imagenes, si no incluimos el atributo alt un buscador no puede saber que la foto es de un bosque si no se lo hemos indicado.
Eesta vez el atributo que se agrega para enlazar una imagen a cualquier pagina dentro o fuera de nuestro blog es diferente. Sin usar ningun tipo de codigo lo podemos hacer de forma rapida dentro del editor es suficiente con seleccionar la imagen para luego pulsar el icono de Enlace, y de esta forma agregamos la dirección a donde queramos que nos envié al dar clic en dicha imagen.
Si queremos aprender a realizarlo mediante código el HTML debemos revisar el código que nos ofrece Blogger, pues este ya tiene un enlace para abrir otra ventana donde se ve la imagen en tamaño completo, lo que haremos entonces sera sustituir ese enlace por otro.
El código es muy parecido a esto y esta enlazado a la imagen en tamaño original como se mostro con el reloj. Esto lo podemos notar de mejor manera revisando la etiqueta <a href
Si notan he agregado el atributo target="_blank" esto hará que al dar clic sobre la imagen se abra una nueva ventana para ir al enlace establecido sin este atributo el enlace se abre en la misma ventana.
Al final al usar este código podríamos tener algo como esto. Clic en la imagen para ver el ejemplo.
Como pueden ver agregar una imagen a el blog no es complicado, simplemente algunos códigos para personalizar de mejor manera de forma mas avanzada, pero eso lo veremos en otro tema.
Cabe mencionar que existen muchas fotografías con derechos de autor que no deben ser mostradas a la ligera, este blog trata de agregar logos siempre con la intensión de agregar un titulo para mostrar el dueño de dicha imagen. si alguien ve en este blog alguna imagen que le pertenezca o quiere que retire por derechos de copyright con gusto lo haré inmediatamente.
1. Como insertar imágenes en un blog de Blogger
Entremos al editor de entradas, lo mas conveniente es que sea una entrada nueva en forma de borrador, en modo redactar buscamos el icono de una pequeña imagen azul, ese es el icono con el que insertaremos una imagen, damos clic sobre el para llevar a cabo esta acción.
Al dar clic sobre el icono aparece una ventana emergente, donde al lado izquierdo tenemos una lista con un menú el cual nos permite elegir una imagen desde nuestro blog, desde uno de nuestros albums de Picasa, desde las fotos de nuestro teléfono o desde una URL. Cabe resaltar que cada vez que agregamos una imagen a una entrada de nuestro blog esta se guarda automaticamente en un álbum de Picasa.
Lo mas sencillo seria subir una imagen alojada en nuestro ordenador.
Parra subirla pulsamos el botón Elegir Archivos de esa manera buscaremos la imagen en nuestro disco duro, una vez que la imagen este subida aparecerá en miniatura, para incluirla en el editor del blog pulsamos el botón Añadir imagenes seleccionadas o simplemente damos doble clic sobre ella.
Si hacemos clic sobre la imagen, nos aparece junto a ella una especie de etiqueta de color azul que contiene algunas opciones, si hacemos clic en alguna de ellas podemos elegir el tamaño para nuestra imagen, ya se Pequeño, mediano, Grande, Extra grande y Tamaño original, este ultimo seria el mas recomendado si la imagen no excede en tamaño al espacio del contenido de nuestro blog, también podemos editar la posición, ya sea Alineada a la izquierda o a la Derecha del párrafo, en todo caso conviene que la imagen tenga el tamaño adecuado de acuerdo al texto para que esta no le reste importancia, por ello lo mas recomendable seria centrar la imagen, y por ultimo podemos añadir una leyenda en el pie de nuestra imagen con cualquier texto que deseemos.
Cuando una imagen es insertada dentro de cualquier entrada de nuestro blog, el editor reduce la imagen si esta es muy grande, presentando cuatro tamaños a elegir ya antes descrito, comente que lo mejor era dejarla en tamaño original si esta no sobrepasa el tamaño en cuanto al ancho del diseño del blog ya que si esto sucede la imagen invade la barra lateral del mismo.
Si lo queremos es personalizar el tamaño de la imagen a nuestro total gusto podemos editar el código de la imagen. Para esto con las opciones en la etiqueta azul dejemos la imagen en su Tamaño original, de esta manera la imagen no queda pixelada. Una vez que tenemos el tamaño original vamos al botón HTML para ver el código donde modificaremos los atributos width (ancho) y height (alto) como se ve en el código anterior el cual es el código que nos ofrece Blogger.
<div class="separator" style="clear: both; text-align: center;"> <a href="imagen.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="imagen.jpg" width="320" /> </a></div>Ls gran ventaja del editor es que si incluimos una imagen demasiado grande, este la reduce al agregarla a una entrada, y aunque esta se vea de tamaño menor al original al hacer clic sobre la imagen esta se abre en una misma venta mostrando sus verdaderas dimensiones, sin la terrible molestia de tener que ir a una pagina nueva y después regresar a la misma pagina como era un pasado. Véase aquí el ejemplo.
2. El código HTML de nuetra imagen
Si no conocemos el código HTML conviene conocer por lo menos lo básico de este lenguaje, ya que el código que nos ofrece Blogger para una imagen no cuenta con algunos atributos importantes.
Texto alternativo ALT. Toda imagen debe incluir un texto breve en forma de descripción, esto puede ser muy útil para que los buscadores puedan clasificar las imagenes, si no incluimos el atributo alt un buscador no puede saber que la foto es de un bosque si no se lo hemos indicado.
alt="descripcion-breve"Titulo TITLE. Es de forma importante incluir este atributo ya que con el se le da un titulo a la imagen, si la imagen cuenta con este atributo al pasar el cursor del mouse sobre dicha imagen aparece el texto que se ha escrito dentro del atributo, esto lo podemos comprobar aquí mismo si colocamos el cursor encima de la foto del reloj que se encuentra mas arriba en esta misma entrada.
title="titulo-de-la-imagen"Estos atributos por desgracia aun no los incluye Blogger por lo tanto debemos agregarlos nosotros de tal manera que estén junto al código por defecto de una imagen al ser agregada a una entrada, podemos ver el ejemplo de los códigos que se deben agregar al código en el ejemplo siguien. es conveniente poner alt a un lado de img y title al final del código, al menos de esa forma los utilizo en mis imagenes.
<div class="separator" style="clear: both; text-align: center;"> <a href="url-de-la-imagen.jpg" imageanchor="1"> <img alt="descripcion-breve" border="0" height="300" src="url-de-la-imagen.jpg" width="400" title="titulo-de-la-imagen" /></a></div>
3. Agregar un enlace en una imagen
Eesta vez el atributo que se agrega para enlazar una imagen a cualquier pagina dentro o fuera de nuestro blog es diferente. Sin usar ningun tipo de codigo lo podemos hacer de forma rapida dentro del editor es suficiente con seleccionar la imagen para luego pulsar el icono de Enlace, y de esta forma agregamos la dirección a donde queramos que nos envié al dar clic en dicha imagen.
Si queremos aprender a realizarlo mediante código el HTML debemos revisar el código que nos ofrece Blogger, pues este ya tiene un enlace para abrir otra ventana donde se ve la imagen en tamaño completo, lo que haremos entonces sera sustituir ese enlace por otro.
El código es muy parecido a esto y esta enlazado a la imagen en tamaño original como se mostro con el reloj. Esto lo podemos notar de mejor manera revisando la etiqueta <a href
<div class="separator" style="clear: both; text-align: center;"> <a href="imagen.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="imagen.jpg" width="320" /> </a></div>El código que debemos sustituir es todo lo que se encuentra dentro de <a href=" ">, y entonces al quitarlo agregamos la dirección URL a la que queramos ser enlazados, por ejemplo podemos cambiar esto por alguna dirección de YouTube para mirar algún vídeo que nos interese. por ejemplo http://youtu.be/-dnIU1Ip5Vs entonces podría mirarse como el ejemplo siguiente.
Si notan he agregado el atributo target="_blank" esto hará que al dar clic sobre la imagen se abra una nueva ventana para ir al enlace establecido sin este atributo el enlace se abre en la misma ventana.
<div class="separator" style="clear: both; text-align: center;"> <a href="http://youtu.be/-dnIU1Ip5Vs" target="_blank"> <img border="0" height="240" src="imagen.jpg" width="320" /></a></div>
Al final al usar este código podríamos tener algo como esto. Clic en la imagen para ver el ejemplo.
Como pueden ver agregar una imagen a el blog no es complicado, simplemente algunos códigos para personalizar de mejor manera de forma mas avanzada, pero eso lo veremos en otro tema.
Cabe mencionar que existen muchas fotografías con derechos de autor que no deben ser mostradas a la ligera, este blog trata de agregar logos siempre con la intensión de agregar un titulo para mostrar el dueño de dicha imagen. si alguien ve en este blog alguna imagen que le pertenezca o quiere que retire por derechos de copyright con gusto lo haré inmediatamente.
Suscribirse a:
Enviar comentarios (Atom)
0 comentarios:
Publicar un comentario