Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Descripción en las imágenes del blog

Algo que normalmente solemos hacer en las entradas de nuestro blog es mostrar imágenes y, en muchos casos nos gusta agregar una pequeña descripción a éstas para hacer el artículo más interesante.

Esta entrada te ayudará a elaborar una "casilla de descripción" en donde podrás meter una imagen con sus respectivas palabras:

Descripción en las imágenes del blog


Elaboré una sencilla forma para conseguir lo que ves en la imagen de arriba, por lo que en unos pocos pasos habrás terminado.


Diseño>Edición HTML>expandimos artilugios





Busca la etiqueta ]]></b:skin> y encima añade este bloque de CSS que dará estilo a la casilla:

div.imgdescripcion {
background-color: #ffffff;
font-size:12px;
margin-bottom:12px;
margin-top:12px;
overflow:hidden;
padding:4px !important;
border:1px solid #cccccc;
text-align:center;
}

Puedes editar varias cosas:

background-color: #ffffff; es el color de fondo (blanco en este caso). Cambia #ffffff por el código de tu color preferido [+].

font-size:12px; es el tamaño del texto. Aumenta o disminuye la cifra (12) para cambiarlo.

border: 1px solid #cccccc; es el borde. Para editar el grosor, aumenta o disminuye la cifra (1). Para editar el estilo cambia solid por dashed (lineal) o dotted (punteado). Para cambiar el color sustituye #cccccc (gris) por el código de tu color favorito [+].

text-align:center; es la alineación del texto. Reemplaza center por left para alinearlo a la izquierda o por right para alinearlo a la derecha.

Una vez hayas terminado, guarda la plantilla:




Ahora dirígete a la entrada en la que deseas añadir una imagen con su respectiva descripción.

Pega este código:

<div style="width: 200px;" class="imgdescripcion"><img width="200" height="130" src="URL DE LA IMAGEN" alt=""/>
AQUÍ EL TEXTO
</div>

Y reemplaza URL DE LA IMAGEN por la dirección de la imagen, así como AQUÍ EL TEXTO por la descripción.

Ten en cuenta que puedes configurar el tamaño de la casilla en la línea style="width: 200px;", así como el de la imagen en width="200" (anchura) y height="130" (altura).

Es aconsejable que el ancho de la imagen sea el mismo que el de la casilla (en este caso es de 200 x 200 píxeles).

Notas:

Para que no tengas que copiar las líneas de código cada vez que desees hacer uso de la casilla puedes utilizar la plantilla de entrada que ofrece blogger [+].

Si deseas que la casilla de la imagen aparezca centrada en el post añade los atributos <center> y </center> al principio y al final del código.

ellobo dice...

Gracias Jaime.
Lo del tipo de letra es que en algunas me aperece de un tipo y en otras de otro tipo diferetne, sin tocar nada. E incluso en algunas entradas, el primer párrado es diferente a los siguiente como pasa en esta entrada: http://udalmeriaellobo.blogspot.com/2010/01/almeria-1-0-xerez.html
Saludos.

Laube dice...

Interesante Jaime... Yo suelo añadirle el comentario con mi programita editor de imágenes, pero me parece muy interesante.
Un besoteeeeeeeeeeeeeee

Nieves dice...

Muchísimas gracias por tu entrada de hoy Jaime y estoy encantada de que me hayas leído la mente o de que hayamos tenido una especie de telepatía bloggera, empezaré a practicarlo ahora mismo. Y seguro que te seguiré preguntando más cosillas y leyendo tus posts con mucho interés para ir aprendiendo un poquito más cada día. ¡Espero que los Reyes se hayan portado muy bien contigo! Saluditos,

Nieves dice...

Hola Jaime, te he dejado antes un comentario pero parece que no se ha recogido. Quería decirte que muchas gracias por tu entrada de hoy y que estoy encantada de haberte leido el pensamiento o de que hayamos tenido una especie de telepatía bloguera. Intentaré aplicarlo lo antes posible. Y con tu permiso ya te iré preguntando alguna cosilla más, dados tus amplios conocimientos en este mundo. Por cierto ¿sabes de algún contador de visitas online que sea gratis, que no sea demo para luego tener que pagar? ¿y que dé una información útil y real? ¡Espero que los Reyes se hayan portado muy bien contigo! Un saludito,

Nieves dice...

Muchas gracias Jaime, me alegro de haberte leido el pensamiento o de haber tenido una especie de telepatia bloggera, lo aplicaré lo que cuentas en la entrada en cuanto tenga la primera ocasión y con tu permiso, te seguiré preguntando cosillas, ya que veo que eres todo un experto. Tengo otra curiosidad ¿dónde se puede conseguir un contador de visitas online que sea gratis y con información completita y que no sea una demo que luego tengas que pagar? ¡Espero que los Reyes se hayan portado muy bien contigo! Saluditos,

Jaime Trujillo Escobedo dice...

ellobo, prueba a realizar lo siguiente:

Diseño>Edición de HTML

Busca el bloque:

.post p {
line-height:1.6em;
margin:0 0 0.75em;
}

Y cambia 1.6 por 1.3.

Jaime Trujillo Escobedo dice...

Laube, yo también hago uso de programas para "firmar" las imágenes (sobre todo las fotografías de animales o plantas).

De todas formas, también puede resultar útil el poder añadir una breve descripción (estilo Wikipedia ;).

Jaime Trujillo Escobedo dice...

Hola Nieves! Verás, todos tus comentarios han sido publicados. Te comento que en El Balcón, los comentarios llegan a mi panel antes de publicarse.

Me gustó eso de telepatía bloggera ;).

En cuanto al contador... te dejo con dos opciones:

1) Utilizar la web Histats, en la que tienen una gran variedad.

2) Utilizar un contador que construí hace tiempo. Puedes verlo en esta entrada.

¡Abrazos!

Khyronthell dice...

Jaime amigo mio!! tanto tiempo!!! casi un añño que no ando por estos lados juas!! de hecho habia dejado de lado todo pero .. eso ya es historia jaja estoy haciendo cambios al blog.. puse el menu flotante y quedo bien!! ahora lo que quisiera es que quede en la parte de arriba, justo despues de la imagen que tengo por titulo y obvio, configurara cada boton.. bieno espero te pases y lo veas.. abrazo

ellobo dice...

Mil gracias Jaime. Ahora todo ha vuelto a la normalidad.
Eres una máquina. Como me gustaría manejar ésto aunque sea la mitad de como lo haces tú...
Por cierto el apartado de perros me es de gran ayuda.
Saludos.

Jaime Trujillo Escobedo dice...

Khyronthell, ¡es verdad! encantado de volver a tenerte por aquí.

Te comento que no logré ver el menú en tu blog :S. Lo que dices es muy sencillo, para colocarlo arriba simplemente haz lo siguiente:

#menuflotante {
float:left;
width: 1256px;
padding: 3px;
background:transparent url(http://1.bp.blogspot.com/_blABMJBbYJs/SqMHAWryvrI/AAAAAAAAGsY/BTtJWVael5E/S1600-R/0.jpg) repeat-x scroll left top;
position:fixed;bottom:0px;
height:23px;
}

Cambia bottom:0px por top:0px.

En cuanto a lo de configurar cada botón... ¿A qué te refieres?

Jaime Trujillo Escobedo dice...

Mil gracias a ti por comentar, ellobo ;). Ya verás que con el tiempo podrás entender los códigos y crear tus propios trucos.

Según leo en tu perfil, eres amante de los animales ^^, al igual que yo.

¡Abrazos!

Gio dice...

Hola Jaime... Excelente truco!!! Planeo utilizarlo en mi siguiente entrada ;)

Sólo que tengo una pequeña pregunta, no he logrado colocar dos imágenes una al lado de la otra, así como en esta entrada:
Ejemplo
Pero agregando este truco para comentar...
Se puede???

Jaime Trujillo Escobedo dice...

Hola Gio! Me temo que lo que dices no puede hacerse ya que al poner la descripción, añadimos un div con unas propiedades de ancho y alto, lo que provoca que cada "recuadro" sea único y se centre.

Pero no te preocupes, en estos días publicaré trucos relacionados con la posición y el tamaño de las imágenes en blogger :D.

Gio dice...

aawww :( que lástima que no se pueda.... Bueno, pero gracias por tu respuesta tan rápida!!!

Saludos ;)
Gio

varech dice...

Jaime, otra vez estoy aquí. Es que siempre encuentro algo para poder arreglar un poquillo.
Este truco podría ponerlo en las dos fotos que tengo en la sidebar? Es que me queda un poco feucho abajo.
Ten paciencia, que ya me queda menos.
Un besazo!!!

Jaime Trujillo Escobedo dice...

Gio, ¡Problema solucionado! En muy poco tiempo podrás ver la entrada en la que explico la manera de modificar y alinear a nuestro gusto el recuadro con la descripción de las imágenes ;).

Jaime Trujillo Escobedo dice...

Varech, al igual que le comenté a Guio, tengo una entrada preparada en la que explico todo acerca de la personalización de este mismo truco.

Gio dice...

Gracias!!! :D

Jaime Trujillo Escobedo dice...

Gio, concretamente el lunes a medio día podrás disfrutar del nuevo truco. ¡Abrazos!

Gra dice...

Hola Jaime !!.Muy bueno este post y la 2da parte tambien !!!
Es un merengue esto de ubicar texto + imagen como querramos !!!!...
Gracias !!!

Jaime Trujillo Escobedo dice...

Cómodo y efectivo, Gra, ya que más de una vez nos apetece describir una imagen. Me alegra que te gusten ambos.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo