Cómo colocar imágenes en Blogger - Google+

Recuerden que en Blogger no hay necesidad de usar un servidor para guardar nuestras imágenes, ya que toda imagen que se suba a través de Blogger irá directamente al Álbum de nuestra cuenta en Google+, de tal forma que solo hay que fijarse en el link de la imagen y guardarlo para usarlo en próximos trabajos.

Hay dos formas para conocer el link de la imagen, la primera, haciendo clic sobre la imagen una vez terminada la entrada, lo cual nos mostrará unicamente la imagen pudiendo copiar el link de la barra de dirección, y la segunda, que es la que más me gusta, es mirarlo cuando todavía estamos creando la entrada pero ya subimos la imagen, y esto se logra pasando al modo "HTML" lo cual nos permite ver y manipular los links de la imagen; recuerden que el primero es el que redirecciona y entonces ese lo podemos cambiar por la URL de la entrada o la dirección que queramos a la que se vaya al hacer clic sobre la imagen, ejemplo:

Vista en modo HTML de una imagen centrada

<div class="separator" style="clear: both; text-align: center;">
<a href="Link de imagen que redirecciona" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="90" src="Link de la imagen para mostrarla" width="90" /></a></div>

De esta forma, pasamos a vista en modo HTML, copiamos el código de la imagen en una hoja, y solo tendremos que cambiarle el link que redirecciona o de acceso para futuros usos que le vayamos a dar a la imagen.

A veces las imágenes no muestran el width="###" (ancho) y el heigth="###" (alto) y es importante incluirlo si queremos que los navegadores carguen más rápido una imagen.

Recuerden que para que la imagen se abra en otra pestaña o ventana se debe agregar el código: target="_blank" después del link que redirecciona.

También recuerden que al código de la imagen se le pueden agregar los atributos title="***" y alt="***" con los cuales podremos hacer visible un texto cuando el puntero del mouse/ratón pase sobre la imagen; por lo general se ubican después del <img

Un ejemplo para mostrarles la ubicación de lo anterior.

<div class="separator" style="clear: both; text-align: center;">
<a href="Link de imagen que redireccionatarget="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="90" title="texto descriptivoalt="texto descriptivo" src="Link de la imagen para mostrarla" width="90" /></a></div>

Si no quisieramos que la imagen redireccione al hacer clic sobre ella, dejamos solo lo siguiente:

<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="90" title="texto descriptivoalt="texto descriptivo" src="Link de la imagen para mostrarla" width="200" /></div>

Lo que se hizo fue retirar el <a href=""> y el </a> que lo cerraba.


Espero que esta información les sea de utilidad.

Gracias.