martes, 19 de febrero de 2013

Tutorial de Blogger - Colocar imagenes en dos columnas


Bueno, como aporte para el proyecto Intercamblogs, dejo un tutorial para poner imagenes en dos columnas. Esto se usa mayormente para poner aquellas que enlazan a otros blogs, siendo una buena forma de aprovechar el espacio dividir en dos columnas. Bien, empieza la explicación:

Vamos al escritorio y seleccionamos Diseño, allí tendrás que hacer click en elegir gadget. Te saldrá una ventana emergente, tendrás que buscar la que se llama HTML/Javascript.


Agranda esta, que no se ve...


Ahora llega la parte medio chunga, pero intentare explicarlo de la mejor forma posible. En primer lugar, tan solo en caso de que no sepáis insertar una imagen con elcae, os lo explico a continuación.

2.1º Para insertar una imagen que enlace a otra web, hay que copiar lo siguiente:

<a href="http://darlantan8.blogspot.com.es/"><img border="0" height="31" width="88" src="http://i1054.photobucket.com/albums/s496/Darlantan8/darlantan.gif" /></a>  

Lo que esta de naranja es el link a la imagen y el que esta en azul el enlace a la web.  Height es la altura de la imagen y width el ancho, modifica estas dos ultimas para ajustarla a tu blog (sin quitar ni el igual ni las comillas), pero no olvides mantener las proporciones (para eso yo utilizo el paint XD)

Volviendo  a HTML/Javascript, copia y pega lo siguiente:

<div style="float: left; width: 45%">texto/imagen-columna-izquerda</div><div style="float: right; width: 45%">texto/imagen-columna-derecha</div><div style="clear: both"></div> 

Una vez pegado lo anterior, hay que sustituir los textos en verde por los enlaces de las imagenes, mientras pegueis una detrás de otra justo después del último ">" de cada imagen no debería haber problema. No olvideis que la anchura de las dos imagenes juntas no ha de superar la de la columna, sino se saldrá de la misma.


Así es como debería quedar (notareis que es el mismo blog, es que soy muy vago, lo siento XD), compobad que la imagen y el link asociados son los correctos, yo me suelo confundir.


Ya esta. Bueno, esto también puede utilizarse para poner imagenes sin enlace o textos, tan solo hay que cambiar lo que va en la zona coloreada de verde.

Espero que os haya ayudado y si tenéis alguna duda o problema, con gusto os responderé e intentare solucionarla, dentro de mis limites XD Aprovecho para decir que no se añadir una tercera columna, si aprendo a meterla ampliare la entrada.

Algún día intentare hacer otro tutorial sobre algo, pero ahora no se me ocurre de que, mis conocimientos no son demasiado extensos. Pues eso...

¡Hasta la próxima! XD

No hay comentarios:

Publicar un comentario

¡Que el Dios de Babilonia bendinga tu mensaje!