Entradas con imagen de fondo

20 de abril de 2009 156 comentarios ,
Podemos darle un estilo muy personalizado a nuestras entradas con una imagen de fondo como esta que estoy publicando. Para tener este efecto en el texto de nuestras entradas sólo usamos el siguiente código dentro del post:


<table bordercolor="#000000" cellspacing="5" cellpadding="5" width="100%" background="http://URL de la imagen de fondo" border="0"><tbody><tr><td><p>Aquí va el texto de la entrada. Si desean agregar una imagen encima de la imagen de fondo sólo agregan la siguiente etiqueta y dentro de ella la URL de la imagen. <img style="float:right; margin:5px 5px 5px 5px;cursor:pointer; cursor:hand;width: 200px; height: 183px;" src="http://URL de la segunda imagen" border="0" alt="" /> y aquí continua el texto de la entrada.</p></td></tr></tbody></table>


Ahí pueden ver dónde deben escribir el texto de la entrada, y en caso de que deseen usar una foto encima de la imagen de fondo sólo agregan la etiqueta correspondiente como se explica en el código. Si no desean una imagen encima entonces eliminan esa etiqueta.
Imagen encima
En bordercolor pueden modificar el ancho del borde de la imagen, sino desean que tenga el borde lo dejan en cero como está.
El margen entre la imagen y el texto lo pueden modificar en cellspacing y cellpadding.
La posición de la segunda foto pueden cambiarla en float; cambian right si la desean a la derecha; left, a la izquierda o center si la quieren centrada.
El tamaño de la segunda imagen lo modifican con width (ancho) y height (alto).

Les recomiendo que usen una imagen de fondo que no dificulte la lectura de la entrada. De igual modo elijan una imagen que sea del tamaño adecuado al tamaño del post, ya que una foto muy chica se repetirá muchas veces hasta ocupar el espacio.
Que se diviertan personalizando sus posts.



156 comentarios en:

" Entradas con imagen de fondo "

  1. ahora si que quedaran chulos mis post, gracias

    ResponderEliminar
  2. Esta buena la idea, no sabía que se podian poner imágenes distintas en post distintos.

    Suerte!

    ResponderEliminar
  3. Por nada NO_NAME, ahora que tengas listo tu blog me doy una vuelta. Saludos.

    Cyberbloggero, yo empezaré a usar mi cyborg de fondo en los posts, jaja. Saludos.

    ResponderEliminar
  4. No me funciono que lata queria ver, sera que la imagenen muy grande, cellspacing="5" que significa la cantidad de veces que se repite la imagende fondo???

    ResponderEliminar
  5. Hola RonnyTemxcano,

    ¿Te marca algún error o por qué no te funcionó?
    cellspacing determina la distancia de las celdas dentro de una tabla; ese valor déjalo como está.

    Saludos.

    ResponderEliminar
  6. Exacto Potro me marco un error tendria que volver a probar cuando este en casa para mostrarte cual fue el es, en estos momentos estoy en la pega, laburo, chamba y bloquean todo lo referente a imagenes, videos, etc.

    ResponderEliminar
  7. Potro, ¿Si uso en Table ...Align="center"... la imagen de fondo me queda en el centro? Si es así ¿Cómo hago para que no se repita?

    ResponderEliminar
  8. Hola Romer,

    En ese caso usarías este código:

    <table style="background:url('URL de la imagen') center no-repeat;" bordercolor="#000000" border="1px" cellspacing="5" cellpadding="5" width="100%"><tbody><tr><td><p>Aquí va el texto de la entrada.</p></td></tr></tbody></table>


    Saludos.

    ResponderEliminar
  9. Pues a mi me esta pasando eso automáticamente cada vez que creo un post, pongo una imagen y esta queda de fondo y el texto encima, quizas meti mano en el código HTML de la plantilla y no me doy cuenta donde, podrías orientarme?
    Saludos y excelente tu blog!

    ResponderEliminar
  10. Hola Peliculas Argentinas,

    Parece que el problema es con la función de leer más ya que en el código aparece repetidas veces en un mismo post. No sé si el problema radique en la forma en la que está redactada la entrada o hayas hecho alguna modificación importante en la plantilla.
    Veo que la plantilla no tiene muchas cosas así que podrías reinstalarla para ver si así se arregla el problema.

    Siento no poder ayudarte más.
    Saludos.

    ResponderEliminar
  11. Gracias por tu respuesta El Potro.
    Modificación importante aún no he hecho.
    Te refieres al gadget que muestra el slide show? mas específicamente al código de éste gadget?
    Si es así, tengo entendido que no es el único código que existe para slideshow, lo que no se es si funciona cualquiera en cualquier plantilla.

    ResponderEliminar
  12. ¿Sabes? Ahora que veo bien, me doy cuenta que sólo es en algunos posts pues en otros no tiene ese problema, así que mirando más de cerca el código me he fijado que en las entradas donde se encima el texto con la imagen es donde aparece muchas veces <span id="fullpost"> siendo que sólo debe aparecer una vez por post.

    No sé qué método uses para el Leer más, pero podrías editar las entradas donde tienes ese problema, es casi seguro que ahí es donde está el problema.

    Saludos.

    ResponderEliminar
  13. Creo haber encontrado en donde está el problema, gracias a lo que me has dicho.
    Yo creo mis entradas en "Redactar" y una vez subida las imágenes, con el mismo editor que trae la plantilla le doy la opción de centrar, pero cuando paso a "Edicion de HTML" encuentro agregado unos separadores y repetido varias veces "span fullpost"
    Por ahora solo me queda hacer los post en redactar, y luego repasarlos en html y quitarles eso, bastante tedioso, pero no encuentro porque hace eso...
    Alguna idea?
    Muchas gracias por tu paciencia colega.

    ResponderEliminar
  14. Me imaginé que iba por ahí el problema. Siempre que se usen "códigos especiales" se recomienda hacerlo en el modo de Edición de HTML pues la modalidad de Redactar interpreta los caracteres de una forma distinta a fin de "darle sentido y forma" a lo que se escribe.
    Aquí hay un poco más de información al respecto:
    Cólo colocar los códigos en las entradas.

    Saludos.

    ResponderEliminar
  15. Buenas, enhorabuena por el blog, mi pregunta seria, no se puede poner de fondo una imagen mia propia? y si no se puede, como la puedo colgar para cogerla desde ahi?
    Llevo en esto de los blogs muy poquito tiempo, y la verdad que cada dia tengo mas ganas de hacer mas cosas.
    Saludos, os dejo mi blog: http://lacomparsadelosgitanos.blogspot.com/

    ResponderEliminar
  16. Hola Impolut,

    Claro que puedes poner una imagen tuya. Primero necesitas subirla a un servidor, por ejemplo http://tinypic.com/
    Ahí seleccionas la foto de tu PC y le das click en Cargar ahora.
    Cuando suba verás que te da varias direcciones, usa la última, esa será la que podrás usar como imagen de fondo.

    Saludos.

    ResponderEliminar
  17. GRACIAS, lo he puesto a mi manera, preguntare otra cosita por ahi, enhorabuena por el blog.

    ResponderEliminar
  18. Vale, donde lo subas no importa tanto siempre y cuando funcione ;)
    Saludos.

    ResponderEliminar
  19. Estimado Potro, continúo con mis consultas...

    Esta vez quisiera poner la misma foto al pie de cada entrada.

    Se me ocurre que puede ser dentro de Configuración/Formato/Plantilla de Entrada, pero el tema es cómo hago para que la imagen quede del mismo ancho que el cuerpo de la entrada.

    En mi plantilla el main-wrapper no está fijo, está como un 67%, entonces tendría que ser algo que le cambie el tamaño de la imagen para ajustarla a ese ancho variable...

    Espero puedas ayudarme, gracias!

    ResponderEliminar
  20. Lo veo complicado pues las imágenes no se comportan igual cuando se manejan porcentajes de tamaño.
    Pero si quieres puedes intentarlo, sólo agrega al código de la imagen un ancho en porcentaje:

    style="width:67%;"

    Quizá eso te resulte, sino no veo de qué otra forma se pueda hacer.
    Saludos.

    ResponderEliminar
  21. hola de nuevo.aky ando intentando enredar con cositas nuevas y era para haber si me podias resolver una duda.
    en una entrada e puesto una foto que es el enlance para ver una galeria de fotos de picasa hasta hay bien,pero kiero poner otra foto que se el enlace de otra galeria,pero me gustaria k se podria poner seguida en vez de debajjo que es komo se me pone al añadirle el siguiente codigo de la foto.sabes si seria posible.Muchas gracias

    ResponderEliminar
  22. Hola Urko,

    Sólo pon los códigos de las fotos seguidos, es decir, sin saltar renglón ni espacio entre ellos, que queden juntos. Con eso saldrán las fotos pegadas.

    Saludos.

    ResponderEliminar
  23. pues no se pork motivo se salta abajo

    ResponderEliminar
  24. Es porque el código que tienes es de una tabla, lo más conveniente es que pongas sólo el código de la imagen con la URL del enlace, de esa forma no se te saltará para abajo.

    Por ejemplo:

    <a href="http://picasaweb.google.es/eutsigogorr/LaEskapadaKatalunyaSemanaSanta?feat=embedwebsite#"><img src="http://lh4.ggpht.com/_qItbWYfDPL0/S98-ZzxaBdE/AAAAAAAABlY/eBgWARHnQ18/s160-c/LaEskapadaKatalunyaSemanaSanta.jpg" /></a>

    Y luego, seguido de ese código poner otro igual, sólo cambiando la primer URL que es la del enlace del álbum y la segunda URL, que es la de la imagen pequeña.

    Saludos.

    ResponderEliminar
  25. Potro, tengo una consulta. Mi plantilla muestra las imágenes con borde http://elblogdelnobe.blogspot.com quisiera saber como se puede eliminar eso, pues me incomoda.

    ResponderEliminar
  26. Vale, qué bueno que ya lo resolviste ;)

    ResponderEliminar
  27. Hola a todos. Yo tambien tenía problemas al querer poner imagen de fondo en el blog anterior que estaba en blogger.
    Al final hice uno en over-blog y es más sencillo. Dispone de plantillas herramientas, etc.En el los artículos les pongo una foto y en algunas de ellas redirecciono al video, no sé si está hecho con buena critica, pero me gusta y es visitado.
    Os paso el enlace.
    saludos a todos
    http://revistacustom.over-blog.es/

    ResponderEliminar
  28. Haay que chevere! justo lo que buscaba, voy a probarlo :)

    ResponderEliminar
  29. Gracias por tus aportes. queda un blog de rechupete jejejeje

    Por cierto ¿hay modo de variar el groor del borde de las entradas?
    como ponerles un "marco" usando el borde con mayor grososr...

    ResponderEliminar
  30. Prueba poniendo antes de ]]></b:skin> esto:

    .post {border: 1px solid #000;}

    Donde dice 1px es el grosor del borde, con un número mayor el borde será más ancho.

    ResponderEliminar
  31. Hola Potro,

    Se repite la imagen que pongo varias veces. Cómo lo evito??? Además me gustaría poder escribir algo, y que justo después sea cuando se ponga la imagen de fondo. Com en varias partes vaya.
    No sé si se podrá...

    Gracias como siempre

    ResponderEliminar
  32. Con el comentario 10 he solucionado lo de repetir la imagen. Probando me he dado cuenta de que si pongo en el código sólo lo que quiero, sólo se pone de fondo ahí.

    Lo único que me falta es hacer que mi imagen ocupe todo el cuadro que se ha creado. ¿Se puede?

    Gracias tío

    ResponderEliminar
  33. Hola Gorka,

    Eso depende del tamaño de la imagen que tengas. Necesitas que la imagen sea del tamaño de la entrada donde deseas ponerlo.

    Saludos!

    ResponderEliminar
  34. Ah vale.
    Y entonces;

    ¿Cómo sé el tamaño de mi entrada?
    y ¿Cómo cambio el tamaño de mi imagen?

    Gracias majo!!!

    ResponderEliminar
  35. Generalmente puedes verlo en algo como:
    .post {
    O como:
    #main-wrapper {

    Por ahí debe venir el ancho (width) del área de las entradas.
    La imagen tienes que editarla con algún programa para hacerla del tamaño que deseas.

    ResponderEliminar
  36. Gracias, me voy a probar

    Un abrazo!!!

    ResponderEliminar
  37. ALGUIEN AQUI ME PUEDE AYUDAR CHICOS, QUIERO PONER UNA IMAGEN ASI COMO LA DEL PRINCIPIO DEL CHICO QUE DA LA EXPLICACION UNA FOTO Y QUE JUNTO QUEDE TEXTO A TODO LO ALTO DE LA FOTO POR FAVOR ME URGE PARA MI PAGINA Y NO ENCUENTRO LA RESPUESTA.elzalarry@hotmail.com

    ResponderEliminar
  38. Hola Elza,

    En la entrada está el código que debes usar explicado a detalle.
    Saludos.

    ResponderEliminar
  39. HOla otra vez Potro!!

    ¿Se puede poner el mismo fondo a un grupo de entradas a la vez? Por ejemplo, todos los post sobre mates (etiqueta mates), tienen de fondo un pájaro o tienen un fondo amarillo.

    No sé si mexplico

    Gracias una vez más!!

    ResponderEliminar
  40. Quizá usando una condicional antes de </head>


    <b:if cond='data:blog.url == &quot;URL de la etiqueta&quot;'>
    <style type='text/css'>
    .post { background: url(URL de la imagen);}
    </style>
    </b:if>

    Eso debería hacer que todas las entradas de esa etiqueta tengan de fondo la imagen que has especificado.

    ResponderEliminar
  41. JODER TÍO, ERES LA LECHE!!!!

    GRACIAS GRACIAS GRACIAS

    ResponderEliminar
  42. Ahora vuelvo por aquí otra vez ;)

    He tenido un problemica.
    Cuando pincho en el enlace que accede a esas entradas (con la etiqueta correspondiente), todas tienen el fondo que yo elija. Pero si las selecciono por su nombre (aunque sigan perteneciendo a la etiqueta correspondiente), desaparece el fondo.

    ¿Qué puedo hacer para que las entradas con esa etiqueta tengan siempre el fondo seleccionado, aunque estén en entradas antiguas, etc.?

    Gracias

    ResponderEliminar
  43. Efectivamente sólo es visible cuando se navega en las etiquetas, pues al ingresar a la entrada se deja de estar en la condicional que usamos, me temo que ahí sí hay que poner la imagen o color de fondo de forma manual :(

    ResponderEliminar
  44. Hola potro, tengo un problemita con la imagen de fondo, he probado ponerla en diferentes tamaños y siempre me sale recortada osea solo se ve la mitad de la imagen. que estoy haciendo mal?
    Gracias!

    ResponderEliminar
  45. Hola lorena, ¿en dónde lo has puesto?

    ResponderEliminar
  46. hola potro, subí la imagen en imagenshark para colocarla en una entrada http://lospetisdereconquista.blogspot.com/2011/06/promesa-de-lealtad-la-bandera-nacional.html
    ahora tengo otro problema me pasa que cuando veo la entrada en vista previa me muestra en color el texto pero cuando la publico se ve en blanco.

    ResponderEliminar
  47. Hola lorena,

    Si usas el editor anterior anterior activa el editor actualizado, si ya lo usas entonces no copies el texto de la entrada desde Word u otro editor, pues al hacer eso se van muchos estilos que Blogger no reconoce o bien que interfiere con otros estilos.

    ResponderEliminar
  48. Funciona de vicio, muchas gracias, Potro.

    ResponderEliminar
  49. potro y para que la imagen de fondo se quede permanente mente post se puede realizar eso

    ResponderEliminar
  50. ¿En cuál blog deseas hacerlo parteatras?

    ResponderEliminar
  51. Busca esta línea:
    background-color: $(post.background.color);

    Y cámbiala por esta:
    background-image:url(URL de la imagen);

    ResponderEliminar
  52. hola me explicarias dónde tengo que poner lo que nombras al inicio? gracias

    ResponderEliminar
  53. es un blo de celíacos, y me gustaria que cuando etiquete recetas tengan siempre el mismo fondo. Muchas gracias

    ResponderEliminar
  54. Hola Noe, ya te he respondido esa pregunta en unos comentarios arriba de estos. Esa parte la encuentras entrando en Diseño > Edición de HTML.
    Saludos.

    ResponderEliminar
  55. si gracias Potro, pero los fondos que me gustan son para el fondo principal del blog, y yo quiero uno para las entradas, cómo lo adapto?? gracias.

    ResponderEliminar
  56. Nop, ese código que te di es para el fondo de las entradas, no para el fondo del blog.

    ResponderEliminar
  57. http://vivirsintacc-noe.blogspot.com/search/label/RECETAS. SI PODÉS MIRÁ COMO ME QUEDA LA RECETA, NO ME QUEDA LA RECETA EN LA PARTE BLANCA DEL FONDO, Y SE VE ÚNICAMENTE CUANDO ESTÁS EN LA SECCIÓN DE RECETA. eN LA PÁGINA PRINCIPAL SE VE EN BLANCO EL FONDO..

    ResponderEliminar
  58. DE QUE TAMAÑO TIENEN QUE SER LOS FONDOS PARA QUE VAYAN BIEN EN LAS ENTRADAS??. dISCULPA QUE TE JODA TANTO, ES QUE NO ENTIENDO MUCHO

    ResponderEliminar
  59. Me he perdido un poco, porque la imagen de fondo de la entrada la veo tanto desde el enlace que me diste, como en la entrada individual e incluso en la portada.
    El ancho de la imagen del tamaño que lo has puesto está bien, de alto no hay una medida establecida ya que la altura siempre varía de acuerdo al contenido de la entrada.
    Ahora, que lo blanco no quede justo en el texto eso depende de tu entrada, o mejor dicho de la imagen que has elegido, ahí tendrás doble trabajo pues siempre tendrás que estar calculando los márgenes del texto para que el texto aparezca en esa parte.

    ResponderEliminar
  60. Gracias Potro,después que te escribí lo logré. Ahora me mandé una metida de pata, puse plantilla mínima para probar...y chau se me borró todo,ayudame a volver a tener lo que tanto me costo por favor!!!

    ResponderEliminar
  61. Potro no te hagas drama, lo arregle un poquito con cosas que saqué de acá y me gusta.por ahora jajaja

    ResponderEliminar
  62. Sos un Genio, después fijate si te gusta cómo quedo???y si podés dame una mano para cambiarle el color, al menú porque leí pero no se a dónde tengo que subir lo que nombras..gracias!!

    ResponderEliminar
  63. Qué bueno que ya lo has resuelto.
    Lo del menú tienes que editar el archivo CSS y subirlo a un hosting, hay varios hostings gratuitos, por ejemplo Google Sites.
    Cualquier otra duda sobre el menú la vemos allá para no desviarnos del tema de esta entrada ;)
    Saludos!

    ResponderEliminar
  64. Muy buen truco.Ya puse una entrada con una imagen de fondo.Gracias por ponerlo :)

    ResponderEliminar
  65. Potro, yo quisiera que en lugar de los mensajes: Pagina Principal, Entradas más reciente, Entrada más antigua. Vayan imágenes.
    Como puedo hacer eso?

    ResponderEliminar
  66. Aquí puedes ver cómo personalizar los enlaces de navegación:
    http://ciudadblogger.com/2009/07/personalizar-los-links-entradas.html

    ResponderEliminar
  67. hola potro, dentro de esa imagen de fondo en la entrada quiero colocar un menú vertical desplegable con efecto deslizante con subpestañas.
    Es posible ? como debo colocarlo ?

    Muchas gracias!

    ResponderEliminar
  68. ¿Un menú dentro de la entrada? Pues no siempre queda bien pero puedes intentarlo. Busca un menú, el que quieras (en la categoría Menús hay algunos) y el código que iría en el elemento HTML/Javascript, ponlo en la entrada, de esa forma el menú estará en la entrada.
    Saludos.

    ResponderEliminar
  69. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  70. Potro, tengo una pregunta. He puesto este código en un gadget para escribir y colocar imágenes sobre ese fondo. Este gadget ocupa el ancho total del blog, sin embargo el gadget no se muestra entero, porque antes de alcanzar el ancho total del blog hacia la derecha, hay un margen que lo corta. Si modifico el ancho del blog, ese margen se corre y entonces puedo ver entera la imagen de fondo del gadget, pero la intención no es cambiar el ancho del blog sino quitar ese margen entre el gadget y el límite el blog. Agradezco tu ayuda.

    ResponderEliminar
    Respuestas
    1. Quizá habría que aplicar un margen negativo al gadget o a alguna área de él. ¿En cuál blog lo has puesto y cuál gadget es?

      Eliminar
    2. Potro te agradezco mucho, se trataba de un detalle simple: Había que poner en "width" un valor superior al 100%. Tan sencillo que se pasó de largo. Gracias por la respuesta y la buena onda!

      Eliminar
    3. Me da gusto saber que has podido resolverlo tan rápido :)

      Eliminar
  71. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  72. Hola Potro:
    Me ayudas nuevamente?

    Aquí puse el código para tener una imagen de fondo.
    ¿Porque se "desarma" el de emailmeform?

    Se puede solucionar?
    Saludos estimado.
    Jpz.-

    ResponderEliminar
    Respuestas
    1. Hola Jpz,
      No es por la imagen de fondo, sino porque la plantilla que usas tiene estilos específicos para las tablas que se agreguen:

      .post table {
      margin: .7em 0;
      border: 1px solid #2f2f2f;
      }
      .post table td, table th {
      padding: .3em .7em;
      text-align: center;
      border: 1px solid #2f2f2f;
      }
      .post table th {
      text-transform: uppercase;
      font-weight: normal;
      background: #2a2a2a;
      }

      Puedes eliminarlos y ver si te mejora el resultado.
      Saludos.

      Eliminar
  73. Excelente Potro.
    Siempre das en el punto preciso.
    Ahora a diseñar algo para poner en la entrada (la imagen que esta es para prueba).

    Gracias y estamos en contacto.
    Saludos.
    Jpz.-

    ResponderEliminar
  74. Hola Potro.
    Ya llevaba días sin dejarte ningún recado... seguro que me has echado en falta ;)
    Bueno, te cuento: Quiero poner una imagen de fondo y hasta ahora he coseguido esto. El problema es que en edición, la imagen del pergamino se repite vertical y tengo que jugar con saltos de línea en html para escribir en el segundo pergamino (el que se repite) pero no logro que se centren los espacios.
    La imagen quiero que quede tal cual se ve pero el texto y fotos del post ocupará dos o incluso tres pergaminos.
    La duda es si puedo escribir tres códigos independientes (uno para cada pergamino) dentro de la misma entrada y como hacerlo, o cualquier otra forma de centrar textos y fotos en la imagen del pergamino las veces necesarias...
    ... vaya brasa, eh?, espero haberme hecho entender y que tengas a bien echarme un cable, que llevo un sinfín de intentonas y no paso de aquí.
    Ya dirás si tengo solución ;)
    Un saludo Potro.

    ResponderEliminar
  75. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  76. Hola de nuevo Potro.
    He estado trasteando en el código y he conseguido esto , échale un vistazo y dime si hay alguna forma más sencilla de hacerlo, como te he comentado, lo he conseguido jugando con los saltos de línea y vistas previas por doquier.
    Un saludo.

    ResponderEliminar
    Respuestas
    1. No he podido verlo Tapestryworkerman, el blog sólo admite lectores invitados :/

      Eliminar
  77. Ups!!
    Perdona, ahora entiendo que sólo lo vea yo ;)
    Prueba ahora, a ver si hay suerte.
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Creo que habrá que dejarlo abierto al público para no depender de la suerte porque sigo sin poder verlo.

      Eliminar
    2. No debí guardar cambios, lo hago público siguiendo tus sabios consejos ;)

      Eliminar
    3. Así como lo has hecho está bien, también puedes usar un DIV en lugar de un TABLE, ambas son buenas opciones :)

      Eliminar
  78. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  79. Todo OK.
    Muchas gracias por todo ;)
    Un saludo.

    ResponderEliminar
  80. Hola de nuevo amigo potro, el motivo de mi consulta es que cuando pongo mas de 2 entradas en la pagina principal con la imagen de fondo se me bloquea el puntero del raton y no se puede clicar sobre la imagen o sobre el boton de descargar, solamente me permite poner 2 post por pagina, donde puede estar el error?, como siempre muchas gracias de antemano por tu ayuda amigo mio, un saludo!!

    ResponderEliminar
  81. mi blog se llama catalogomusic80s90s

    ResponderEliminar
    Respuestas
    1. No pude ver el blog Julio, ya que sólo admite invitados.

      Eliminar
  82. Solo decirte que me encanta como explicas las cosas y como resuelves las dudas de la gente. Eres genial!!!

    ResponderEliminar
  83. Solo decirte que me encanta el Tutorial, gracias a él ahora tengo imágenes de fondo, y que me gusta mucho como explicas las cosas y despejas nuestras dudas. Gracias!!

    ResponderEliminar
  84. Hola Potro. Vengo a molestar de nuevo :P Yo necesito saber, si se puede poner el titulo Sobre el fondo que hice. Es decir, que Todo (Titulo + Fecha + Cuerpo de la entrada) quede Sobre el fondo que hice. Me explico? Gracias Potro :D

    ResponderEliminar
    Respuestas
    1. Depende de la plantilla, no con todas se puede. Puedes poner esto en los estilos de la plantilla:

      .post-outer {
      background:url(URL de la imagen);
      }

      Y se aplicaría el fondo a todas las entradas por igual, pero en muchas no cubrirá el título.

      Eliminar
    2. Claro, me parece que no es lo mejor... Sino, hay alguna opción para poner un fondo para el titulo, que sea una imagen sola, y despues por otro lado poner el curpo de la entrada? Gracias!

      Eliminar
    3. Sí, es de una forma similar:
      h3.post-title {
      background:url(URL de la imagen);
      }

      Eliminar
  85. Gracias! Cuando lo ponga te aviso y te cuento como me fue :D

    ResponderEliminar
    Respuestas
    1. Ya probe lo del fondo!! Me resulto! Esta Muy bueno!! lo que si, no logre ponerle el fondo al titlo, viste que vos me pasaste un codigo hace unos días? Bueno, ¿Donde pongo ese codigo? . Gracias!

      Eliminar
    2. Pero, ese codigo va en edicion HTML?

      Eliminar
    3. Sí, en la Edición HTML está esa etiqueta. Todo lo que sean estilos CSS siempre van antes de esa etiqueta.

      Eliminar
  86. Hola Potro, resulta que al poner la imagen de fondo en mis entradas no me funciona el boton de abajo de pagina principal, no me permite clicar sobre el. En gogle chrome no me deja y en mozilla aparece a la derecha a mitad de blog, que cosa mas rara. Por favor a ver si me puedes decir donde esta el error. Gracias de antemano crack. Mi blog se llama "vinilomix80s-90s".

    Un saludo.

    ResponderEliminar
  87. Potro ya lo he solucionado, ahora quisiera saber como puedo reducir el espacio entre las entradas, para no que no quede mucho hueco de una entrada a otra, gracias..

    ResponderEliminar
    Respuestas
    1. Hola Julio, agrega antes de ]]></b:skin> lo siguiente:

      .date-outer {
      margin-top: -20px;
      }

      Eliminar
  88. Potro resulta que lo habia reducido de la plantilla pero cuando pongo mas de 3 entradas se descentran las entradas de abajo. Por favor ayudame!!

    http://vinilomix80s-90s.blogspot.com.es/

    ResponderEliminar
  89. madre de dios!! estoy poniendo entradas de prueba y se descentran todas, no lo entiendo amigo y todas van igual al 100% de ancho y para ajustar el espacio de arriba a abajo he echo lo que usted me ha puesto.

    ResponderEliminar
  90. bueno pues he optado por quitar la imagen de fondito que le habia puesto a las enradas, de todos modos si tiene usted alguna solucion al problema me gustaria solucionarlo ya que me gustaba mas la estetica que le daba la imagen de fondo de las entradas al blog.

    ResponderEliminar
  91. se me olvidaba, lo he vuelto a dejar con las imagenes de fondo para que pueda ver el problema, vease en el apartado de MP3 80S, en el menu de ariba, alli vera que hay 3 entradas y la de abajo del todo es la que se desajusta y asi sucesivamente, gracias potro.

    ResponderEliminar
    Respuestas
    1. ¿Pero eso sólo sucede cuando pones la imagen de fondo, o a partir del código para separar menos las entradas? Si es por lo segundo entonces no lo pongas, aunque se vean más separadas. Si es por lo primero entonces puedes optar por poner la imagen de fondo directo en la plantilla, así se aplicaría ese fondo a todas las entradas por igual:

      .post {
      background: url(URL de la imagen);
      }

      Eliminar
  92. que bueno potro!!!! problema resuelto, muchisimas gracias por su ayuda, una cosa tan sencilla y no saberla !! oh my god!! es usted un genio my friend!!..mil gracias de nuevo, un abrazo!!..

    ResponderEliminar
  93. Vaya pelmada te estoy dando este mes. Espero dejar de molestarte pronto, pero es que estoy a tope con el perfeccionamiento de las nuvas plantillas.. ;)

    Mira, tengo una imagen de fondo como dices, pero no me ocupa toda la entrada. El texto si que está ocupando todo, pero la imagen está centrada pero sin llenar completamente el post. El problema es de la propia foto??? ¿Tendría que darle el tamaño de pixeles exacto de mi ancho de blog??

    El inicio de mi código es este:

    <table border="1px" bordercolor="#000000" cellpadding="5" cellspacing="5" width="100%" style="background: url("http://dl.dropbox.com/u/22116370/Varios/Blog%20Clase/amigosfondo.jpg") no-repeat scroll center center transparent;"><tbody>

    MIL GRACIAS CHAVAL!!!

    ResponderEliminar
  94. Ah y otra cosa, ¿Sirve también para fondo de una página estática o sólo para entradas???

    Gracias

    ResponderEliminar
    Respuestas
    1. Las imágenes de fondo en las entradas no suelen ocupar todo, esto es porque el área de las entradas contiene márgenes y espacios.
      En caso de que el problema fuera el tamaño bastaría con agregar una imagen de dimensiones más grandes.

      También sirve para las páginas.
      Saludos.

      Eliminar
  95. Pero en el ejemplo que has puesto, tu fondo rallado envuelve al texto y parece ocupar toda la entrada. Voy a probar a agrandar la imagen ;)

    Salu2

    ResponderEliminar
    Respuestas
    1. Porque la plantilla yo la hice y la diseñé sin esos espacios al ser toda blanca, pero en las normales como siempre hay bordes, colores, imágenes, etc. les ponen esos espacios para que no quede todo pegado.

      Eliminar
  96. Tenías razón. He agrandado la imagen y he gandao algo, pero tanto el texto como la imagen tienen el mismo margen.

    Gracias anyway majo!!!!

    ResponderEliminar
  97. http://mispadressonprimerizos.blogspot.com.es/ Hola Potro, una vez solucionado el tema del menú, he querido poner unas imágenes de fondo como indicas en esta entrada . Lo q sucede es q solo sirven para imágenes centradas. Si te fijas en la entrada de mi blog, justo al final de ella hay una imágen q quisiera ponerla en la esquina inferior derecha y no sé cómo... seguí el código de la respuesta del comentario 10. Supongo q habrá q añadir algún style pero no acierto, me echas una mano?

    Salu2

    ResponderEliminar
    Respuestas
    1. Hola Gùde, en el código de la imagen que has puesto cambia el center por right.

      Eliminar
    2. Genial, quedó perfecto. Gracias Potro.

      Salu2

      Eliminar
  98. ¡Hola Potro! Voy a hacerte una consulta un poco tonta. Voy a cambiar todo el diseño de mi blog www.lasitakas.blogspot.com para darle más importancia a la imágenes. Quiero que se vean mucho más grandes y que el texto de la entrada quede arriba o abajo pero no en los laterales. En el código html inserto
    (seguro que esto es una chapuza, es que no sé nada de estas cosas) antes y después de la foto, pero a veces, cuando la resolución de pantalla cambia, la foto no queda bien ya que aparece el texto en los laterales. Como ejemplo, te pongo el enlace de un blog de prueba que he creado: http://lasitakasprueba.blogspot.com.es/search/label/Amsterdam
    ¿Me das algún truquillo para que quede bien?

    ResponderEliminar
    Respuestas
    1. Hola Katiana, no he podido ver el código que dices que insertas, pero sólo tienes que editar la entrada y estando en la pestaña "Redactar" dar click a la imagen, ahí puedes seleccionar tanto el tamaño como la alineación de la misma.

      Eliminar
  99. me refiero a
    ja, ja, no sé porqué en los dos comentarios anteriores se come esto.

    ResponderEliminar
    Respuestas
    1. Sigo sin verlo, si es un código no aparecerá en los comentarios, primero tienes que convertirlo a texto plano:
      http://ciudadblogger.com/p/conversor-de-html-texto-plano.html

      No sé si leíste el comentario anterior, ahí te explico brevemente cómo alinearlas y agrandarlas.

      Eliminar
  100. <br> Espero que esto se pueda leer. Disculpa el embrollo, no sabía que ocurría esto si escribías un código html.

    Sé cómo insertar la imagen, alinearla y agrandarla. Lo que no quiero es que me aparezca texto lateral. Para remediarlo le inserto muchos puntos y apartes <br> antes y después de la imagen, pero aún así a veces se me descuadra y al verlo en otro navegador o en otro monitor con distinta resolución se me descuadra.

    Perdona mi torpeza en los mensajes anteriores. Soy un poco burra con estas cosas y no sabía que para leer un código hay que pasarlo a texto plano.

    ResponderEliminar
    Respuestas
    1. Ya no pude ver el blog para revisar el código, dice que el blog sólo admite invitados.

      Eliminar
  101. ¡Listo! Ya lo he cambiado. :) Éste es el blog: www.lasitakas.blogspot.com y ésta es la entrada del blog de prueba donde he empezado a hacer los cambios, te la pongo como ejemplo de imagen que aparece con texto lateral: http://lasitakasprueba.blogspot.com.es/2012/04/amsterdam-el-mercado-de-los-placeres-y.html

    Muchas gracias por tu ayuda y por tus explicaciones Potro. Se agradecen muchísimo.

    ResponderEliminar
    Respuestas
    1. Hola de nuevo Katiana. Dentro del código de esa imagen tienes esto:
      imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"

      Ahí dice que la imagen deben estar a la izquierda, si la pones de esa manera entonces el texto que hay debajo se pone alrededor. Si quieres que esté centrada debes ponerla como ya sabes, desde redactar, o quitarle esos estilos manualmente.

      Eliminar
  102. ¡Ya está corregido! Muchas gracias por tu ayuda tan generosa. Un saludo, Potro.

    ResponderEliminar
  103. Hola Potro.

    He utilizado este truco para mi nueva web http://www.buscablogsdeviaje.com/ y se ve genial. En todos los navegadores menos en Firefox que aparece en el lateral derecho de la sidebar, completamente descuadrado. sabes por qué? muchas gracias y espero que me puedas responder poco porque tendría que hacer mucho trabajo para corregirlo todo

    ResponderEliminar
    Respuestas
    1. Hola Héctor, ¿me puedes mostrar una entrada donde tengas ese problema así como la imagen que usaste? porque he entrado desde Firefox pero no he visto nada fuera de lo normal.

      Eliminar
    2. Hola Potro, gracias por contestar. Te comento que lo estoy solucionando porque el problema parece que lo tiene con el <table si lo pongo al principio del post. para solucionarlo saco la imagen de cabecera metida en <a y la pongo antes del <table por lo que ya salen centradas. Pero lo he de hacer una por una. Te pongo un ejemplo sin sacar la imagen http://www.buscablogsdeviaje.com/2014/03/blogs-de-viaje-marruecos.html

      y otra con la imagen sacada http://www.buscablogsdeviaje.com/2014/04/blogs-de-viajes-suecia.html

      por cierto, cuando saco la imagen y la pongo con leyenda tb me da problemas pq va en <table, así que lo que hago en vez de corregirla como la de Suecia, directamente saco la leyenda para no comerme más la cabeza. Hay algo que se pueda hacer de otra manera?

      es curioso verdad Potro?

      Gracias por tu tiempo

      Eliminar
    3. Hola de nuevo Héctor. Por lo que veo quieres poner la imagen a todas las entradas de tu blog, ¿es así?
      Si esto es correcto entonces la mejor manera de hacerlo es que pongas la imagen directo en tu plantilla, de esa forma todas tus entradas, tanto las actuales como las nuevas que publiques, tendrán la imagen de fondo.
      Si quieres hacerlo así sólo agrega debajo de:
      .post-body {

      Lo siguiente:
      background-image: url(http://4.bp.blogspot.com/-y9Sve0RdW8o/Uz7PvmFAqwI/AAAAAAAAZ2E/_yvXL5LlI9o/s1600/Old_Scroll_Texture_III_by_Isthar_art.jpg);

      Con eso tendrías la imagen de fondo en todas tus entradas del blog. Seguro eso te ahorrará muchísimo tiempo, además ya no tendrás el problema de las tablas, imágenes o cualquier elemento que quieras añadir dentro de tus posts.

      Saludos.

      Eliminar
    4. Graaaande Potro. No se soluciona los que ya había puesto, tendré que sacar esos tables. Pero las imágenes que todavía no había puesto ya me lo has ahorrado, por tanto un 80% de trabajo menos que he de hacer. Gracias por aliviar penas ;)

      Eliminar
  104. hola potro, estoy buscando ponerles un fondo a mis entradas pero solo color por ejemplo blanco #ffffff ya lo hice desde .post { background:#ffffff; pero me sale el fondo muy pegado al texto. sabes algun truco para ponerlo y que quede un espacio entra fondo y texto. GRACIAS

    ResponderEliminar
    Respuestas
    1. Hola Emanuel, sigue el mismo método que has usado pero además agrega un padding para que haya separación entre el texto y el contenedor, por ejemplo:
      padding: 15px;

      Eliminar
    2. Tengo un caso similar, mi blog es con fondo negro en las entradas, pero yo quiero es aplicar fondo blanco a una sola entrada en particular, solo a una.
      ¿Existe algún código para poner en esa entrada y le dé un fondo blanco?

      Gracias Potro!

      Eliminar
    3. Sigue el mismo método de esta entrada, pero cambia esta parte:
      background="http://URL de la imagen de fondo"

      Por esta:
      bgcolor="#FFF"

      Eliminar
    4. Fabuloso Potro, yo estaba intentando poner background="#ffff" pero no me funcionaba xD.

      Todas mis dudas despejadas, muchas gracias Potro!

      Eliminar
    5. Es que en las tablas el background sólo funciona para imágenes, para colores debe usarse bgcolor ;)

      Eliminar
  105. saludos potro veterano. mis respecto.
    he tratado como el principiante que soy de hacer algo diferente y poner en las entradas un fondo (en la entrada) y me funciona este coddio style="background-image:url(URL de la imagen); padding:50px;">
    Texto de la entrada
    pero no se ve entera se repite 3 veces normalmente y si aumento los px aumenta las repeticiones ya probe con otro que publicaste pero el codigo cambia a los 6 segundos
    despues de guardado. Mucha Bendiciones
    Gracias...

    ResponderEliminar
    Respuestas
    1. Hola eli va, para que la imagen no se repita es necesario que agregues el atributo no-repeat en el background, por ejemplo:

      background:url(URL de la imagen) no-repeat;

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger