Imagenes en Blogger (parte 1)

La mayoría de los usuarios de Blogger manejan las imágenes de una manera sencilla y concisa, ¿pero que pasa con los que van iniciando?..

Algunos no saben porque apareció tal código o para que usar tal parámetro, y la verdad siendo sincero si no conoces por lo menos un poco del lenguaje HTML te sientes perdido en la infinidad del cosmos xD..

La idea de este post no es enseñar a usar HTML a la perfección, es solo para dar una pequeña ayuda al momento de subir una imagen de nuestro ordenador a Blogger, y así poder manejar el código que ofrece Blogger como si fuera cosa de este mundo..

¿Pero como subo una imagen?

Esa es una pregunta muy sencilla, si lo que pretendemos es subir una imagen que esta alojada en nuestro ordenador lo único que tenemos que hacer como primer paso es crear una entrada en nuestro blog o entrar a una ya creada. Cuando estemos dentro haremos click sobre el pequeño icono llamado Añadir Imagen..

Nos saldrá una cuadro como el que se encuentra a continuación..


Click aqui para ampliar

Para empezar a subir la imagen damos click sobre Examinar, después solo buscamos la imagen que queramos subir, ya que la hayamos elegido tenemos que elegir un diseño y el tamaño de la imagen..

Analicemos la opción Diseño de la imagen..

Si elegimos Izquierda la imagen estará ocupando el lado izquierdo del texto que agreguemos si elegimos Derecha ocupara el lado derecho y Centrar simplemente pondrá la imagen en el centro..

Tamaño de la imagen..

Es una opción muy sencilla, si quieres una imagen pequeña elige esa opción si eliges grande la imagen quedara en su tamaño original...

Ya que hayamos elegido diseño y tamaño hacemos clik en Subir y esperamos a que nuestra imagen sea cargada correctamente..

El momento de espera es mínimo, damos click en Finalizado y en realidad eso es todo ya hemos subido una imagen a Blogger :)..


Pero espera..Me ha salido un código extraño, ayúdame a entenderlo¡

Es muy sencillo, el código que te ha aparecido es muy parecido al siguiente..

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URLDELAIMAGEN">
<img style="float:left; margin:0 10px 10px 0;
cursor:pointer; cursor:hand;"
src="URLDELAIMAGEN"border="0" alt=""></a>

En el código lo que esta de color rojo nos servirá para abrir la imagen en la misma ventana, esta parte del código muy pocas veces es utilizada, no habrá problema si la omitimos en esta ocasión..

Ahora lo que esta marcado de azul son las propiedades que de alguna manera podemos analizar, modificar o eliminar..

Comencemos con la primera:

MARGIN: Los valores 0 10px 10px 0 indican pos pixeles entre la distancia de la imagen y texto en el siguiente orden.. arriba, derecha, abajo. o izquierda. Estos valores también los podemos modificar o hacer algunas pequeñas pruebas con ellos antes de decidir..

CURSOR: En este caso el valor que se encuentra es hand, esto quiere decir que se mostrara una mano al pasar el puntero por la imagen..

BORDER: A esta propiedad podemos agregar el valor que queramos por ejemplo 1, 2, en fin el que nosotros queramos..

ALT: Dentro del código no tiene valor alguno, en todo caso servirá para agregar un texto alternativo a la imagen..(muy recomendado)

Y por ultimo no menos importante la propiedad STYLE a la cual no marcamos en el código, dentro de style se encuentra float que nos servirá para acomodar el texto, este cuenta con tres valores específicos que son: left. right o none estos a su vez se utilizan para alinear a la derecha o izquierda..

¿Podré agregar otros atributos a la imagen?

Existen muchos atributos compuestos en las imágenes pero eso lo veremos en la segunda parte de este pequeño tutorial :)..


Entradas relacionadas

Como subir y agregar un video a Blogger..
Insertar archivos SWF en Blogger..
El ultimo deseo de un Blogger..
Como agregar bordes directamente a las imagenes..
IE6, Un problema para los diseñadores y bloggers