Fondos bloc para post | Oloblogger Yo que pensaba que esta era una plantilla de lo más corriente, incluso tirando a cutre, y resulta qu...

19 de febrero de 2009

Fondos bloc para post

Yo que pensaba que esta era una plantilla de lo más corriente, incluso tirando a cutre, y resulta que ya llevo unas cuantas peticiones centradas en cómo hacer el efecto bloc. En concreto, parece que el fondo de las entradas gusta bastante.

Azul
Negro
Pues nada, aunque ya lo he pasado varias veces por correo electrónico, ahora lo colocaré de manera pública y notoria, haciendo honor al "No rights reserved" de la sidebar.

La que se utiliza aquí está pensada para un fondo negro y es el jpg de la derecha (imagen original pinchando). Pero como la gran mayoría de blogs tienen fondo claro, he confeccionado 12 variaciones con otros tantos colores y formato gif para que los podais usar a discreción.

Pinchando en cada una, accedeis a la imagen original alojada en Photobucket.













Por si las flies, la manera de implantar este tipo de fondos es incorporando a la clase que controla el bloque de post (normalmente llamada de esta misma manera), el atributo BACKGROUND. Si ya lo teneis, sólo hay que cambiar la dirección de la imagen pre-existente, por la de la que se pretende poner nueva. Más o menos, tendreis algo parecido a esto...

.post {
margin:5px;
font-family: Arial, Comic;
background:url(http://img140.imageshack.us/img140/5438/blocazul1200x35xl2.gif) repeat-y left top;
}

...y la línea en negro es la que hay que añadir/modificar para que se quede como es debido. Importante colocar el REPEAT-Y y LEFT TOP. Seguramente, también tengais que modificar los pixels del PADDING para la izquierda y la derecha (cuarto y segundo número, respectivamente)

¿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

125 comentarios :

  1. hola! ak pasando!
    buen blog!
    pasaTE x el mio! ;)
    t espero!

    ResponderEliminar
  2. Blog estupendo...dueño de el mejor aún.Gracias por enviarme la imagen de fondo y las instrucciones.Quedo muy bien.No solo copie el background si no también el resto del código y mejoró mucho,eso sí;Tuve que ampliar un poco el ancho para que se viera mas elegante.El único detalle pendiente es que el título de la entrada me quedo muy al borde superior de la imagen.Y buscando soluciones me he llevado la sorpresa de este post.De verdad de mucha ayuda.Felicidades,

    ResponderEliminar
  3. No me extraña que te pidan el fondo del bloc ¡No es para nada cutre! Mola bastante, jaja.

    Me encanta el blog^^ Lo sigo para hacer trapicheos en el mío... Aunque me he dado por vencida con la nube de etiquetas ésa, que algunas no las encuentra xD Pero bueno, cuando se me pase la perrería ya veré qué hago.

    Saludos^^

    ResponderEliminar
  4. Me he pasado para agradecerte oficialmente tu ayuda con mi blog.

    Hasta que te llegue mi agradecimiento en forma de pincho tortilla y cañas, te he dedicado la entrada de hoy.

    Gracias

    ResponderEliminar
  5. Luis: Para que el título del post se separe un poco del borde superior, tienes que cambiar el padding de la clase POST H3, que es la que controla los títulos. Es el primer número del atributo (arriba, derecha, abajo, izquierda)

    .post h3 {
    margin:.25em 0 0;
    padding:10px 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:#cc6600;
    }

    Sucre y Bipxivia: Me alegro de que os guste. Gracias.

    Chiti: Ahora mismo me paso a dar una vuelta por allí.

    ResponderEliminar
  6. Oloman me encanta que hayas librado tus secretos, probaré en mi plantilla que tál queda!!! gracias y besos!!!

    ResponderEliminar
  7. Gracias.Por tu ayuda.Con ese detalle ya solucione el problema.Queda pendiente el enlace de mi blog al tuyo.Te he enviado un mail explicándote como me gustaría que fuese pero no se como hacerlo.
    Un Abrazo y Felicidades.

    ResponderEliminar
  8. Hola oloman.
    pasaba a saludar, y aprovechar de hacerte una pregunta. en mi blog (http://clinicaysalud.blogspot.com/) algunos gadget quedan con letras fuera del espacio de la sidebar, y como esta tiene un borde, se ve mal, y no logro encontrar donde esta lo que tengo que modificar.
    te invito a que pases por el blog y veas lo que te digo. Ojala me puedas ayudar

    ResponderEliminar
  9. Que bien... Gracias por compartirlas...

    Saludos!

    ResponderEliminar
  10. Luis: Mail contestado.

    Alexis: Prueba a reducir los pixels de ancho de #sidebar{ a una cifra entre 300 y 315px. Aunque no he analizado la plantilla completa, creo que la línea WIDTH de #sidebar li a{ se podría eliminar completa.

    Antony: ...no hay de qué.

    ResponderEliminar
  11. Hola Oloman, hice lo que me dijiste, y se arreglo aunque no del todo, pero revise mas abajo, dentro de la misma sidebar, donde dice margin y cambie algunos valores de los pixeles, y se arreglo de inmediato. Sinceramente como soy nuevo, no se si fue eso lo que quisiste decir, pero ya esta arreglado.
    Gracias

    ResponderEliminar
  12. Hola Alicia.

    Prueba a quitar el color de fondo que tengas puesto en las entradas del blog a ver si te gusta más.

    ResponderEliminar
  13. mmm... no entiendo, el color de fondo que tengo es blanco...

    ResponderEliminar
  14. perdon me equivoque la direccion era http://dineroplataenlaweb.blogspot.com
    en el comentario anterior te di otra :$
    un saludo

    ResponderEliminar
  15. Siempre me pareció un fondo elegante porque al fin y al cabo son nuestros bloc de notas.

    Un abrazo.

    ResponderEliminar
  16. Genial fondo, pero como hahgo para instalar el atributo BACKGROUND en mi plantilla?

    Desde ya muchas gracias

    ResponderEliminar
  17. Alicia: Era simplemente una idea. Pretendía que probaras a ver si te gusta más quitando el color de fondo, no cambiándolo. Es decir, quitando el background de los posts. Y si vi tu blog, ya puedes imaginar que encontré la direccion buena :)

    Lys: Estoy acostumbrado a verte por otros lares, pero también me alegro de verte por aquí.

    Luk!tass: La última parte del post explica como colocar el atributo para el fondo de los post, aunque en muchas plantillas pudiera no cuadrar a la primera.

    ResponderEliminar
  18. jaja, tu blog es el mas bueno de todos, sin duda.
    gracias por el consejo.

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

    ResponderEliminar
  20. Alicia: No es el más bueno de todos, pero gracias. Ponlo en duda.

    Luk!tass: Ya veo que lo resolviste y anulaste tu pregunta.

    ResponderEliminar
  21. mira si estrene el directorio de blogs que hice con tu pagina.
    http://blogsdirectorio.blogspot.com/

    ResponderEliminar
  22. Me encanta gracias, tiene este blog muchas cosas

    ResponderEliminar
  23. Ale, ya tienes un seguidor más... andaba buscando un código que no encontraba ni por casulidad hasta llegar aquí, gracias y a seguir así...
    un saludo!!

    ResponderEliminar
  24. Oloman, la desesperacion me lleva a molestarte una vez mas. Mi blog http://clinicaysalud.blogspot.com, se desconfiguro, pero no totalmente, si entras en el blog te daras cuenta que no hay ningun problema en los titulos de los post, pero si pinchas en un titulo para ver el articulo, el titulo aparece totalmente desconfigurado, mas pequeño, ubicad al lado derecho, y hay dos fechas que se superponen...

    AAAAAAAAAA!!!!!!!!!!!!!!

    Que puedo hacer?

    Ayudame please

    Si es necesario te mando mi plantilla, aun tengo tu correo.

    Avisame

    ResponderEliminar
  25. A ver Alexis. Tienes en la página principal esto:

    <h2 class='date-header'>22/02/09</h2>
    <div class='post uncustomized-post-template'>
    <div align='left'><table><tr><td align='left' valign='top' width='100px'><a href='javascript:void(0)' onclick='javascript:toggleIt("4247127834254117653");' style='text-decoration:none' title='Desplegar esta entrada'><img id='data:post.id' src='http://alexis.moya.googlepages.com/cerebro-entrenearCustom2.jpg'/></a></td>
    <td><h3 class='post-title'><a href='http://clinicaysalud.blogspot.com/2009/02/manual-del-cuidado-primario-de.html'>Manual del Cuidado Primario, de pacientes con Demencia</a></h3>...

    Y en las páginas individuales de cada post, esto otro:

    <h2 class='date-header'>22/02/09</h2>
    <div class='post uncustomized-post-template'>
    <div class='title'>
    <a name='4247127834254117653'></a>
    <div class='date'><span>
    22/02/09
    </span></div>

    <h2 class='title'>
    <a href='http://clinicaysalud.blogspot.com/2009/02/manual-del-cuidado-primario-de.html'>Manual del Cuidado Primario, de pacientes con Demencia</a>
    </h2>...

    Verás que en el segundo caso, hay programado que salgan dos fechas y además, la segunda con una clase que no es la buena (DATE). La correcta es H2 CLASS='POST-DATE'. Lo que está en negrita, sobra.

    Con respecto al título, también usas en el segundo caso una clase incorrecta para tu plantilla. Para el título no está duplicada, pero hay que cambiar la que utilizas (en negrita) por H3 CLASS='POST-TITLE'

    Seguramente tienes una condición IF para definir un estilo distinto según los casos. Sería algo así como

    <b:if cond='data:blog.pageType == "item"'>

    Por tanto, busca esto último e intenta localizar las clases equivocadas para cambiarlas tal y como te he explicado. Puede haber varios sitios donde haya condiciones de este tipo.

    ResponderEliminar
  26. Dentro de mi ignorancia, he tratadoi de todas las formas posibles para una persona que no entiende nada de codigos html, y no puedo corregir mi problema.
    Lo que mas me complioca es que justo estaba tratando de acreditar mi blog como Web Medica Acreditada, y con esta imagen no se veria muy bonito que digamos.

    ResponderEliminar
  27. Estaré sin internet unos días, Alexis. Ve mandándome tu plantilla por correo y si no lo has solucionado, te lo veo cuando vuelva a tener conexión. Un saludo.

    ResponderEliminar
  28. gracias Oloman por tu buena voluntad. Ten por seguro que en menos de lo que canta un gallo te envio mi plantilla, y por supuesto, espero lo que tenga que esperar...
    Muuuuchas gracias de nuevo...

    ResponderEliminar
  29. Buenas noches Oloman, me encanta tu fondo y te lo querría toma prestado, pero soy incapaz después de mucho intentarlo que se me ajuste a la izquierda la imagen de fondo de entrada.

    Mi blog es este:
    http://sentadoenlatrebede.blogspot.com/
    Supongo que no sea la misma plantilla qeu tu tienes porque la parte de .post no me sale igual a la tuya.

    Gracias de antemano por la ayuda.

    Saludos

    ResponderEliminar
  30. He conseguido hacerlo despues de unas horillas intentándolo, pero ahora lo que no nconsigo es cambiar los espacios entre el título y ,la parte superior del post y los comentarios y la parte inferior del post. Se me amontona demasiado para mi gusto. ¿Alguna sugerencia?
    Gracias ota vez de antemano por la ayuda
    Salu2

    ResponderEliminar
  31. Lagu, para los márgenes del contenido general del post, creo que ya has descubierto que es variando los valores del PADDING de esta parte:

    .post {
    margin:0px 0px 20px 0px;
    padding: 0px 30px 0px 80px;
    background:url(http://i252.photobucket.com/albums/hh27/olomansan/blocamarillo1200x35-1.jpg) repeat-y left top;
    }

    Para el título y la parte inferior (comentarios), tendrás que hacer algo parecido con el padding de

    .post-title {
    margin: 100;
    padding: 10;
    font-size: 125%;
    font-weight: bold;
    line-height: 1.1em;
    }

    1º, 2º, 3º y 4º cifra corresponden al espacio en pixels arriba, derecha, abajo e izquierda, respectivamente. Esto sirve tanto para PADDING, como para MARGIN, caso de que te haga falta en otra ocasión.

    ResponderEliminar
  32. Oloman, finalmente cambie la plantilla de mi blog, asi que te agradesco mucho el querer ayudarme. te invito a que la veas (http://clinicaysalud.blogspot.com), aunque me falta agregar las fechas a las entradas, pero estoy mas tranquilo ahora con esto. Hay un pequeño mensaje para ti en la sidebar.
    Nos vemos

    ResponderEliminar
  33. Me alegro Alexis. Ya he leído tu referencia y me gusta mucho. Gracias.

    ResponderEliminar
  34. Oloman, lo ultimo que me queda, y que es lo que te dije que ya me tenia mas tranquilo, es lo de las fechas en los articulos. Aun no puedo hacerlo y lo he intentado de distintas formas y no aparece. Podrias prestarme esta ultima ayud, y prometo dejar de molestarte.

    Gracias de veras, y que bueno que te haya gustado el pequeño mensaje

    ResponderEliminar
  35. Buenasss!!, en vista de que la ultima vez me ayudasteis: Y GENIAL!!. Venía a haceros otra consulta, y a FELICITAROS!!.

    Mi blog, lo he configurado viendolo todo el rato con Firefox, hasta que lo ví con Internet Explorer, y... NO COMMENT.
    De repente el blog, solo tiene borde por un lado, entre banner y cuerpo, aparece una línea gorda magenta que no debería ser así (si lo veis con Firefox, veréis lo que os digo), los enlaces los configuré de manera que se tacharan al poner raton encima, y en IE lo hacen, pero tarda un rato, y un enlace que tengo como "INICIO" está subrayado perennemente (T__T). Por no hablar del sangrado en la Sidebar... a su rollo!. Todo lo demás... respetable.

    ¿Hay alguna manera de que IE interprete los valores como hace Firefox, o al menos, no complique tanto el diseño?. Os pediría un poco de ayuda para cada cosita que os he puse antes (que si el subrayado, sidebar, bla bla bla), pero me temo que estais bastante ocupados... así que una referencia general, me vendría de escandalo.

    Muchisimas gracias de antemano!.

    Por cierto, teneis algun correo donde mandar este tipo de consulta que no tenga relación con nada?.

    UN SALUDO!

    ResponderEliminar
  36. Oloman, se que dije que lo unico que me faltaba era las fechas, pero se me ocurrio otra cosa, existe la posibilidad de que me digas como poner los titulos de las entradas como las tienes al pinchar sobre una etiqueta? donde sale la fecha, cuantos comemtarios, entradas relacionadas, etc, sin imagenes. Puede ser?

    ResponderEliminar
  37. Muchas ghracias por la ayuda Oloman, me ha sido de gran ayuda.

    Salu2

    lagu

    ResponderEliminar
  38. ELB, sé que le tendrás mucho cariño a tu plantilla, pero no hay una forma general de que las cosas se vean igual en distintos navegadores. Si pruebas con Opera, Safari o Chrome, seguramente también notarás diferencias adicionales.

    Lo más fácil es evitar diseños complicados que incrementan las diferencias mencionadas.

    El MARGIN y PADDING son fundamentalmente los atributos que más problemas dan. Aunque ambos son necesarios, se debe usar preferentemente el segundo cuando quieras dejar márgenes texto-borde.

    También es conveniente que no utilices EM ni PT. Para tamaños de letra, por ejemplo, utiliza PX. Idem con tamaños más grandes. En lugar de porcentajes, simplemente pon un número de pixels mayor.

    Con estas tres cosas se solucionarán muchos de los problemas que tienes.

    Lo del subrayado es como es. Ya he visto que lo tienes en un HOVER y simplemente, un navegador tarda más que otro, pero funciona correctamente.

    En esta página puedes ver algunas de las muchas diferencias que hay.

    Tendrás que armarte de paciencia e ir haciendo cambios poco a poco, comprobando los resultados en ambos navegadores. No me veo capaz de resolvertélo todo de un golpe, pero si tienes una pregunta más concreta, no dudes en hacerla.

    ResponderEliminar
  39. Alexis, no entiendo del todo lo que quieres hacer ¿Por qué no haces un montaje en una imagen para que me haga una mejor idea? Me la puedes mandar por correo o colgarla en algún alojamiento.

    ResponderEliminar
  40. Oloman, esot es lo que ,e gustaria que apareciera en la pagina principal, tal como tu lo tienes en las paginas de etiquetas.

    Aca va ua imagen

    http://rodrigomoyaromero.googlepages.com/oloblogger.jpg

    ResponderEliminar
  41. Ok. Ya lo pillo. Mándame una copia de seguridad de tu plantilla actual para verlo más fácil.

    ResponderEliminar
  42. Oloman, recien te envie mi plantilla al correo.

    espero...

    Gracias

    ResponderEliminar
  43. Tienes que reconstruir toda la tabla que muestra ahora mismo el +/- y el título del post. Debe quedar así:
    <b:includable id='PeekABooPost' var='post'>
    <div class='post uncustomized-post-template'>
    <table>
    <tr>
    <td width='100px'>
    <b:if cond='data:post.dateHeader'>
    <span class='date'><data:post.dateHeader/></span>
    </b:if>
    </td>
    <td width='400px'>
    <h3 class='post-title'><a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expand/collapse this post'>[+/-]</a> <a expr:href='data:post.url'><data:post.title/></a></h3>
    </td>
    </tr>
    <tr>
    <td>
    <span class='date'><b:if cond='data:post.numComments == 1'>1 Comentario<b:else/><data:post.numComments/> Comentarios</b:if></span>
    </td>
    <td>
    <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a>||</b:loop>
    </td>
    </tr>
    </table>

    La clase DATE configura el aspecto de la fecha y el número de comentarios. Si quieres cambiar algo, elimina de este trozo la clase y pon una etiqueta STYLE con el formato que quieras, o bien crea una nueva clase y sustituye DATE por el nombre que le pongas.

    ResponderEliminar
  44. Es increible lo que sabes de estas cosas... Espectacular, impresionante, y todos los adjetivos calificativos relacionados para usted, amigo mio... Funciono de inmediato, y con justo lo que queria...

    esta vez te pasaste, eres el mejor...

    graciaaaaaaaaaaaassssssssss

    ResponderEliminar
  45. MUCHISIMAS GRACIAS!!!!, de verdad. De momento, con voy a ir corrigiendo esos fallitos que me dices!!. Ya te iré contando!

    ResponderEliminar
  46. Hola de nuevo Oloman...
    Queria preguntarte como hacer para redondear el borde derecho del bloc, como tu lo tienes...
    Espero tu respuesta...
    Un saludo!!

    ResponderEliminar
  47. Aquí se usa una imagen de fondo (background), alineada a la derecha, dentro de la clase POST H3, o sea la clase del título del post, que por estar definida posteriormente a la clase POST, se superpone a esta última.

    .post h3 {
    font-size:20px;
    ...
    background:url("http://farm2.static.flickr.com/1075/1296745478_34407e65b3_o.gif") no-repeat right top;
    }

    ResponderEliminar
  48. MUCHAS GRACIASSSSSSSSSSSSSSSSSSS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    me sirvio mucho, es increible todo lo que sabes sobre esto...
    Un saludo

    ResponderEliminar
  49. Una cosa Luk!tass... bueno dos.
    Para que la esquina quede en su sitio, añade en la clase .post H3 un margen derecho negativo. Así se desplazará para la izquierda. Después puede que también tengas que retocar el margen izquierdo.
    Por ejemplo, yo tengo esto:
    margin:0px -30px 30px -15px;

    La segunda cuestión es sobre el fondo de la fecha. Me parece que has usado un .png, porque en IE se ve con fondo blanco. Para que no haya problemas, es mejor que utilices un .gif

    ResponderEliminar
  50. OK gracias por decirme lo de el fondo de la fecha, te agradezco mucho...
    Te hago una pregunta mas y no te molesto mas: se puede redondear la parte de abajo tambien?...
    Y otra vez gracias por lo de la fecha.
    Un saludo

    ResponderEliminar
  51. Ya que no utilizas las líneas 2 y 3 del footer, prueba a colocar allí una imagen de la esquina pero invertida (simétrica en vertical), de la misma manera como hiciste con el H3 para la esquina superior.

    Tendrías que cambiar la clase

    .post-footer-line post-footer-line-3 {
    ...
    }

    Si no la tienes la creas en tu CSS y ya está.

    ResponderEliminar
  52. :o ! NO HABIA VISTO un comentario anterior donde explicas como hacer para arreglar mi problema....ya lo arregle...muchas gracias por tener un blog tan genial!

    ResponderEliminar
  53. Joé, me encanta el formato de tu plantilla, pero no sé como ponerla en el mio.

    Me gustaría que pareciese el bloc de notas de indiana jones jejeje pero no se como ponerlo, porque no me aparece lo mismo que tú en el ejemplo.

    Es una faena, porque tu fondo es una pasada. Si me pudieses hechar una mano...


    Muchísimas gracias de antemano, porque me has ayudado mucho sin pedirtelo siquiera, gracias.

    Mi blog es este, si tienes tiempo para echarle un ojo, gracias otra vez.

    http://jonathangarcialopez.blogspot.com/

    ResponderEliminar
  54. JOhnny, en tu plantilla actual, la clase que debería contener el fondo que aquí se facilita es la WRAP2, no POST. Prueba a ver, aunque seguro que tendrás que hacer algún ajuste en cuanto a bordes y quizás márgenes.

    ResponderEliminar
  55. Tío eres un pedazo de crack¡¡¡
    Tenias razón, pero ahora tengo que buscar la manera de hacer el bloc de notas mas ancho y quitar los bordes de la plantilla que tengo debajo. Muuuuuuuuuuchas gracias

    ResponderEliminar
  56. Hola crack, he intentado redondear las esquinas, y no puedo, al hacerlo, no se redondea la parte superior, sino que me sale algo raro a partir de la primera entrada.

    Por lo demás, he seguido tus instrucciónes y zás, justo como yo quería.

    Gracias por todo amigo (si no fuera por ti...)

    ResponderEliminar
  57. Por cierto, que se me olvidaba, mi blog es

    http://jonathangarcialopez.blogspot.com/

    Gracias otra vez.

    ResponderEliminar
  58. Johnny, has usado el fondo para todos los contenedores (post, cabecera,...). Así no es fácil explicar cómo hacer la esquina redondeada, porque hay que modificar bastante la plantilla.

    Si quieres, puedes probar poniendo ese fondo sólo en el cuerpo del post y luego añadir la esquina en el H3, tal y como ya se ha comentado por aquí.

    Suerte

    ResponderEliminar
  59. No hay manera de redondear la esquina, joé que complicado es todo esto¡¡¡¡

    Lo he intentado de mil maneras, quitando el fondo de la cabecera, del post etc... y na de na.

    Lo dejaré por imposible.

    Por cierto, sabes como puedo separar el muelle del bloc de lo que tengo escrito a la izda??

    Donde sale el numero de visitas, archivo del blog, mi perfil etc.

    Es que parece que se me van a escapar de la libreta. Gracias otra vez.

    ResponderEliminar
  60. No conozco bien tu plantilla Johnny, pero juraría que es aquí:

    #sidebar-wrapper {
    clear:left;
    margin-left:20px;
    }

    Sobre lo de la esquina, en cuanto tenga un rato voy a preparar una plantilla completa con fondo bloc para que os la podais descargar.

    ResponderEliminar
  61. Eso funcionó a la perfección, muchísimas gracias!!!

    ResponderEliminar
  62. Hola genio! Me encanta tu blog asi que me convertirè en una seguidora más.Tengo un blog literario (cuentos cortos, reflexiones etc.) y apliqué lo que enseñas en esta entrada pero me encantaría por la temática, que los renglones no fuesen cuadriculados sino renglones simples horizontales, me podrías ayudar? http://delavivi.blogspot.com. No entiendo mucho aùn pero poco a poco y con maestros como tú, la mayoría de las veces resulta sencillo. Muchas gracias y espero tu respuesta

    ResponderEliminar
  63. Hola Vivian. En primer lugar, de todos los diseños que se dan aquí, has escogido el que tiene el fondo negro. A tu blog le quedaría mejor cualquiera de los otros que tienen transparencia en el lado del muelle.

    Por otra parte, para conseguir lo que quieres, tienes dos opciones. La segunda es la más fácil:

    - bajar a tu disco duro una de las imágenes y con un editor de idem, quitar las líneas verticales

    - buscar en internet algún diseño que te cuadre más

    ResponderEliminar
  64. Hola siempre aprendiendo contigo asi que nuevamente te doy las gracias (merecedor de un gran baner en mi blog)Lo malo es que no he encontrado ningun lugar que tenga diseño con renglones. Si lo conoces te agradezco me comentes.

    ResponderEliminar
  65. Vivian, con más tiempo te haría algo mejor, pero de momento prueba con esta imagen a ver si te gusta.

    http://i252.photobucket.com/albums/hh27/olomansan/cuaderno-1.jpg

    ResponderEliminar
  66. Oloman, gracias por tu dedicación a los problemas que todos te planteamos a diario. En realidad no pude ubicar esa direc, la busque en google y en http://photobucket.com y no tuve suerte tal vez no anotaste bien la url que me diste? Un saludo para ti desde Uruguay

    ResponderEliminar
  67. Oloman gracias ya lo entendí!! pero por ahora dejo el que estaba porque me encanta el borde con el rulo. Gracias!!

    ResponderEliminar
  68. Ok, Vivian, pero intenta con tiempo crear tus propios diseños y verás como te gustan más los resultados.

    ResponderEliminar
  69. Hola, es la primera vez que te escribo, te encontré en el Escaparate, tu blog es genial, me encanta el diseño... quiero hacerte una pregunta, como puedo hacer para poner este efecto de blog pero solo en algunos de mis post, no en todos, ya que algunos son videos y queda mal, mi blog es: enlaviadoc.blogspot.com
    Gracias María (c)

    ResponderEliminar
  70. María, a bote pronto, sólo se me ocurre que lo puedes solucionar a mano. Creas una clase con el fondo "distinto", aquel que vayas a usar menos veces. Luego, cada vez que redactes un nuevo post, si es de ese tipo, metes todo el post todo entre <DIV CLASS="Nuevaclase"> ... </div>

    ResponderEliminar
  71. Muchas Gracias por responderme, veré que puedo hacer, María (c)

    ResponderEliminar
  72. hola oloman

    hice los cambios en la plantilla pero el fondo no me sale en los comentarios y cada entrada me sale con fondo propio quisiera que me ayudaras para que me quede el fondo en todo el campo de las entradas como el tuyo

    .post {
    padding:35px;
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    background:url(http://lh3.ggpht.com/_TBh4zqHgV9g/StdMm6aMqbI/AAAAAAAAAko/05xuzB5wRoM/Dibujo.jpg)repeat-y left top;

    }
    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    }




    http://amoalplaneta.blogspot.com

    ResponderEliminar
  73. Si quieres el fondo bloc (o papel) para todo menos la sidebar, deberás usar el background en el contenedor #main-wrapper. Si lo quieres para todo incluso la sidebar, entonces en #outer-wrapper.

    ResponderEliminar
  74. muchas gracias oloman me ha funcionado muy bien
    tienes un exelente blog

    ResponderEliminar
  75. Me alegro de que te haya funcionado Sebastián.

    ResponderEliminar
  76. Hola oloman, ante todo felicitaciones por los premios20blogs te los merecias.

    podrias ayudarme con mi blog la seccion de etiquetas en mi blog se encuentra en la parte izquierda y al fijarme en el tuyo es diferente y mas bonito, encontre en otras paginas como cambiarle el fondo al cuadrado de etiquetas pero no me gusta mucho, podrias ayudarme a cambiar mi seccion de etiquetas con una imagen así el de tu blog ?

    ResponderEliminar
  77. Pues es un poco largo. Mejor echa un vistazo a Secciones con estilo I y los dos posts sucesivos.

    ResponderEliminar
  78. si bien dices que hay que cambiar la direccion
    "preexistente"

    en el BACKGROUND de .post {

    es aplicable para otra imagen???

    e el caso que asi fuera....

    tendria que ser de algun tipo o tamaño en especial???


    estare pendiente de la respuesta....

    que tengas un buen dia!!!1

    o (si no fuera de dia que duermas bien ...)


    jaja...

    ResponderEliminar
  79. Hecgabor, en un background puedes poner siempre la imagen que quieras y del tamaño que quieras. Sólo depende del efecto que quieras conseguir. Si la imagen es muy pequeña, se repetirá hasta cubrir el "hueco" a rellenar. Si es muy grande, sólo se verá una parte.

    ResponderEliminar
  80. gracias por tu respuesta...

    te felicito excelente blog


    me saco de apuros muchas veces ....


    :)

    ResponderEliminar
  81. HOla que tal oloman gracias por lo de adsense ya lo cheque a ver keme dicen,Bueno hice lo qeu dice en este post pero ahora la imagen que puse porque cambie las que tu pusiste como diseño por unamia pero no sale toda completa la imagen no se que pueda hacer ayudame porfavor ,y otra cosa como puedo centrar el nombre del titulo del post esque queda muy a la izquierda.GRACIAS
    DE:OROCHIMARUSAMA MI BLOG:animeycaricatura.blogspot.com

    ResponderEliminar
  82. Todo eso lo controla este selector
    #main .post h3 {
    margin:0 .5em;
    padding:5px;
    font-family: palent,arial black;
    font-size:10px;
    font-weight:bold;
    line-height:1.4em;
    color:#999999;
    background:url(http://www.fileden.com/files/2010/4/23/2837705//SHA.jpg) repeat-y left top;
    }

    Tendrás que añadirle un ancho y alto igual al de la imagen de fondo y cambiar el padding a un valor mayor de 5px para generar un pequeño margen y que no se te quede el título pegado al borde. Por últimoo, centra el texto.

    Añadir:
    width:504px;
    height:99px;
    text-align:center;

    Cambiar:
    padding:15px;

    ResponderEliminar
  83. Hola, Oloman
    Me Facina el diseño de tu Blog y ya soy tu seguidora.
    He puesto en practica este efecto y quisiera saber como hacer para juntar las entradas,es decir, que la hoja del bloc se vea continua.(como lo veo en el tuyo)
    soy novata.....

    http://miztutorialez.blogspot.com/

    ResponderEliminar
  84. Hola Miztutoz. En las plantillas clásicas sería cómo se explica en el comentario #73, pero tú usas una plantilla de las del nuevo diseñador. Eso quiere decir que hoy por hoy... no tengo ni idea.

    ResponderEliminar
  85. Oloman yo no encuentro esa zona pre-existente
    mira:
    .post {
    margin: 0 0 25px 0;
    }

    h3.post-title, .comments h4 {
    font: $(post.title.font);
    margin: .75em 0 0;
    }

    .post-body {
    font-size: 110%;
    line-height: 1.4;
    position: relative;
    .........
    .........
    .........

    ResponderEliminar
  86. Alomejor es por que mi plantilla es "de las nuevas" pero no me aparece lo de "font-family: Arial, Comic;"

    ResponderEliminar
  87. A lo mejor no. Seguro que no te aparece por ese mismo motivo.

    Prueba a poner el fondo en .post-body. Si no lo tienes en tu plantilla, que creo que sí, lo añades sin problemas a tu parte de estilo (CSS):

    .post-body {
    background:url(http://img140.imageshack.us/img140/5438/blocazul1200x35xl2.gif) repeat-y left top;
    }

    ResponderEliminar
  88. asi si me sale pero me sale como un cuaderno por entrada y un poco corto y me gustaria que fuese como el tuyo, osea que el blog entero sea un bloc
    (excepto el fondo)

    ResponderEliminar
  89. ¿Raúl de cual de tus blogs se trata?

    ResponderEliminar
  90. Nuevo diseñador = Casi imposible para mí... de momento ;)

    Prueba un experimento. Localiza esto...

    .content-inner {
    padding: 10px;
    }
    .content-inner {
    background-color: #ffffff;
    }

    Y lo sustituyes por esto:

    .content-inner {
    padding: 10px 10px 10px 50px;
    background:url(http://img140.imageshack.us/img140/5438/blocazul1200x35xl2.gif) repeat-y left top #ffffff;
    }

    A ver si hay suerte.

    ResponderEliminar
  91. Si gracias!!
    y ahora una ultima pregunta
    El espacio donde estan las anillas esta en blanco
    para entenderme mejor entra en el blog
    ¿Como lo quito?

    ResponderEliminar
  92. Bueno contesta cuando puedas si encuentro la respuesta te lo digo

    ResponderEliminar
  93. No tuve tiempo antes. Simplemente cambia #ffffff (color blanco) por la palabra "transparent" ;)

    ResponderEliminar
  94. Oloman, una vez más necesito tu ayuda.

    Encontré esta entrada mientras buscaba alguna otra que me ayude con mi cuestión, pero no.

    El asunto es el siguiente: Quiero que el blog tenga sólo dos colores: uno de fondo general (voy a mantener el actual, el más oscuro, cuyo color es #c0a159) y otro para los interiores de los gadgets (el más claro, el de las entradas #eeddbb). Quiero lograr un diseño uniforme como tiene Rosa en: El escaparate.

    No estoy pudiendo conseguir que los fondos (backgrounds) de mis gadgets sean iguales a los de mis entradas. Hay algo, como un efecto, que cambia la textura y el color de fondo aclarándolo y dándole un tipo de "rugosidad"; como si fuera algo translúcido claro (y no transparente). El ejemplo más claro (en mi blog) es el agregado que indica en donde estás, sobre las entradas individuales. Ahí llegué hasta el borde y no consigo el background correcto.
    Estuve buscando pero no sé donde encontrar el estilo de mis entradas y si lo hago, encuentro cosas tales como:
    background: $(post.background.color) $(post.background.url) repeat scroll top left y no sé como seguir.

    ¿Podés orientarme un poco?

    Muchas gracias.

    José.

    ResponderEliminar
  95. Pero se me queda como una linea con sombra,
    ¿se puede quitar?

    ResponderEliminar
  96. José, creo que te dije que lo del diseñador nuevo no lo controlo todavía ¿verdad? :D
    Bueno, pienso que pueden ser dos cosas. Una es que algunas de las plantillas incluyen "de serie" fondos semitransparentes. En ese caso, se podría arreglar probando con otra plantilla.
    Otra cosa que puede ser es que estas plantillas usan box-shadow para crear sompras degradadas. Quizás esas sombras sean lo que a tí te parecen transparencias.
    Lo siento pero no te puedo ayudar más en este tema. Al contrario... si descubres algo, lo comentas, por favor.

    Raúl, el problema que tienes ahora es el mismo que plantea José justo antes que tú. Por tanto, la respuesta es la misma :(

    ResponderEliminar
  97. Sí, me lo habias dicho.

    Como nuevo, no encontré nada; pero, leyendo tus varias entradas sobre TRANSPARENCIAS, imaginé que esto (o eso) era lo que no podía "descular" (léase desenmarañar). Quité la imagen de fondo de mi blog (todo en mi blog de pruebas) y así se expuso la transparencia en cuestión. Luego, siguiendo las instrucciones de tu entrada: "Fondos de entradas transparente" hice un css para toda la sidebar y fui probando el grado de opacidad hasta llegar al deseado.
    Aviso: hay que hacerlo con un color plano (o pleno) y sin texturas, éstas confunden.
    La "rugosidad" que mencionaba antes era fruto de mi imagen de fondo.
    Hasta ahí llegué. Me queda ver como hago para que los textos e imágenes queden sobre la capa transparente, y cómo hago para alternar secciones con y sin esta transparencia (puesto que ésta me entrega ese segundo color pretendido).
    Espero esto le sirva a alguien.
    Por si acaso, mi blog de pruebas es: http://elpdlv.blogspot.com

    Gracias, Oloman.

    Saludos a todos.

    ResponderEliminar
  98. Puff menudo lio me e hecho en la cabeza :P
    haber si lo consigo

    ResponderEliminar
  99. Raúl, si te sirve, en mi blog de pruebas, el que meciono arriba, hay un css que se llama. #sidebar-right-1. Al aplicarlo, pegándolo donde corresponde para tu plantilla, si tu sidebar tiene el mismo nombre (id) que la mía, y si además tu sidebar está a la derecha debería aclarársele el color, como pasa en mi caso.
    Mucho mas no puedo decirte, yo, apenas recién, terminé de hacer esto.
    Fijate también la entrada que menciono, de Oloman, es muy clara.

    Saludos.

    ResponderEliminar
  100. José, para intentar quitar la transparencia del contenido de la sidebar, añade la clase .widget-content -si no la tienes- e incluye las mismas propiedades de transparencia pero con una opacidad total. Estas propiedades sólo afectarán a los gadgets de la barra lateral, pero no al resto, no a lo que queda alrededor.

    Si funciona, haz lo propio con .blog-posts hfeed, que es la clase que engloba las entradas.

    Suerte

    ResponderEliminar
  101. Ok, lo pruebo. Gracias.

    ResponderEliminar
  102. Oloman, acá estoy.

    El truco .widget-content, por ahora no fincionó (o no supe dónde ponerlo)
    Todo lo estoy haciendo en mi blog de pruebas.
    Lo que sí hice fue ponerle borde a todo para ver las diferentes supeficies que quedan: Borde al .widget-content, borde al #sidebar-right1 y borde al #HTML7 (Cortitas); te pregunto:
    ¿Puede hacerse de esta combinación (#color+valor de transparencia) un color o un atributo (?) para aplicarlo directamente como background? Pregunto esto porque evidentemente esta forma afecta la transparencia de las letras, pero las letras se ven bien sobre todos los colores cuando estos van de background. Y si se puede hacer este color podría ser asignado a las superficies deseadas.
    Pensaba también si se pueden hacer marcos translúcidos para no tener que sacar nada de adentro de los widgets.

    Inquietudes.
    Voy a seguir intentando mañana.

    Saludos.

    ResponderEliminar
  103. Voy a rebobinar porque me he perdido... y perdona por ello :( ¿Cual es el problema exacto y dónde en la plantilla de pruebas tal y como está ahora mismo?

    ResponderEliminar
  104. Oloman, ahora mismo no hay problemas.
    Decidí dejar de lado, por unos días, las opacidades para hacer el diseño de la sidebar con colores. Una vez que consiga dejarla como quiero, me las veré con las primeras nuevamente para conseguir un óptimo resultado.
    Estuve leyendo mucho y todavía me parece muy complicado, para mí, lo que quiero conseguir con transparencias.
    Cualquier duda vuelvo a consultarte.
    Gracias por contestar.

    José.

    PD: No hay nada que disculpar, fueron muchas preguntas en varias entradas; imposible no perderse.

    ResponderEliminar
  105. Gracias por entenderlo ;)

    ResponderEliminar
  106. No entiendo !!!! lo q pasa es que no encuentro el lugar donde debo pegar las lineas negras !!! ayudame !!c xfa

    ResponderEliminar
  107. Esto está explicado para plantillas anteriores a las del nuevo diseñador. En tu caso, habría que sustituir la imagen http://www.blogblog.com/1kt/transparent/white80.png que forma el fondo de tus entradas, por la dirección de cualquiera de estas.

    ResponderEliminar
  108. Hola, muy buenas, ante todo, eres una maquina tio, me encante tu blog, te escribo por que tengo un problema, con el blque de las entradas,hay un espacio dentro de ellas, que se me queda en blanco y no puedo aumentar de tamaño para acercarlo a la sidebar, y ya no se que hacer que cambiar para que m quede bien, decirte que no tengo ni idea de esto, y me esta costando bastante trabajo, muchas gracias, por todo,un saludo.este es mi blog
    http://p-ortigal.blogspot.com/

    ResponderEliminar
  109. Anónimo, busca estas clases e IDs y cambia los valores de cada WIDTH por los que se indican a continuación:

    #main-wrap1
    width:600px;

    #main-wrap2
    width:600px;

    .main
    width:600px;

    .main .Blog
    width:600px;

    Esos cambios le darán un mayor ancho a la columna de las entradas. Echa un vistazo también a esta entrada:

    http://oloblogger.blogspot.com/2007/01/blogger-ancho-de-columnas.html

    ResponderEliminar
  110. Hola Oloman, lo primero felicitarte por tu blog, ¡es genial!
    Lo segundo, he intentado colocar las anillas como las tienes tú, pero no me sale :( Y es que yo de programación cero. A ver si me puedes echar una mano. Mi blog es: http://sunshinesgalery.blogspot.com/
    ¡Gracias de antemano!

    ResponderEliminar
  111. Tienes una plantilla de las nuevas, Sunshine y yo odio esas plantillas :(

    De todas formas, prueba a añadir esto:
    .blog-posts {padding:5px 10px 5px 50px;
    color:#000000;background:url(http://img140.imageshack.us/img140/5438/blocazul1200x35xl2.gif) repeat-y left top;}

    ResponderEliminar
  112. Creo que lo logré por ahí toqueteando jeje
    Lo único que no atino a cambiar es que empiece justo debajo de la cabecera. Tuve que cambiar la cabecera a formato .jpg para que tapase los renglones. ¿Es posible bajar el fondo para que no se coloque tras la imagen principal?

    Muchas gracias :)

    ResponderEliminar
  113. Sunshine, prueba a incluir esto otro más:

    .widget Blog {margin-top:30px;}

    ResponderEliminar
  114. ¿Puedo redondear las esquinas de la derecha en mi plantilla?
    Lo pregunto por que es de las nuevas o del nuevo diseñador o algo asi y no se si podre :S

    ResponderEliminar
  115. Raúl, pero es un poco comoplicado, así que no sé si se podrá hacer con las nuevas plantillas:

    Fondos cuando la longitud es variable.

    En tu caso, la imagen del centro sería la misma que usas, pero la de arriba y abajo tendrían qeu ser retocadas para que formaran las respectivas curvas.

    ResponderEliminar
  116. Oloman. Gracias por tu aporte, realmente me sirvio mucho. Quisiera preguntarte algo. Soy nuevo en esto de los blogs y he creado un sitio usando las herramientas de blogger,el tema es que hice algunos cambios en el encabezado de mi blog y cuando lo cargo parece que ubiese guardado configuraciones anteriores de tipo de letra y fondos; esto se ve al cargar el blog. Habria forma de que cuando lo cargue solo se vea la ultima configuración de letra y fondo que escogi; o mejor como lo hago??.

    Visita mi sitio:http://mbexcel.blogspot.com/

    Gracias..

    ResponderEliminar
    Respuestas
    1. Yo no aprecié nada al cargar tu blog, pero puede que con una conexión más lenta se vea cómo -por ejemplo- los títulos salen con una letra normal y luego se cambia a esa que pusiste. Si es eso lo que ocurre, esto se debe a que esa tipografía no es estándar y todo lo que no lo es, siempre se "pinta" tras la carga normal, encima de lo estándar. Bueno, más o menos este es el motivo :)

      Eliminar
  117. Gracias. Oloman, que buen sitio web. Quisiera preguntarte como puedo instalar un sidebar como el tuyo es que me parece excelente y con la plantilla "tipo block de notas" que nos facilitaste me parece que necesito el cambio..

    ResponderEliminar
    Respuestas
    1. Eso no es nada fácil como para explicarlo en un comentario y por otra parte, depende de cada plantilla. Vamos, que no voy a poder satisfacerte. Tendrás que experimentar con un blog de pruebas.

      Eliminar
  118. Estoy toda loca, no logro cambiar el fondo de mis entradas, no se como ni donde, poner el backgraund cada vez que lo inserto, se me pone el fondo transparente, ayudame porfa, quiero insertar una imagen. Gracias.

    ResponderEliminar
  119. Hola. En tu plantilla deberías tener esto:
    .post-outer {
    padding: 35px 15px;
    margin: 0 0 40px;
    background: #f6eed9 url(//www.blogblog.com/1kt/watermark/post_background_birds.png) repeat scroll top left;
    etc.

    Ese background es el que tienes que cambiar para que se cambie el fondo de las entradas. Puedes cambiar la imagen y/o el color (#f6eed9)

    ResponderEliminar
  120. Hola Oloman,
    quiero preguntarte como puedo hacer para quitar la imagen de pajaritos del fonde de plantilla watermark?
    Gracias

    ResponderEliminar
    Respuestas
    1. Pásame la dirección dónde la tienes instalada y la veo para que no tenga que montarla yo aparte.

      Eliminar