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:
Elaboré una sencilla forma para conseguir lo que ves en la imagen de arriba, por lo que en unos pocos pasos habrás terminado.
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:
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.
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.
Interesante Jaime... Yo suelo añadirle el comentario con mi programita editor de imágenes, pero me parece muy interesante.
Un besoteeeeeeeeeeeeeee
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,
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,
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,
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.
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 ;).
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!
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
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.
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?
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!
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???
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.
aawww :( que lástima que no se pueda.... Bueno, pero gracias por tu respuesta tan rápida!!!
Saludos ;)
Gio
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!!!
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 ;).
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.
Gracias!!! :D
Gio, concretamente el lunes a medio día podrás disfrutar del nuevo truco. ¡Abrazos!
Hola Jaime !!.Muy bueno este post y la 2da parte tambien !!!
Es un merengue esto de ubicar texto + imagen como querramos !!!!...
Gracias !!!
Cómodo y efectivo, Gra, ya que más de una vez nos apetece describir una imagen. Me alegra que te gusten ambos.