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;
}
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.
Y muchos más artículos interesantes si nos sigues en...
Hola! te hago una pregunta, como haces para poner en el lateral izquierdo la imagen CARGANDO? yo ya tengo algunos en flash.
ResponderEliminarAunque seguro que hay más sistemas, aquí tienes el mío...
ResponderEliminarhttp://oloblogger.blogspot.com/2009/04/aviso-para-la-carga-de-una-pagina.html
grax oloman! nos vemos pronto!
ResponderEliminaruna cosas mas: Como pongo la fuente COMIC SANS MS a todo el texto de todo el blog?
ResponderEliminarMuy 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.
ResponderEliminarSaludos Oloman ;D ahi pasas por mi blog
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:
ResponderEliminarfont-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.
Me encanta en el ejemplo, lo probaré y luego te digo como queda.
ResponderEliminarSaludos!!!
xq letra maldita? es genial esa letra.
ResponderEliminarHola oloblogger voy ha probar esta en uno de los blog a ver que tal =D
ResponderEliminarVi 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...
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!
ResponderEliminarYa está, un encanto para jugar en todas las partes del blog!!!
ResponderEliminarOdio a la Comic? jajaja esto sí que no lo había leído :D
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.
ResponderEliminarZona 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.
JEJE al parecer si =D
ResponderEliminarEspero 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
Gracias por los consejos de tu blog. Empezaré a usarlos
ResponderEliminarUn saludo
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.
ResponderEliminarGracias por brindarnos siempre tu tiempo para responder nuestras dudas. abrazo.
Hola Oloman.
ResponderEliminarDespué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.
ZONA MR, sí que ví tu página en Feisbuc... y también te mandé un nuevo mensaje en Uniblog.
ResponderEliminarANTONINO, 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"?
sisi, habia hecho eso, pero igual no funciona. las plantillas son:
ResponderEliminar1) reunders 3
2) No. 565
creo que OFO1965 se refiere a la flecha de ir arriba.
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.
ResponderEliminarO 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.
Que ojo tienes. Haber si no pierdo el hilo y sigo tus consejos mas regularmente.
ResponderEliminarRodry 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.
Je, je. Ahora sí.
ResponderEliminarEl 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í.
Me ha servido mucho este artículo, sinceramente este blog siempre deja algo nuevo! Saludos y felicitaciones.
ResponderEliminarMe gusto, este post ya que yo uso en mis entradas fondos transparentes!! ^^
ResponderEliminar---
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
Eso te va a costar estudiar más sobre el tema plantilla, porque ahí hay un montón de modificaciones para lograr eso.
ResponderEliminarComo 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.
Este comentario ha sido eliminado por el autor.
ResponderEliminarPues, 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..?
ResponderEliminarSaludos!! y Gracias...
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:
ResponderEliminar#recent-posts .home-post .upper .intro-post img {
padding: 1px;
border:2px groove #666666;
background: #000;
width:200px;
}
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!! ^^
ResponderEliminargrax oloman, ya funiono. cuando quiera pasate x mis flogs:
ResponderEliminarlospibesjvn.blogspot.com
rodrycompany.blogspot.com
Je, je... Ya te has convertido en otro apestado por la Comic. Saludos.
ResponderEliminaryo 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.
ResponderEliminarCarlos, 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.
ResponderEliminarHola, 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...
ResponderEliminarGracias, espero haberme explicado
Abraham, tendrías que hacer justo lo que se dice en el comentario anterior al tuyo.
ResponderEliminarOtra 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.
Muchas Gracias, ya lo pude hacer y se ve bien, apenas estpy haciendo el blog, pero ese efecto si que le da vida, ¡ Exito !
ResponderEliminarHola 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?
ResponderEliminarareka-crafts-manualidades.blogspot.com
Hola Areka
ResponderEliminarAhora 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)
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 :(
ResponderEliminarHola. Vamos a ver...
ResponderEliminarEn 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>
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!!!...
ResponderEliminarDerrame, ¿puedes probar lo del comentario anterior al tuyo?
ResponderEliminarYa realice esos cambios y no ha mejorado...
ResponderEliminarTendré 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.
ResponderEliminarA ver si pillo un rato y hago una entrada más completa.
Muchas gracias Oloman!!! estare al pendiente... suerte!!
ResponderEliminarVale, pero espero que tengas muuuucha paciencia ;)
ResponderEliminarEn 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??
ResponderEliminarGracias!!
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
ResponderEliminara 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
Anónimo, no sé a qué te refieres con eso de la "pestaña de las fotos"
ResponderEliminarComunidad 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.
hola, soy new en esto, y quiero saber donde esta el selector que forma los posts! no lu ubico, gracias
ResponderEliminarEn tu caso Jazchuxita, posiblemente ande por aquí...
ResponderEliminar/* Posts
----------------------------------------------- */
body .main-inner .Blog {
Gracias amigo/a ya lo encontreeeeee (:
ResponderEliminarhola, 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!
ResponderEliminarYa vi que cambiaste de plantilla Jaz:9 y con eso vuelve a cambiar todo. Así que cuando decidas la definitiva, hablamos.
ResponderEliminarSaludos.
ResponderEliminarEn 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.
Julenuri prueba a añadir esto en la plantilla antes del cierre de SKIN, o en CSS desde el Diseñador--> Avanzados:
ResponderEliminar.column-right-outer {backround:#000000;}
Si funciona, ya es cuestión de escribir ahí las propiedades que prefieras.
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¿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.
ResponderEliminarBuenas,
ResponderEliminarYo no tengo .post { en mi plantilla.
Donde tengo que colocarlo esactamente.
ranhada.com
Creo que en tu caso es post-body, Nando
ResponderEliminareh 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.
ResponderEliminarNo podría poner la transparencia en diseño-formato-plantilla de entrada, como si fuera una imagen? en ese caso como lo haría?
ResponderEliminarNando, 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.
ResponderEliminarY 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.
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.
ResponderEliminarMi 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.
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
ResponderEliminarhttp://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.
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?
ResponderEliminarBike ou non vai ¿Has probado ha hacer lo del post y luego añadir lo que indiqué en el comentario #39?
ResponderEliminarSi, lo he probado, y no funciona. Por cierto, el blog es este http://bikeounonvai.blogspot.com/
ResponderEliminarGracias
No hay solución? Es que sino tendré que reformar el blog.
ResponderEliminarBike 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".
ResponderEliminarah, claro. Es que aún lo tengo sin acabar. Lo dejo abierto de forma provisional para que puedas echarle un vistazo.
ResponderEliminarGracias, un saludo.
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.
ResponderEliminarPues 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.
ResponderEliminarUn saludo y muchas gracias
Hola a todos!
ResponderEliminarMe 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 :)
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
ResponderEliminarHola 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 ??
ResponderEliminarMil gracias de antemano por tu atención.
Salu2!
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
ResponderEliminarGracias 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
ResponderEliminarSalu2!
Creo (le tengo manía a las plantillas nuevas) que es esta imagen. Búscala en tu código y la sustituyes.
ResponderEliminarhttp://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;...
Alguien me puede ayudar a poder cambiar mi fondo de texto, osea lo que pasa es lo siguiente:
ResponderEliminarhe 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
olvide mencionar mi blog es :
ResponderEliminareleganciawe.blogspot.com
Jorge, pásame la dirección de la imagen de fondo que tienes puesta para localizarla en tu código, que no la veo.
ResponderEliminarHola 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.
ResponderEliminarTendrías que modificar el .date-outer Ahí tienes un background negro. Cámbialo para dejar la propiedad como background: rgba(0,0,0,.6);
EliminarEl último parámetro es la transparencia (60% en el ejemplo).
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
ResponderEliminarTras 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í:
ResponderEliminarbackground: 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
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
ResponderEliminarOjalá puedas responderme como quitar aquello
besos
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.
EliminarHola 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.
ResponderEliminarParece que ya lo solucionaste ¿no? Era cuestión de añadir un color o cambiar la imagen de fondo de .post-outer
EliminarHola 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.
ResponderEliminarGracias
http://mirincon63.blogspot.com.es
Hola. Lo del color del título lo tienes que cambiar en esta parte:
Eliminar#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.
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:
ResponderEliminar.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);
}
Muchísimas gracias, no te puedes imaginar la de vueltas que le he dado, de verdad mil gracias.
ResponderEliminarhe 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.
No estoy familiarizado con GIMP, pero normalmente sólo se trata de marcar el nivel de opacidad en tanto por ciento.
EliminarAmigo 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".
ResponderEliminarHace 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!
Gracias por avisar, aunque este post está ya un poco desfasado y no funciona del todo bien en todas las plantillas.
EliminarY muchas gracias también por los piropos ;)
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?
ResponderEliminarHola. 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.
ResponderEliminarDe todas formas si en tu CSS no encuentras .post no te preocupes, simplemente créalo.
Hola, hace bastante tiempo que te sigo.
ResponderEliminarBuscando 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!
En Blogger normalmente es #sidebar-wrapper o .sidebar
Eliminarhola 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
ResponderEliminarespero tu respuesta.
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.
EliminarHola, 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.
ResponderEliminarHola. 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?
EliminarHola 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).
ResponderEliminarEspero puedas ayudarme.
Hola Amarithia. Ee fondo semitransparente lo tienes en esta parte de tu plantilla:
Eliminar<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 ;)
Hola Oloman!.
ResponderEliminarFí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
¿Un truco? Sí, uno muy fácil. Edita ese mismo post y dentro de él escribe:
Eliminar<style>.post-body {background: white !important;}</style>
Guarda y visualiza cómo ha cambiado el aspecto del post ;)
Hola, ya intente, pero lo que pasa es que en vez de que se transparente el fondo, se transparenta el texto.
ResponderEliminar¿Qué hago?
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.
EliminarHola 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
ResponderEliminarHola. 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)
EliminarOla que tal m podrás ayudar pongo el código pero no más no sólo se pone color blanco no agarra nada de transparencia
ResponderEliminarIntente con este :
.post {
background-color: rgba(0, 0, 0, 0.0);
}
.sidebar {
background-color: rgba(0, 0, 0, 0.0);
}
.widget {
background-color: rgba(0, 0, 0, 0.0);
}
.Header h1 {
background-color: rgba(0, 0, 0, 0.0);
}
.Description {
background-color: rgba(0, 0, 0, 0.0);
}
.Tabs {
background-color: rgba(0, 0, 0, 0.0);
}
Y tampoco este es mi blog
Animeveracruzmx.blogspot.mx/?m=1
Hola. El último número del RGBA es precisamente el nivel de tranparencia. 0.0 sería totalmente transparente, así que es como si no pusieras nada. Prueba con 0.5
Eliminar