17/11/14

Como poner un fondo tras el menú de páginas

Hace poco alguien me escribió para preguntarme cómo en el blog prediseñado número ocho puedo hacer que tras la barrita de pestañas, se vea ese efecto como de lazo o cinta:


La idea la saqué del blog de Lauren Conrad, que tiene una barrita con efecto cinta en la parte superior:


Es muy cómodo además porque nos permite ponerlo de fondo, y así poder luego añadir o quitar páginas o pestañas como haríamos normalmente sin que afecte en nada a la barrita.

Por supuesto no ha de ser un lazo. Podéis poner rayitas o lo que queráis:


Además es super fácil de poner.

Necesitáis tener lo que es la "base" del lazo o fondo, y al igual que con los fondos de los blogs, ha de ser "seamless". O sea, tenéis que tener en cuenta que se va a repetir.

Luego añadís en CSS:

.tabs-inner .widget ul {
background: url(URL fondo) repeat-x;
height: 45px;
/*pdb*/
}

Poniendo en el paréntesis la URL de la imagen que vais a usar como fondo, y cambiando el 45 (altura) por el alto de vuestra imagen.

Si no queréis que se repita (porque no es un patrón seamless o porque os resulta más fácil diseñarlo así), deberéis ponerle también el ancho de lo que mide (donde dice width).

Lo único que tenéis que tener en cuenta que entonces si cambiáis un día el ancho del blog, deberéis repetirlo, mientras que de la otra manera podéis cambiarlo y seguiría quedando bien.

Es probable además que debáis ajustarlo un poco, moviendolo hacia derecha o izquierda. Yo ya he puesto margin-left en el código para moverlo un poco, pero deberéis cambiar el -40 por lo que necesitéis:

.tabs-inner .widget ul {
background: url() repeat-x;
height: 49px;
width: 943px;
margin-left: -40px;
/*pdb*/
}

Besos y espero que os haya gustado. Tutorial facilito pero bien chulo :)

El miércoles os muestro mi nuevo blog. ¡¡Yaaay!!

Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

25 comentarios

  1. ¡Gracias! Lo pondré en práctica espero :)

    ResponderEliminar
  2. Queda chuloooooooooo! pero a mi me da miedito meterme a trastear con htlm!! jajajajaja ;) Bscosss mil y feliz semana!

    ResponderEliminar
  3. Juuuusto lo que necesitaba!! Pero una pregunta, dices que hay que añadirlo en CSS, pero en blogger cómo habría que ponerlo? Osea, la plantilla de blogger deja editar el html, no CSS. ¿Iría en body, head...? Es que no me aclaro nada con esto de los códigos :(

    Gracias bombón! Ah, y ya estoy preparándome para poner en práctica todo lo aprendido en Cómo ganar dinero con tu blog, mil gracias por tus consejos!

    ResponderEliminar
  4. Blanca, lo estoy intentando pero no me sale :(, lo pongo en el editor de HTML o en plantilla personalizar css?

    YO he diseñado una imagen entera para que ocupe todo, le pongo el código pero no lo reconoce!!

    MUacksss

    ResponderEliminar
  5. Mil gracias por la información, se me hace muy útil.
    Besos

    ResponderEliminar
  6. Bueno, genial. Hoy estaremos todos probando todos los fondos pattern en la barrita jiji.
    Muchas gracias por el tutorial y recupérate de tu tobillo. Besos

    ResponderEliminar
  7. Voy a intentarlo....a ver si lo consigo!!! Muchas gracias Blanca !!!

    ResponderEliminar
  8. Qué facil! Gracias por este tutorial Blanca! Un beso!

    ResponderEliminar
  9. Hola!!

    Qué chulo el tutorial, además muy sencillo, cosa que se agradece si eres una paleta del CSS y el HTML como yo :D. Estoy pensando en ponerle una barra de esas a mi blog, me guardo el tutorial para cuando me digne a hacerlo :).

    Qué curiosidad por tu nuevo blog, qué será... No sé si has dicho ya en alguna de las entradas anteriores qué tipo de blog va a ser, soy nueva y no estoy muy al día hehe, pero lo espero con ganas!

    Un beso!

    http://unaestudiantenomada.blogspot.de/

    ResponderEliminar
  10. Que chulo!! gracias por explicarlo, yo sigo encaprichada del borde de blonda...algún día nos lo contarás jeje, besos!

    ResponderEliminar
  11. Me apunto este código CSS para la próxima vez que retoque un poquito el blog porque me parece que la cinta de fondo en las pestañas le da un toque distinto y elegante al blog.

    Un abrazo,
    onlyness.blogspot.com.es/

    ResponderEliminar
  12. Estoy haciendo algo mal, porque no me reconoce la imagen. Seguiré probando, no obstante. Por cierto, me pasa como a Yasmin: estoy enamorada de la blonda de este blog. Es preciosa. Un abrazo y gracias por todos tus consejos y tutoriales.

    ResponderEliminar
  13. Solo te escribo para darte las gracias por compartir estos truquitos, yo he empezado hace poco con mi blog y me están ayudando mucho tus entradas. El día solo tiene 24 horas y se agradece que compartas un poco con los demás. No es peloteo simplemente creo que a todos nos gusta que valoren nuestro tiempo ;)

    ResponderEliminar
  14. me encanta tu blog, ahora es muuy tarde, pero voy a leerlo mañana todo bien bien para darle un cambio radical a mi blog ;)

    ResponderEliminar
  15. De momento no lo voy a usar, pero me lo guardo en Pinterest para un futuro. ¡Gracias!

    ResponderEliminar
  16. Hola!! una pregunta tienes idea de donde se puede conseguir patrón seamless de esos para poner en el menu de blogger?

    ResponderEliminar
  17. Muy bueno tu blog, me ayudo muchísimo. Saludos.

    ResponderEliminar
  18. Hola blanca llevo ya un año a ratitos con mi blog, el tuyo es precioso y sencillo. me cuenta mucho
    tu sigues algun blog..si eres seguidora de alguno, podriar seguir el mio raquelysucasa

    http://raquelysucasa.blogspot.com.es/

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

    ResponderEliminar
  20. Muy bonito pero faltan detalles para poderlo entender,dónde se coloca el código,se colocan ambos?Sólo 1...
    Me quedé a medias.

    ResponderEliminar
    Respuestas
    1. Si me dices más claramente tu duda, a lo mejor te podría ayudar. ;)

      Eliminar
  21. Hola! estoy empezando mi blog, me ha sido de mucha ayuda tu blog, saludos.

    ResponderEliminar
  22. Muchísimas gracias me canse de buscar esto.

    ResponderEliminar
  23. Hola por las dudas¿tenés un post que diga cómo hacer que el texto de una entrada rodee la imagen? Tu blog es espectacular¡Gracias!

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.