Fondo de entradas transparente | Oloblogger Este código sirve para hacer que el fondo de nuestros posts sea parcialmente transparente -translúcidos sería la palabra más exacta- de mane...

18 de enero de 2010

Fondo de entradas transparente

Este código sirve para hacer que el fondo de nuestros posts sea parcialmente transparente -translúcidos sería la palabra más exacta- de manera que dejen ver el fondo principal del blog a través de ellos. Algo así como lo que podeis ver en este ejemplo.

La única dificultad está en encontrar cuál es el selector que forma los posts. Si ya estás familiarizado con tu plantilla sabrás cual es, si no, empieza por buscar .post que es la denominación más habitual.

Una vez localizado, se trata de insertar la propiedad que indica la opacidad de la capa. Cómo cada navegador usa una distinta, para cubrir el máximo posible de situaciones, utilizaremos todos los conocidos:

.post {
overflow:visible;
position:relative;
background:#cccccc;
margin:.5em 0 1.5em;
border:4px solid #990000;
padding:20px 30px 10px 30px;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
-khtml-opacity: 0.7;
}

Las cinco últimas líneas son las que habría que insertar. Los parámetros de las dos primeras van desde 0 (transparencia total) a 100 (opacidad total). Las tres últimas van desde 0.0 hasta 1.0. Cambiando esos valores podremos conseguir una mayor o menor transparencia que la del ejemplo. Teneis que utilizar el mismo porcentaje para las cinco propiedades, porque si no, en cada navegador se vería de una manera distinta.

Igual que hemos hecho con las entradas, se puede hacer con la barra lateral, la cabecera, el pie... o con todos a la vez. Sólo hay que aplicarlo en la clase correspondiente de nuestro CSS.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

113 comentarios :

  1. Hola! te hago una pregunta, como haces para poner en el lateral izquierdo la imagen CARGANDO? yo ya tengo algunos en flash.

    ResponderEliminar
  2. Aunque seguro que hay más sistemas, aquí tienes el mío...
    http://oloblogger.blogspot.com/2009/04/aviso-para-la-carga-de-una-pagina.html

    ResponderEliminar
  3. grax oloman! nos vemos pronto!

    ResponderEliminar
  4. una cosas mas: Como pongo la fuente COMIC SANS MS a todo el texto de todo el blog?

    ResponderEliminar
  5. Muy buen post oloman, la verda se me hace muy interesante para blogs con plantilla como la del ejemplo pero pues con plantillas como la mia no sirve de mucho aunque si la podria probar.

    Saludos Oloman ;D ahi pasas por mi blog

    ResponderEliminar
  6. Rodry, ¿todavía no te has enterado de que es una letra maldita entre los diseñadores? Bueno, si después de leer el enlace quieres seguir poniéndola, tienes que buscar body{} y allí insertar (o sustituir si ya tienes un font-family) esta línea:
    font-family: 'Comic Sans MS', sans-serif;

    Mike, como dices, es cuestión de probar. Si en lugar de un fondo azul, pones una imagen con algún tipo de degradado o dibujo, el fondo transparente podría ser interesante. Evidentemente, con eso la estética 2.0 se diluirá un poco.

    ResponderEliminar
  7. Me encanta en el ejemplo, lo probaré y luego te digo como queda.
    Saludos!!!

    ResponderEliminar
  8. xq letra maldita? es genial esa letra.

    ResponderEliminar
  9. Hola oloblogger voy ha probar esta en uno de los blog a ver que tal =D
    Vi que estas en FACEBOOK te invito y a quien quiera a mi perfil de y si quieres podes hacerte FAN :) ,al cual le puse algo de HTML a ver que tal:
    http://linko.es/Pb0_
    y esta es la de twitter: http://linko.es/P38_
    Un saludo t estare escribiendo =D
    ...zonamr.com.ar...

    ResponderEliminar
  10. ya lei tu post, y me parece una estupides que tengan odio a una fuente... hacen cosas contra la COMIC SANS MS, por qué no se dedican a hacer algo mejor por el mundo antes que eso? la verdad que esta fuente es barbara, a mi me gusta, y la gente voto esa letra en tu encuensta. y yo tmb la voté. Nos vemos!

    ResponderEliminar
  11. Ya está, un encanto para jugar en todas las partes del blog!!!

    Odio a la Comic? jajaja esto sí que no lo había leído :D

    ResponderEliminar
  12. Rodry, a mí también me lo parece, pero así está la cosa. Muchos hacen cruzadas estúpidas sobre muchas cosas y esta es una de ellas. Seguramente es causa del esnobismo exacerbado de algunos.

    Zona MR, me encanta que por fin hayas hecho público tu blog. Eso quiere decir que ya me preguntarás menos :D

    Graciela, encantado de que te encante. Y sí... hay mucha gente en contra del uso de la Comic.

    ResponderEliminar
  13. JEJE al parecer si =D
    Espero que hallas podido ver el perfil de FaceBook con HTML.
    Ha! y te respspondi en el uniblog..:)
    Un saludo grande
    MR

    www.zonamr.com.ar


    Si!! publico jeje

    ResponderEliminar
  14. Gracias por los consejos de tu blog. Empezaré a usarlos

    Un saludo

    ResponderEliminar
  15. y bue, q se le va a hacer. je! Ya puse la comic sans en la plantilla q es como tu blog, pero en mis otros 2 blogs no se ponen. no se xq.
    Gracias por brindarnos siempre tu tiempo para responder nuestras dudas. abrazo.

    ResponderEliminar
  16. Hola Oloman.

    Después de realizar las busquedas a través del buscador. No logro localizar el tema entradas, tema que me tiene preocupado.
    Te hablo de la sangria que se crea en el texto de todas las entradas de mi blog.
    ¿si puedes?
    http://convoirunning.blogspot.com/

    Gracias de antemano.
    Ahh!! y el botoncito de ir arriba.

    ResponderEliminar
  17. ZONA MR, sí que ví tu página en Feisbuc... y también te mandé un nuevo mensaje en Uniblog.

    ANTONINO, bienvenido por la parroquia. He visto tu perfil y supongo que lo de Madrid debe ser un error ¿no? Da la casualidad de que tengo una vieja amiga que es de Elche de la Sierra y esa localidad más bien está por Hellín (Albacete) ¿verdad? Incluso he estado un par de veces allí.

    RODRY. D, busca en el selector BODY, font: x-small Trebuchet MS, Verdana, Arial, Sans-serif; y sustituye esa línea por la que te ha funcionado en el otro blog. Resulta que esos dos han usado una forma abreviada de FONT-FAMILY que es FONT. Por eso seguramente no lo encontrabas.

    OFO1965, he visto varias cosas que quizás no están bien, pero no he visto ninguna sangría. Quizás te refieras al espacio que queda por encima del contenido de cada entrada. Eso puede ser debido a que la plantilla tal y como la tienes ahora, te reserva espacio para mostrar la fecha, pero esta no se ve. Eso es porque la clase correspondiente está mal tecleada. En un lugar que deberás buscar (con artilugios expandidos), pone "date- header" y debería ser sin el espacio, "date-header".
    ¿Y qué quieres decir con lo del "botoncito de arriba"?

    ResponderEliminar
  18. sisi, habia hecho eso, pero igual no funciona. las plantillas son:
    1) reunders 3
    2) No. 565

    creo que OFO1965 se refiere a la flecha de ir arriba.

    ResponderEliminar
  19. Rodry.D. Te he dicho que el cambio lo tienes que hacer en BODY, pero me acabo de dar cuenta de que en otras partes de la plantilla se repite para distintos bloques la definición FONT. Tienes que cambiar todas. Si además del tipo de fuente, llevan otros atributos, esos los dejas.

    O mejor todavía. Quita de todos los FONT cualquier referencia a otras tipografías y luego en BODY pones la COMIC. Eso es lo más adecuado para poder hacer más adelante una sustitución si te interesa.

    ResponderEliminar
  20. Que ojo tienes. Haber si no pierdo el hilo y sigo tus consejos mas regularmente.
    Rodry estaba en la cierto. Me refería a la flecha de ir arriba. Perdona por no concretar. No acabo de entender si la tengo que colocar debajo de head o arriba de body. Llegue a verla con el firefox pero no se que es lo que debe fallar.
    Muchas gracias. Lo de la sangría podía conmigo.

    ResponderEliminar
  21. Je, je. Ahora sí.
    El código del botón Ir Arriba, lo puedes poner detrás del <head> o antes del </body>. Creo que en ambos sitios funciona bien.
    Actualmente, tu flecha la veo tanto en IE como en FF.
    Si tienes problemas con tu propia imagen y la has subido a Blogger, echa un vistazo aquí.

    ResponderEliminar
  22. Me ha servido mucho este artículo, sinceramente este blog siempre deja algo nuevo! Saludos y felicitaciones.

    ResponderEliminar
  23. Me gusto, este post ya que yo uso en mis entradas fondos transparentes!! ^^
    ---
    Oloman, saves me gustaria darles algunos cambios a mi blog (http://sagrada-oscuridad.blogspot.com/) y vagando por google encontre un blog super interesante en el Home, es este (http://industrial-scum.blogspot.com/) - y me gustaria tener el home de mi blog asi, que es lo que tengo que modificar para logralo? saludos!! y muchas gracias, disculpa las molestias u.u

    ResponderEliminar
  24. Eso te va a costar estudiar más sobre el tema plantilla, porque ahí hay un montón de modificaciones para lograr eso.

    Como ya me ha pasado contigo anteriormente, te anticipo que no puedo guiarte paso a paso para cambiar todos los elementos necesarios. Recién acabas de terminar de adaptar tu plantilla, cambiando un montón de cosas, y ya quieres hacer otro cambio drástico.

    Me parece perfecto, pero por mi parte, sólo te puedo dar ideas y alguna ayuda puntual, pero debes invertir tu propio tiempo y no el mío en resolver TODOS tus problemas de diseño.

    Dejando claro esto, para empezar, echa un vistazo a este post. En él hay un sistema fácil que ofrece un resultado parecido.

    Un saludo Jonathan.

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

    ResponderEliminar
  26. Pues, la verdad sip tienes toda la razon aunque por fortuna encontre esta plantilla (puedes verla en mi borrador)(http://borradorfeuer.blogspot.com/) - aunque ya estaria casi todo listo jeje tengo un unico problema es las imagenes mm.. no entiendo como ajustarlaas hacia dentro o darles un tamaño predeterminado, quisas tu sabras mm..?

    Saludos!! y Gracias...

    ResponderEliminar
  27. No es fácil esa plantilla, pero en un principio, creo que si incluyes un width en este selector, podrás redimensionar las imágenes de la portada:

    #recent-posts .home-post .upper .intro-post img {
    padding: 1px;
    border:2px groove #666666;
    background: #000;
    width:200px;
    }

    ResponderEliminar
  28. Muchisimas Gracias!! de primera no me resulto pero le agrege el !important y me resulto.. ahora solo tengo que centrar las imagenes y listo.. termino!! ^^

    ResponderEliminar
  29. grax oloman, ya funiono. cuando quiera pasate x mis flogs:
    lospibesjvn.blogspot.com
    rodrycompany.blogspot.com

    ResponderEliminar
  30. Je, je... Ya te has convertido en otro apestado por la Comic. Saludos.

    ResponderEliminar
  31. yo lo pongo por que quiero que se me casi vea una imágen que tengo de fondo pero hago lo que dices tu y no se me muesta nada, lo que me hace es bajarme la intensidad del color blanco de las letras. Una ayudita por favor.

    ResponderEliminar
  32. Carlos, creo que para que no te pase eso, tendrías que hacer algo adicional y es crear una clase para lo que es propiamente el texto, con las características de opacidad al 100%. Luego tendrías que colocar esa clase a una nueva capa (DIV) que englobara el data:post.body.

    ResponderEliminar
  33. Hola, me gusta este codigo para hacer transparentes las entradas y los gadget, y me gustaria saber si hay forma de que la imagenes de los post no se transparenten...
    Gracias, espero haberme explicado

    ResponderEliminar
  34. Abraham, tendrías que hacer justo lo que se dice en el comentario anterior al tuyo.

    Otra manera si sólo quieres quitar la transparencia de las imágenes, sería añadir la clase 'post-body img' y añadir hay los atributos para un 100% de opacidad.

    ResponderEliminar
  35. Muchas Gracias, ya lo pude hacer y se ve bien, apenas estpy haciendo el blog, pero ese efecto si que le da vida, ¡ Exito !

    ResponderEliminar
  36. Hola amigo quisiera me ayudes porfa. Tengo un blog de 3 columnas pero las columnas laterales aparecen sobre el fondo y yo quisiera que el fondo apareciera transparente para que se vea mejor, Me ayudas?
    areka-crafts-manualidades.blogspot.com

    ResponderEliminar
  37. Hola Areka

    Ahora mismo tienes el fondo de las dos barras laterales con el valor #fff, es decir, blanco. Para lo que quieres, sólo tienes que cambiar ese valor por transparent. Eso lo haces encontrando en tu plantilla #sidebar y #leftsidebar.

    Luego localiza en cada una la línea
    background: #fff;
    y la cambias por
    background: transparent;
    (dos cambios en total)

    ResponderEliminar
  38. holis, bueno yo tengo el mismo problema que carlos y que abraham, i no se como arreglarlo, no entiendo lo que puciste, osea soi nueva en esto de los codigos i lo unico que hago es copiar i pegar. no se como solucionarlo :(

    ResponderEliminar
  39. Hola. Vamos a ver...
    En primer lugar, en la parte de las clases (donde insertaste el código que se indica), después del cierre de la llave, insertas esto otro
    .texto-opaco {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0;
    }

    Y guardas. Ahora seleccionando Plantillas de artilugios expandidas, buscas DATA:POST.BODY y lo dejas de la siguiente manera:
    <div class='texto-opaco'><data:post.body/></div>

    ResponderEliminar
  40. Que tal!!! encontre el post y me agrada la idea, pero al momento de querer aplicarlo no puedo!!... o mejor dicho no obtengo el resultado esperado... y esque aplico el codigo para todo el fondo del blog, para que la imagen del fondo se vea, pero aplica la transparencia a todo!! incluido los post, imagenes, hasta al encabezado y al menu de las pestañas, ayuda por favor!!! el blog es http://derramerockmexico1.blogspot.com, espero me puedan ayudar... gracias de ante mano!!!...

    ResponderEliminar
  41. Derrame, ¿puedes probar lo del comentario anterior al tuyo?

    ResponderEliminar
  42. Ya realice esos cambios y no ha mejorado...

    ResponderEliminar
  43. Tendré que revisar esto, porque es antiguo y creo que no lo expliqué con detalle. Es cierto que tal y como se dice aquí, TODO se transparenta.

    A ver si pillo un rato y hago una entrada más completa.

    ResponderEliminar
  44. Muchas gracias Oloman!!! estare al pendiente... suerte!!

    ResponderEliminar
  45. Vale, pero espero que tengas muuuucha paciencia ;)

    ResponderEliminar
  46. Anónimo7/12/10 0:27

    En la pestaba de las fotos tambien queda transparente.... como puedo hacer para que todas las entradas queden con el fondo transparente menos la que se encuentran las fotos??
    Gracias!!

    ResponderEliminar
  47. Hola mi hermano eres muy exelente en tus publicaciones,tengo un problema tengo un blog de descargas pero seguido mis post me los mandan a
    a borrador por los derechos de autor u.u no c como le hacen los otros blogs para mantenerse asi veo que hay blog iguales y semantienen asi por años sin ver qu les borren sus post ayudame abra un codigo o algo?para evitar esto hermano? ayudame porfavor u.u espero respuesta hermano Gracias muy bueno tu Blog

    ResponderEliminar
  48. Anónimo, no sé a qué te refieres con eso de la "pestaña de las fotos"

    Comunidad HD es la primera noticia que tengo de que una entrada pase a borrador de manera automática. Supongo que al redactarla pinchas en "Publicar" y no en "Guardar", así que envíame una captura de pantalla con el aviso ese de los derechos de autor que le eche un vistazo.

    ResponderEliminar
  49. hola, soy new en esto, y quiero saber donde esta el selector que forma los posts! no lu ubico, gracias

    ResponderEliminar
  50. En tu caso Jazchuxita, posiblemente ande por aquí...

    /* Posts
    ----------------------------------------------- */
    body .main-inner .Blog {

    ResponderEliminar
  51. Gracias amigo/a ya lo encontreeeeee (:

    ResponderEliminar
  52. hola, ahora tengo un pequeño problema, cuando pongo el valor de la transparencia tbn desaparece mi contenido que publique, como puedo hacer para que solo el fondo sea transparente! ayuda Por favor!

    ResponderEliminar
  53. Ya vi que cambiaste de plantilla Jaz:9 y con eso vuelve a cambiar todo. Así que cuando decidas la definitiva, hablamos.

    ResponderEliminar
  54. Saludos.
    En mi caso, me ocurre lo contrario. He escogido una plantilla para realizar un diseño en la que se incluye el transparent. El caso es este: Yo quiero cambiar el color o el nivel de transparecia de la barra de gadgets de la parte lateral derecha, y no hay manera de editarla correctamente ni en el editor de plantillas ni por html. Si pudieras ayudarme, te lo agradecería mucho.
    Adjunto el link para que le eches un vistazo:
    http://letrasmagicas-biblioteca.blogspot.com/
    Gracias de antemano por el blog tan interesante que tienes.

    ResponderEliminar
  55. Julenuri prueba a añadir esto en la plantilla antes del cierre de SKIN, o en CSS desde el Diseñador--> Avanzados:

    .column-right-outer {backround:#000000;}

    Si funciona, ya es cuestión de escribir ahí las propiedades que prefieras.

    ResponderEliminar
  56. Hola.. Si quiero colocar la barra derecha de mi twitter un poco transparente pero no total, he visto algunos así pero no encuentro esa opción.. cómo tendría que colocar el código..? Gracias..

    ResponderEliminar
  57. ¿En Twitter, Auto? No sé. Quizás eso depende de la plantilla Twitter que utilices. La mía lo lleva y no he hecho nada especial para ello.

    ResponderEliminar
  58. Buenas,
    Yo no tengo .post { en mi plantilla.
    Donde tengo que colocarlo esactamente.
    ranhada.com

    ResponderEliminar
  59. Creo que en tu caso es post-body, Nando

    ResponderEliminar
  60. eh encontrado varios post-body, pero no se donde insertarlo. Si lo inserto por el medio de algun post-body al darle a vista previa no se ve nada, y si lo inserto mas adelante, encima de ]]>, el texto completo no hace nada.

    ResponderEliminar
  61. No podría poner la transparencia en diseño-formato-plantilla de entrada, como si fuera una imagen? en ese caso como lo haría?

    ResponderEliminar
  62. Nando, tendrías que buscar .post-body en la parte CSS (antes del cierre skin) y allí, dentro de las llaves { } insertar la parte marcada en verde. Si no tienes .post-body allí, entonces lo pones, abres llave, copias lo verde y cierras llave.

    Y lo de usar una imagen para la transparencia sería lo mismo, sólo que en lugar de background, tendrías que usar background-image.

    ResponderEliminar
  63. Hola. fui yo quien te escribio por facebook, pero ya ke prefieres en el blog te dejo la inquietud por acá. Estuve leyendo todos los comments y el de "Derrame Rock Mexico" (21 - oct -2010) es exactamente mi mismo problema... al aplicarle el codigo se transparenta todo lo del post, intenté aplicarle el codigo en diferente posicion pero no ocurre nada, solo ocurre cuando se pega exactamente debajo de "post", pero con el problema este que te meciono.
    Mi blog es este: http://konokoe.blogspot.com/
    Ves el cuadro donde esta escrito el post? lo quiero oscurecer pero solo un poco.
    Gracias por leer.

    ResponderEliminar
  64. Hola Kiara. En tu caso no es de aplicación este truco porque usas una plantilla de las del nuevo diseñador. La forma de construir esa transparencia para tu plantilla, es mediante una imagen png que ya incluye dicha transparencia. En concreto, tú usas esta
    http://www.blogblog.com/1kt/watermark/post_background_navigator.png

    Tendrías que descargarla y editarla para darle una mayor opacidad y luego sustituir la nueva por esa. Complicado si no sabes manejar editores de imágenes y muy fácil en caso contrario.

    ResponderEliminar
  65. Hola Oloman. Estoy con el mismo problema de que la transparencia se aplica al post completo, imagenes incluidas, y no soy capáz de solucionarlo. Ya encontraste alguna solución?

    ResponderEliminar
  66. Bike ou non vai ¿Has probado ha hacer lo del post y luego añadir lo que indiqué en el comentario #39?

    ResponderEliminar
  67. Si, lo he probado, y no funciona. Por cierto, el blog es este http://bikeounonvai.blogspot.com/

    Gracias

    ResponderEliminar
  68. No hay solución? Es que sino tendré que reformar el blog.

    ResponderEliminar
  69. Bike ou non vai, sí hay solución, pero cada plantilla usa unas clases distintas y yo lo explico de manera genérica. Me gustaría echar un vistazo a tu blog, pero lo tienes "solo para invitados".

    ResponderEliminar
  70. ah, claro. Es que aún lo tengo sin acabar. Lo dejo abierto de forma provisional para que puedas echarle un vistazo.
    Gracias, un saludo.

    ResponderEliminar
  71. He intentado algunas cosas Bike ou non vai, pero esas plantillas del nuevo diseñador son muy complicadas para mi. No he logrado quitar la transparencia del texto. Lo siento.

    ResponderEliminar
  72. Pues entonces creo que voy a intentar buscar otra plantilla, porque el diseño es muy básico, seguro que puedo conseguir el mismo diseño con una plantilla más sencilla. Si es complicada para tí, para mi es más.
    Un saludo y muchas gracias

    ResponderEliminar
  73. Hola a todos!

    Me encanta este blog, siempre encuentro lo que necesito (y eso que yo tampoco soy una manitas en informática y html).
    Tengo una duda sobre el tema del fondo.
    Este es mi blog: http://smilethatglowsinthedark.blogspot.com/
    Al principio tenía como dos capas de transparencia, una más oscura que otra. Le he quitado la oscura, pero me sigue quedando un fondo blanquecino que no sé cómo quitar.
    Me gustaría que el texto quedase directamente sobre la imagen de fondo!
    Muchíisimas gracias :)

    ResponderEliminar
  74. Hola Gloria. Te queda una imagen semitransparente que es la que forma esa imagen. Tendrás que buscarla en tu plantilla y quitarla o cambiarla por otra. Es http://www.blogblog.com/1kt/transparent/white80.png

    ResponderEliminar
  75. Hola Oloman, gracias a tus aportes he estado "construyendo" mi blog, he consultado otros sitios, buenísimos tmb, pero tu forma de explicar me parece mas fácil de entender para los novatos como yo, bueno como podras ver, estoy en pañales todavía, me falta mucho por agregar, no tengo mucho tiempo libre asi que bueeeh, mi pregunta es, en donde pegaría la imagen .png de transparencia para las entradas ??
    Mil gracias de antemano por tu atención.
    Salu2!

    ResponderEliminar
  76. Colgando estrellas, tienes una plantilla de las del Nuevo Diseñador. Para ese caso, el diseñador ya incluye plantillas con el fondo de entradas semitransparente http://goo.gl/ZGwef

    ResponderEliminar
  77. Gracias Oloman, disculpa mi tardanza (complicaciones de salud)mira, de hecho si lo sabía, existen pequeñas diferencias entre cada plantilla que hizo que elijiera esta en particular, si pudieras decirme donde pudiera pegar manualmente la URL para el background de las entradas, te estaria eternamente agradecida
    Salu2!

    ResponderEliminar
  78. Creo (le tengo manía a las plantillas nuevas) que es esta imagen. Búscala en tu código y la sustituyes.
    http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png

    De todas formas, creo que en tu caso hay un color plano (no una imagen) de fondo en esta parte:
    .date-outer {background:#141414;...

    ResponderEliminar
  79. Alguien me puede ayudar a poder cambiar mi fondo de texto, osea lo que pasa es lo siguiente:
    he colocado una imagen de fondo en mi blog pero cuando inserto una entrada de texto ya no sale completa la imagen de fondo....Sino que mi texto tiene un fondo negro, en otras palabras quiero que sea transparente el fondo. Gracias

    ResponderEliminar
  80. olvide mencionar mi blog es :
    eleganciawe.blogspot.com

    ResponderEliminar
  81. Jorge, pásame la dirección de la imagen de fondo que tienes puesta para localizarla en tu código, que no la veo.

    ResponderEliminar
  82. Hola Jorge tengo una duda estado leyendo los mensajes anteriores y no acabo de entender como poner el fondo en translucido donde se copia el codigo, este es el blog http://monrealdesignb.blogspot.com.es/ lo que quiero realmente es que el fondo de entrada negro sea translucido se pueda apreciar el fondo, gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Tendrías que modificar el .date-outer Ahí tienes un background negro. Cámbialo para dejar la propiedad como background: rgba(0,0,0,.6);

      El último parámetro es la transparencia (60% en el ejemplo).

      Eliminar
  83. Hola! Disculpa, se que esta pregunta ya la respondiste, pero soy igual que "antoo ヅ", soy nueva en el html y también solo copio y pego x3. No entiendo como hacer que las imagenes no se transparenten. Traté igual que con el texto. solo cambié "texto-opaco" poniendole "post-body img" pero no funciona, no se que estoy haciendo mal. Gracias, espero haberme explicado. Salu2

    ResponderEliminar
  84. Tras varias respuestas distintas, creo que lo más acertado y rápido es usar un color rgba con el fondo. Sería colocando algo así:
    background: rgba(255,255,255,.5);

    Los tres primeros números son colores en formato RGB y el último indica el nivel de transparencia: 0 totalmente transparente, 1 totalmente opaco

    ResponderEliminar
  85. Hola, sabes que yo estoy buscando lo contrario, estoy usando la plantilla picture window y quiero quitarle la transparencia que trae consigo la plantilla, ya se que hay otras que no lo llevan pero es la única plantilla con la que he podido darle las esquinas redondeadas

    Ojalá puedas responderme como quitar aquello

    besos

    ResponderEliminar
    Respuestas
    1. Pásame la dirección del blog en cuestión, que en ninguno de los dos que tienes enlazados en tu perfil usas esa plantilla.

      Eliminar
  86. Hola Oloman, he estado mirando por tu blog como conseguir justamente el efecto contrario, que los post no sean translucidos y puedan ser opacos porque sino la letra no se lee bien, me puedes ayudar como hacerlo ??? la plantilla watermark siempre sale transparente y me gusta el papel que he puesto de fondo. Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Parece que ya lo solucionaste ¿no? Era cuestión de añadir un color o cambiar la imagen de fondo de .post-outer

      Eliminar
  87. Hola Oloman, quisiera poner la cabecera del blog transparente y el titulo de la entrada del blog que esta en rojo ponerla gris pero por mas que lo he intentado no lo consigo.
    Gracias
    http://mirincon63.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Hola. Lo del color del título lo tienes que cambiar en esta parte:
      #first h2 a {
      color: #b9181c;
      text-shadow: 0 1px 0 #f5f5f5;
      }
      Ese #b9181c, que sea un gris, por ejemplo #808080 si lo quieres igual que los otros.

      En cuanto a lo de la cabecera transparente no entiendo lo que quieres. El fondo es blanco y así se ve.

      Eliminar
  88. Hola Oloman, gracias por tu página y por tomarte la molestia de ayudar a cada uno de los que te consultamos.

    He intentado varias veces ponerle transparencia a mi blog en el sector del fondo de los Post y los gadgets de la derecha, de manera que quede el se vea el fondo pero eso no ocasione que no se vea bien elt exto; y no lo consigo, sólo logro que me quede transparente el texto y hasta las imágenes.
    Mi blog es éste:
    www.porsiempreorgulloyprejuicio.blogspot.com

    Estaría sumamente agradecida si pudieras ayudarme.

    Me gustaría lograr en mi blog el efecto que tiene este:
    http://losdiosesdelrlyeh.blogspot.com/2011/11/concierto-para-flauta-y-muerte.html

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Debo haber tardado demasiado en contestar porque veo que ya lo tienes solucionado, pero aprovechando que pasé por allí, prueba a añadir un padding como este a esta parte de tu CSS:
      .post {
      padding: 10px;
      margin: .5em 0 1.5em;
      border-bottom: 1px dotted transparent;
      padding-bottom: 1.5em;
      background-color: rgba(9, 6, 6, 0.7);
      }

      Eliminar
  89. Muchísimas gracias, no te puedes imaginar la de vueltas que le he dado, de verdad mil gracias.

    he intentado hacer el banner con gimp con fondo transparente pero no lo consigo al final siempre se ve la zona alfa color negro y de ahí no salgo.

    ResponderEliminar
    Respuestas
    1. No estoy familiarizado con GIMP, pero normalmente sólo se trata de marcar el nivel de opacidad en tanto por ciento.

      Eliminar
  90. Amigo Oloman, se le escapó un error de ortografía o tecleado, en la tercera línea de la entrada donde usted pone "allos" seguro quiso escribir "ellos".

    Hace mucho que no entraba en su blog creo que desde el 2009, porque dejé el diseño del mío para ponerme a publicar, y ahora estoy haciendo lo contrario, estoy aprovechando las vacaciones y estoy dejando de publicar entradas en pro de personalizar el diseño de mi blog. Por eso es que últimamente estoy de regreso muy seguido por aquí.

    Pero lo que me sorprendió de su blog fue que está "estrenando" diseño. Veo que ha cambiando su antiguo diseño por uno nuevo, y déjeme decirle que sigue muy elegante como siempre y el solo hecho de verlo provoca volver al igual que ocurría con el anterior. Usted sí que es un profesional del diseño. ¡Siga adelante con ese mismo empeño y entusiasmo!

    ResponderEliminar
    Respuestas
    1. Gracias por avisar, aunque este post está ya un poco desfasado y no funciona del todo bien en todas las plantillas.

      Y muchas gracias también por los piropos ;)

      Eliminar
  91. Mi plantilla tiene muchas modificaciones y no puedo encontrar ni siquiera .post ! Se que no es tu trabajo, y agradezco tus aportes pero me podrías decir donde coloco el código, otras opciones?

    ResponderEliminar
  92. Hola. Lo que no sé es lo que quieres hacer porque esto del fondo transparente sirve para algo si debajo de las entradas hay un fondo gráfico de algún tipo. Con un fondo de color plano como el que tienes no se apreciará nada.

    De todas formas si en tu CSS no encuentras .post no te preocupes, simplemente créalo.

    ResponderEliminar
  93. Hola, hace bastante tiempo que te sigo.

    Buscando por Google encontré otra forma parecida de hacer un efecto transparente con este código:

    div.date-outer { opacity:0.7; filter:alpha(opacity=70); }


    Pero solo afecta al fondo de están las entradas, mi pregunta es ¿cómo sería el código para la barra lateral? No sé cuál es su código de clase x.x

    Gracias!

    ResponderEliminar
    Respuestas
    1. En Blogger normalmente es #sidebar-wrapper o .sidebar

      Eliminar
  94. hola oloman yo soy nuevo en esto y te quiero preguntar como hiciste para poner la cabecera de tu blog en ese lugar? ya que se ve muy bien hay si puedes me podrias decir
    espero tu respuesta.

    ResponderEliminar
    Respuestas
    1. Hola. Edita la plantilla, busca el widget cabecera (Header) y cambia el valor de LOCKED pasándolo a false. Luego ya lo podrás mover a la barra lateral, encima de todo. Aunque es para otra cosa, en el principio de este artículo se explica por qué hay que hacer eso y cómo.

      Eliminar
  95. Hola, no sé si me puedes ayudar, estoy usando la plantilla picture window de blogger y me gustaría quitarle la transparencia de la columna cabecera. Mi blog es www.ipuntodecruz.com Gracias.

    ResponderEliminar
    Respuestas
    1. Hola. He visto tu blog, pero no entiendo que transparencia quieres quitar. Hay un dibujo como cabecera y parece ya con fondo transparente o al menos con el mismo color que el fondo (que simularía lo mismo) ¿qué pretendes conseguir quitando una transparencia y cual es esa transparencia?

      Eliminar
  96. Hola Oloman, yo mi blog (si mal no recuerdo) usa la plantilla sencillo de blogger ya tengo fondo transparente, pero es negro o obscuro, y me gustaría cambiarlo y dejarlo blanco, pero no puedo encontrar eso de .post que dices aqui arriba, me podrias ayudar? es que si hago esto de cambiar la plantilla personanizada (que seria un poco más facil) tendria que poner todo de nuevo (menu, gadgets, etc).

    Espero puedas ayudarme.

    ResponderEliminar
    Respuestas
    1. Hola Amarithia. Ee fondo semitransparente lo tienes en esta parte de tu plantilla:
      <Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
      default="url(//www.blogblog.com/1kt/travel/bg_black_50.png)"/>
      <Variable name="tabs.selected.background.gradient" description="Tabs Selected Background Gradient" type="url"
      default="url(//www.blogblog.com/1kt/travel/bg_black_50.png)"/>
      <Variable name="widget.outer.background.gradient" description="Sidebar Gradient" type="url"
      default="url(//www.blogblog.com/1kt/travel/bg_black_50.png)"/>

      Con que cambies esas imágenes .png, ya lo tienes ;)

      Eliminar
  97. Hola Oloman!.

    Fíjate que tu post me apareció en una de mis intensas búsquedas en Google sobre ¿como aplicar un fondo a una sola entrada?.

    Pues mi Blog es de fondo negro, y yo quiero aplicar a una sola entrada un fondo blanco, debido a que tengo un iframe incluido en ella que tiene fondo blanco, entonces queda muy feo ver mi post de fondo negro con ese iframe de fondo blanco, quiero que dé la apariencia de que el iframe ocupa toda la entrada y hace parte de todo el contenido en ella.

    Intenté poner el color del fondo del iframe como transparente con un background=transparent añadido, pero no se permite por que el fondo original del iframe es proporcionado por un tercero del cual no tengo acceso a él.

    ¿Sabes algún truco para aplicarle fondo blanco solo a una entrada especifica?

    Uff!.. alargué mucho el tema, pero espero que me entiendas.

    Mil y mil gracias Oloman!...
    :D

    ResponderEliminar
    Respuestas
    1. ¿Un truco? Sí, uno muy fácil. Edita ese mismo post y dentro de él escribe:
      <style>.post-body {background: white !important;}</style>

      Guarda y visualiza cómo ha cambiado el aspecto del post ;)

      Eliminar
  98. Hola, ya intente, pero lo que pasa es que en vez de que se transparente el fondo, se transparenta el texto.
    ¿Qué hago?

    ResponderEliminar
    Respuestas
    1. Bueno, realmente deberían transparentar ambos, fondo y texto. Esto fue una solución muy simple para lo que proponía el título, aunque funciona -casi- perfecto para valores de transparencia no muy altos.

      Eliminar
  99. Hola y gracias por tu post. Tengo un problema, sí que consigo la transparencia pero también se vuelven transparentes las fotos que pongo en el post. ¿cómo hago para que sólo sea transparente el fondo del post? Saludos

    ResponderEliminar
    Respuestas
    1. Hola. No sé cuál es el blog dónde pusiste la transparencia y por tanto, no sé si la que te voy a dar es una solución viable, pero si el fondo es de un color plano, lo más fácil es indicar ese color en formato RGBA en lugar de HEX (#). El RGBA permite indicar el grado de opacidad. Ejemplo: rgba(0,0,0,0.5)

      Eliminar