45

Imagen de fondo en las entradas del Blog




Puedes poner una imagen de fondo en una entrada de tu blog para poder escribir encima de la imagenes como estas viendo en esta misma entrada, usando una tabla (table):
Crea una entrada nueva en el blog, en el modo HTML pega este código:

<table bordercolor="#000000" cellspacing="0" cellpadding="0" width="100%" background="URL_DE_IMAGEN" border="0"><tbody><tr><td><p>Texto Aquí</p></td></tr></tbody></table>

Para poner la imagen que tu quieras entras a cualquier página de Internet y cuando veas la imagen que te gusta, haz click con el botón derecho sobre ella, eliges "guardar imagen como" después la subes a internet en cualquier pagina de alojamiento gratuito o en el mismo Blogger y copias la url de la imagen.

Esa Dirección (URL) tienes que sustituirla en el código anterior por "URL_DE_IMAGEN"
Donde pone "Texto aquí" escribes tu entrada, la imagen se irá expandiendo según vas escribiendo el texto.

Si quieres que la imagen y, por tanto, tu entrada aparezca dentro de un cuadro, sustituye en el código donde dice "border=0", el cero por el ancho de borde que quieras.
Queda chula, ¿no os parece?

Entradas Relacionadas:

45 comentarios:


Zoa

Muy bueno el blog! Enhorabuena!!

Anónimo

Mil gracias Zoa!!

Azul...

¡Qué lindo Escaparate! y qué linda su autora que comparte con todos y de manera altruísta, sus conocimientos a esta gente de madera -yo la primera- que se da de tortas hasta que llega a aprender cómo ponerle cositas nuevas a su humilde blog

¡Aplausos!

Anónimo

Gracias azul! Te he visitado y me ha gustado mucho tu blog. Volveré seguro. Un abrazo.

AM

Hey qué excelente este dato!
felicidades, muy buen blog!
saludos.

pitima

Rosa, me hace ilusión poder añadir el texto de mi entrada sobre una imagen... ¡pero no lo consigo!, sólo se vé el texto como siempre, como si no añadiese ninguna imagen y no se me ocurre qué hago mal. He buscado en otros blogs de ayuda, pero siempre el mismo resultado, o se queja del código, o no sale la imagen directamente... ¡qué frustración!. ¿Algún consejo? Mil gracias por la ayuda.

Anónimo

Pitima, ¿quieres que todas tus entradas tengan la misma imagen o solo algunas entradas determinadas?

Si es lo primero (poner fondo a todas las entradas) no tendría porque surgir ningún problema...si es lo segundo (como en este post) podría ser que a Blogger le diera por rechazar el código...

Tu dirás...

pitima

no, a todas no, quiero poner una de mis imagenes de fondo en la entrada que yo quiera. Probé con alojarla en blogger, probé con varias, todas .jpg, y probé también alojándola en otro sitio, pero ni con esas... No son muy grandes, están comprimidas, ni tampoco pequeñitas.. no sé que puede ser. Lo que me pasa es que no sale la foto..

Anónimo

Pitima, el tamaño de la imagen es indiferente, si es muy grande no se verá completa, ya que se adapta al tamaño del post, por lo demás no afecta.

Vamos a hacer una cosa, te pongo aquí el código con una imagen y un poema infantil, es decir, tal como se haría para una entrada nueva, lo copias, creas una entrada nueva y pegas el código tal cual está, así verás mucho más fácil como has de hacerlo...

<table bordercolor="#000000" cellspacing="0" cellpadding="0" width="100%" background="http://www.zonagratuita.com/imagenes/fondos_web/fondos_web-claros/9.jpg" border="0"><tbody><tr><td><p>
Mariposa

Mariposa del aire,
qué hermosa eres,
mariposa del aire
dorada y verde.
mariposa del aire,
¡quédate ahí, ahí, ahí!...
No te quieres parar,
pararte no quieres.
Mariposa del aire
dorada y verde.
Luz de candil,
mariposa del aire,
¡quédate ahí, ahí, ahí!...
¡Quédate ahí!
Mariposa, ¿estás ahí?</p></td></tr></tbody></table>

pitima

Bien, perfecto, pero en cuanto cambio la foto, la dirección de la imagen, se va al traste y no muestra el fondo ¿¿¿¿????

Anónimo

Pitima, pon aquí la dirección de tu imagen, por favor.
Ah, supongo que la estás poniendo como ahí, entre comillas...

pitima

Rosa, perdona, me tuve que ir y te dejé con el comentario colgada... Estuve probando y creo que ya lo tengo, que el problema debía ser con el almacenamiento. Abrí album en Picasa y parece que ahora va bien. Gracias otra vez. Aprendo un montón contigo. Hasta mi próximo quebradero de cabeza.. jaja. aisss.

Anónimo

Saludos Rosa. Muchas gracias por contestarme el otro día a cerca de cómo cambiar el publicar en, por publicar a las :) Ha sido muy fácil, y además he descubierto una parte del blog que no conocía.

Ahora tengo un problemilla con el que a lo mejor me podrías ayudar. Verás, he puesto una imagen de fondo a las entradas de mi blog: http://davidtroyagalvez.blogspot.com Pero como también he añadido unos márgenes, la imagen no ocupa esos márgenes y se me queda alrededor un marco blanco que me gustaría que fuera ocupado por la imagen.

¿Qué podría hacer?

Muchas gracias, siempre acabo visitando tu blog, será porque está cuidado hasta el mínimo detalle, y se nota el buen hacer ;)

Saludos, David

MARGA'S HAPPY CRAFTS

Hola Rosa,
He efectuado un restiling en mi blog, y quisiera que todas las entradas tuvieran la misma imagen, en lugar de los colores que me permite la plantilla.
He estado probando con esta opción, pero me queda espacio en color rosa en la parte exterior de la entrada.
No se puede cambiar algún codigo en la plantilla para poner una imagen que ocupe toda la entrada.
Muchas gracias.

Anónimo

MARGA, busca esto en tu plantilla:
.post {
border:2px solid #99C9FF;
padding-left: 10px;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
background: #FF6FCF;
}
Y en el background añades la imagen de fondo:
.post {
border:2px solid #99C9FF;
padding-left: 10px;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
background: #FF6FCF url(la url de la imagen aqui);
}

MARGA'S HAPPY CRAFTS

Mil gracias Rosa, eres la mejor.
Con tus instrucciones cualquiera puede tener un blog precioso.

Talin

Hola Rosa
Cuando publico 2 ó más fotos (imágenes) en una entrada, la última que descargas siempre sale como primera. Si ya he escrito un texto siempre me sale encima del todo. Aun no he encontrado cómo hacer para posicionar la foto en el lugar correcto a la hora de descargarla, sin tener que borrar todo y empezar cada vez desde cero si ya tengo algo publicado.
¿Cuál es el truquillo?
Gracias y saludos -Talín

MARGA'S HAPPY CRAFTS

Talin, a mi me pasa lo mismo, yo lo que hago es arrastrar la imagen hasta donde quiero colocarla y entonces borrar las lineas superiores.
También si antes de escribir la entrada, tengo claro todas las imagenes, las coloco todas y despues voy escribiendo el texto.

Pero seguro que Rosa sabe algún truquillo que nos puede ir mejor a todos.

Anónimo

Talin, el único "truquito" que no lo es:( es copiar el código de la imagen desde "edicion html" del editor y pegarlo donde quieres que se vea.

Claro que yo lo hago de manera mucho más fácil, pinchando sobre la imagen y arrastrandola a donde quiero, pero eso solo puedes hacerlo si accedes a tu panel desde Blogger in draft

Anónimo

MARGA...he pensado para lo del títulos de tus entradas ¿tienes habilitado en Configuración-Formato la opción "Mostrar campo de título"?

Talin

Marga y Rosa, muchas gracias!!!

MARGA'S HAPPY CRAFTS

Rosa, muchisimas gracias, ya ves al final era la cosa mas tonta.
Por fin resuelto.

Sigues siendo la mejor.

MARGA'S HAPPY CRAFTS

Rosa, ahora que puedo editar el título de las entradas, veo que me queda mas pequeño que antes, he mirado en fuentes y colores, pero no veo la opción de título de entradas para fuente y tamaño. ¿como puedo poner el título de mayor tamaño?
Gracias.

Anónimo

MARGA, localiza esto en tu código:
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:120%;
font-weight:normal;
line-height:1.4em;
color:#C94093;
}

En font-size:120%; cambia el valor 120 por uno más alto.

Unknown

Hola Rosa! acá vuelvo porque me pareció interesantisimo este tema y deseo aplicarlo a algunas entradas de mi blog...

Tu ejemplo me funciona a la perfección (el de las mariposas) pero cuando subo distintas imagenes a muchos hosts diferentes (imageshack, image GX, etc) y sigo los pasos tal cual el de tu ejemplo no me muestra nada, ni en la vista previa ni cuando publico la entrada... a qué puede deberse???

Muchas gracias, vuelvo a pasar ya que como te dije me interesa muchisimo poder aplicar esto.

Hasta muy pronto,

Sebastián:)

Anónimo

librosquemuerde Sin ver el código como lo usas (cosa que no puedo hacer online) no sabría que decirte...pudiera ser una url incorrecta, una colocación errónea del código en la entrada...

Cristina

Hola Rosa te quería preguntar consigo cargar la imagen en la entrada, pero cada vez que pongo una entrada tengo que meter el código, hay manera de que salga en todas las entradas la misma imagen, según dices veo que sí, pero no encuentro como. Muchas gracias.

Anónimo

Cristina Ve en tu panel a Edición HTML y localiza esta parte del código en tu plantilla:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #666666;
padding-bottom:1.5em;
}

Añades ahí una líne con backgroud y colocas la url de tu imagen así:

.post {
background: url(url_de_tu_imagen);
margin:.5em 0 1.5em;
border-bottom:1px dotted #666666;
padding-bottom:1.5em;
}

Usa vista previa para ver como queda antes de guardar, por si acaso :S

Suerte! ;)

Unknown

ROSA ME PUEDES EXPLICAR LO DEL ALOJAMIENTO GRATUITO DEL URL POR QEN ESE PASO ME PERDI POR COMPLETO MI E-MAIL ES DEPDELSUR@HOTMAIL.COM Y MI BLOG http://blogdeelsi.blogspot.com/
GRACIAS

Anónimo

ELSA ¿Nunca has subido una imagen por ejemplo a ImageShack? :o

Mira en esta entrada como subirlas al mismo Blogger:
http://elescaparatederosa.blogspot.com/2009/02/alojar-imagenes-en-blogger.html

Unknown

ROSA CUANDO TE ESCRIBO POR AQUI NO SE ENVIA MI COMENTARIO NO SE POR QUE

Unknown

NADA NO HAY FORMA NO ME DEJA PONER MI URL Y TU E-MAIL NO SE CUAL ES SI ME PUEDES CONTESTAR A L MIO TE LO AGRADEZCO DEPDELSUR@HOTMAIL.COM

Anónimo

ELSA Tienes mi email sobre el formulario de comentarios.

SevillanStyle

Hola rosa, me gustaria saber si se puede poner una imagen en el fondo del blog, es decir de plantilla, gracias!

FSVH

@SevillanStyle Te refieres a una imagen de fondo es aquí. Suerte.

FSVH

@SevillanStyle Y si quieres que el fondo (background) sea fijo, aquí Rosa te explica como hacerlo.

@Rosa disculpa por el doble comentario.

Anónimo

kikop ;):D

Diana Reyes

Hola Rosa:

Te escribe nuevamente tu admiradora "Jubilada en Acción" para comentarte que apliqué éste truco y me parece que queda fantástico, me tomé la libertad de utilizar la misma imagen que tu pusiste, espero que no tengas inconveniente, pero busque y busque en la red ana parecida y no encontré algo así de bonito... y sutil al mismo tiempo.

Gracias por siempre.

Anónimo

Jubilada en Acción! Ningún problema...:D para eso está.

Azul

¿cómo puedo cambiar el color de la letra de la entrada sobre la imgen y el tamaño del mismo?
El texto no esta centrado, se va mucho hacia la derecha, puedo cambiarlo y centrarlo? Gracias Rosa, y leí bien todas las preguntas, que te conste, y no ví nada referido a ello. Espero nadie lo preguntara para no quedar mal ;). Gracias Rosa

Anónimo

Azul Todo eso lo haces en el editor de entradas, si estás usando el nuevo claro...
http://elescaparatederosa.blogspot.com/2009/09/nuevo-editor-y-avatar-en-comentarios.html

Azul

Gracias Rosa, y un placer escucharte en RadiosJotas. Tienes buen gusto musical... Por cierto, me gustaría probar un día... Vaya tiempito en Asturias, y yo que quería ir a la playa con los perros... otro día sera... Besos

Anónimo

Azul Agregame a tu msn y hablamos... dime que eres tu o de lo contrario no te agregaré :S ya sabes que no lo hago con nadie...

Veríamos horarios, disponibilidad y demás temas...

Invitaciones Digitales y Animadas

Como podre ingresar una imagen diferente En el cuerpo de la entradas (visible en todas las páginas), ya que tengo una pagina de peliculas, y las quiero ordenar por Calidades ejemplo Estreno Dvd, Estreno Sub, Estreno Latino, algo como esta imagen:
http://lh4.ggpht.com/_NCrYnOs4drw/TOhyUzhMz7I/AAAAAAAABl4/Nx5DDxx3nHc/Calidad-HD.www.CineTux.org.png

Anónimo

Admin Supongo podría hacerse con el uso de las condicionales de Blogger y las etiquetas... algo complicado de explicar en un comentario y algo que quien haga debería controlar un poco al menos el uso de condicionales... no es algo puntual, sino como digo, el saber adaptar las condicionales.
En Vagabundia hay varias entradas que explican su uso, por si te interesa el intentarlo.

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S