Personalización de Blogs Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

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!!


Facebook | Twitter | Pinterest | Bloglovin"

¡Gracias por suscribirte! Mil besos, Blanca

Fuente: este post proviene de Personalización de Blogs, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

internet avanzado blog ...

Tutorial Blogger: imagen detrás del menú en Blogger

Uno de los tutoriales más visitados del blog es: Cómo personalizar el menú de páginas de blogger Puedes leerlo aquí: Repasar el Tutorial En ese tutorial vemos como personalizar el código que nos da blogger paso a paso, analizamos cada fragmento y vamos poniendo los colores y tipos de letra a juego con el resto del diseño. Y una de las dudas que me han preguntado tanto en el blog como por email es: ...

internet blog intermedio ...

Tutorial Blogger: Cómo poner una lupa en el buscador de blogger

Seguimos personalizando el diseño del blog para adaptarlo completamente a nuestra idea. Hoy vamos a ver cómo poner una lupa en el buscador de Blogger, un pequeño detalle que nos hará diferentes ¿no crees? 1.- El código que vamos a usar es: <form action="/search" id="buscador" method="get"> <input id="texto" name="q" onblur="if (this.v ...

desde0

Cómo crear un menú con submenús en Blogger sin tener experiencia en informática o programación

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...

avanzado BLOG blogging ...

Cómo instalar un slider de imágenes en blogger

Esta semana he recibido un correo con esta duda: ¿Cómo instalar un slider de imágenes debajo del cabecero en blogger? Y no es la primera vez que me preguntan por el mismo tema. Este tipo de correos no puedo contestarlos uno a uno, prefiero anotar las dudas y cuándo se repiten mucho, desarrollar un tutorial en el blog, para que pueda verlo todo el mundo. Si me conoces un poco, ya sabes que no soy m ...

Tutoriales Blogging Estilos

Como poner una biografía debajo de las entradas.

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

Cómo poner una puntilla a los lados del blog

Probablemente, la pregunta que más veces he recibido a lo largo de estos años de blog es cómo poner una puntilla como la mía. Las personas que tienen el curso de html y css ya sabrán hacerlo, porque realmente es facilísimo, pero... para las que no lo tienen... ahí va este tutorial. En cualquier caso, os recomiendo muy mucho que lo compréis. Me resulta imposible hacer un tutorial por cada cosa que ...