Tutorial Blogger: Personalizar el menu de paginas y pestañas C-11
- 8:00
- por
truco para cambiar color de cualquier background o imagen de fondo |
Fondo del menú con Washi-tape:
.PageList { text-align:center !important; } .PageList li { display:inline !important; float:none !important; } .tabs-inner .section:first-child { margin: -10px 0px 30px 0px; } .tabs-inner .section:first-child ul { border-top: 0px solid #000; border-bottom: 0px dotted #000; } .tabs-inner .widget ul { background-image: url(https://1.bp.blogspot.com/-Xj8sRQXmTOg/V0_lihNaDKI/AAAAAAAAAEQ/m87XGFP5sJYCBp90iSu5NFgkWpJsUY0DwCLcB/s1600/fondo-menu-blogger-washitape.png); height: 60px; margin-bottom: 0; margin-top: 0; margin-left: -30px; margin-right: -30px; } .tabs-inner .widget li a { display: inline-block; padding: 26px 20px 15px 22px; font:normal bold 12px Arial; text-transform: uppercase; letter-spacing: 3px; color: #fff; border-$startSide: 0px solid #fff; border-$endSide: 0px solid #fff; } .tabs-inner .widget li:first-child a { border-$startSide: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #666; background-color: transparent; text-decoration: none; }
Fondo del menú de páginas cuadrado
.PageList { text-align:center !important; } .PageList li { display:inline !important; float:none !important; } .tabs-inner .section:first-child { margin: -10px 0px 30px 0px; } .tabs-inner .section:first-child ul { border-top: 0px solid #000; border-bottom: 0px dotted #000; } .tabs-inner .widget ul { background: #8fb59e; height: 50px; margin-bottom: 0; margin-top: 0; margin-left: -30px; margin-right: -30px; } .tabs-inner .widget li a { display: inline-block; padding: 20px; font:normal bold 12px Arial; text-transform: uppercase; letter-spacing: 3px; color: #fff; border-$startSide: 0px solid #fff; border-$endSide: 0px solid #fff; } .tabs-inner .widget li:first-child a { border-$startSide: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #666; background-color: transparent; text-decoration: none; }
Fondo del menú de páginas cuadrado con bordes redondeados
.PageList { text-align:center !important; } .PageList li { display:inline !important; float:none !important; } .tabs-inner .section:first-child { margin: -10px 0px 30px 0px; /*posición*/ } .tabs-inner .section:first-child ul { border-top: 0px solid #000; border-bottom: 0px dotted #000; } .tabs-inner .widget ul { background: #8fb59e; border-radius: 50px; height: 50px; margin-bottom: 0; margin-top: 0; margin-left: -30px; margin-right: -30px; } .tabs-inner .widget li a { display: inline-block; padding: 20px; font:normal bold 12px Arial; text-transform: uppercase; letter-spacing: 3px; color: #fff; border-$startSide: 0px solid #fff; border-$endSide: 0px solid #fff; } .tabs-inner .widget li:first-child a { border-$startSide: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #666; background-color: transparent; text-decoration: none; }
Menú de páginas con línea arriba y abajo:
.PageList { text-align:center !important; } .PageList li { display:inline !important; float:none !important; } .tabs-inner .section:first-child { margin: -10px 0px 30px 0px; } .tabs-inner .section:first-child ul { border-top: 2px solid #8fb59e; border-bottom: 2px solid #8fb59e; } .tabs-inner .widget ul { height: 50px; margin-bottom: 0; margin-top: 0; margin-left: -30px; margin-right: -30px; } .tabs-inner .widget li a { display: inline-block; padding: 20px; font:normal bold 12px Arial; text-transform: uppercase; letter-spacing: 3px; color: #8fb59e; border-$startSide: 0px solid #fff; border-$endSide: 0px solid #fff; } .tabs-inner .widget li:first-child a { border-$startSide: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #666; background-color: transparent; text-decoration: none; }
Menú de páginas con línea arriba y puntitos abajo:
.PageList { text-align:center !important; } .PageList li { display:inline !important; float:none !important; } .tabs-inner .section:first-child { margin: -10px 0px 30px 0px; /*posición*/ } .tabs-inner .section:first-child ul { border-top: 2px solid #8fb59e;/*bordes del menú*/ border-bottom: 2px dotted #8fb59e;/*bordes del menú*/ } .tabs-inner .widget ul { height: 50px; margin-bottom: 0; margin-top: 0; margin-left: -30px; margin-right: -30px; } .tabs-inner .widget li a { display: inline-block; padding: 20px;/*espacio entre pestañas*/ font:normal bold 12px Arial; text-transform: uppercase; letter-spacing: 3px; color: #8fb59e; border-$startSide: 0px solid #fff; border-$endSide: 0px solid #fff; } .tabs-inner .widget li:first-child a { border-$startSide: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #666; background-color: transparent; text-decoration: none; }
Menú de páginas cuadrado con selección en blanco
.PageList { text-align:center !important; } .PageList li { display:inline !important; float:none !important; } .tabs-inner .section:first-child { margin: -10px 0px 30px 0px; /*posición*/ } .tabs-inner .section:first-child ul { border-top: 0px solid #000;/*bordes del menú*/ border-bottom: 0px dotted #000;/*bordes del menú*/ } .tabs-inner .widget ul { background: #8fb59e; height: 50px; margin-bottom: 0; margin-top: 0; margin-left: -30px; margin-right: -30px; } .tabs-inner .widget li a { display: inline-block; padding: 20px;/*espacio entre pestañas*/ font:normal bold 12px Arial; text-transform: uppercase; letter-spacing: 3px; color: #fff; border-$startSide: 0px solid #fff; border-$endSide: 0px solid #fff; } .tabs-inner .widget li:first-child a { border-$startSide: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #8fb59e; background-color: #fff; text-decoration: none; }
.PageList {
text-align:center !important;
}
.PageList li {
display:inline !important;
float:none !important;
}
Esta parte del código, lo llevan todos, es para centrar las pestañas. Si lo quieres a un margen basta con cambiar center por right o left, según quieras derecha o izquierda, respectivamente.
.tabs-inner .section:first-child {
margin: -10px 0px 30px 0px; /*posición del menú*/
}
.tabs-inner .section:first-child ul {
border-top: 0px solid #000;/*bordes del menú arriba*/
border-bottom: 0px dotted #000;/*bordes del menú abajo*/
}
En esta parte podemos cambiar todo lo que queramos para que se adapte a nuestro gusto. Cambiar el color, que ahora está en negro #000 o el tamaño de la línea, en este código con 0px.
- Si queremos que la línea sea punteada: dotted
- Si queremos que sea a rayas: dashed
- Ahora está en solid que es una línea normal, arriba top y punteada abajo bottom.
- Si quieres que también tenga línea a los lados usa border-left y border-right con el resto de código igual.
.tabs-inner .widget ul {
background: #8fb59e; /*fondo del menú*/
height: 50px; /* ancho del menú*/
margin-bottom: 0; /* margen abajo*/
margin-top: 0; /* margen arriba*/
margin-left: -30px; /* margen izquierda*/
margin-right: -30px; /* margen derecha*/
}
.tabs-inner .widget li a {
display: inline-block;
padding: 20px;/*espacio entre pestañas*/
font:normal bold 12px Arial; /* tipo de letra*/
text-transform: uppercase; /*mayúsculas, si no lo quieres elimína esta línea*/
letter-spacing: 3px; /* espacio entre letras*/
color: #fff; /* color del texto*/
border-$startSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
border-$endSide: 0px solid #fff; /* borde en la pestaña, así no hay*/
}
.tabs-inner .widget li:first-child a {
border-$startSide: none; /* borde en la pestaña, así no hay*/
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #8fb59e; /*Color cuando pasamos con el ratón*/
background-color: #fff; /* fondo de la pestaña cuando pasamos con el ratón*/
text-decoration: none; /* sin subrayado de enlace*/
}
En todo el resto ya te lo dejo señalado en cada código, cambia al gusto.
Podéis cambiar todos los códigos de color e ir viendo los cambios para visualizar cómo os gusta más, pero si no controláis mucho de código os aconsejo que solamente uséis uno de los códigos que he compartido y cambies donde he puesto #8fb59e por el color que elijas de tu paleta de colores, es super fácil, no me digas que no! ;)
De todas formas cualquier dudita ya sabes, me lo cuentas en los comentarios de aquí abajo :)
.
|
Después borramos todo lo que hay desde ese primer código hasta este otro:
.tabs-inner .section
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: $(tabs.selected.text.color); background-color: $(tabs.selected.background.color); text-decoration: none;}Este anterior también se elimina.
En su lugar pegamos el código que hayamos elegido de los anteriores que os he compartido.
Guardamos y Listo!
Para que el proceso te resulte mucho más fácil te dejo el vídeo tutorial :)
vídeo
|

Ya han comentado 18 veces:
Hola, estoy siguiendo tu blog y no veas lo útil que me están siendo tus vídeos y tus post, ¡¡¡increíbles!!! estoy modificando las pestañas y quiero poner el menu con la raya arriba y los puntos abajo, pero si cambio el color me desaparecen la raya y los puntos. Obviamente algo estoy haciendo mal, ¿me podrías ayudar?
ResponderEliminarUn saludo
Deja la URL de tu blog para echar un ojo!! :)
EliminarHola, tengo un problema. He intentado utilizar uno de estos menús, pero vuando pincho en el menú se me cambia el formato: http://diariopersonalmariagomezmesasmaes.blogspot.com.es
ResponderEliminarQué pena. Me encantan todos tus diseños, son incleíbles, muy originales y creativos. Me da mucha pena que me esté dando este error y no pueda solucionarlo...
EliminarTen paciencia y hazlo de nuevo desde el principio paso a paso, no debe darte problemas. Si no también hay otro post sobre un menú superior en mis últimos posts.
EliminarSuerte y gracias
hola he intentado ponerlo en mi blog de blogger y no funciona y tampoco el enlace de compartir,gracias.
ResponderEliminarHay que fijarse bien en el proceso... Es un tutorial complejo.
EliminarÁnimo
Hola Mónica, ¿cómo puedo incluir un buscador en el menú y centrado junto al resto de pestañas?. Gracias
ResponderEliminarHola!
EliminarSinceramente no sé añadir un buscador al menú... Espero que lo consigas y lo compartas por aquí, gracias!
Mónica no sabes los feliz que me hizo encontrar tu blog seguí el paso a paso de cada una de las entradas que creaste , fui paso a paso algunas entradas me las salte. Te dejo mi resultado esto orgullosa e el espero seguir mejorado Mónica no sabes lo agradecida que estoy
ResponderEliminarhttps://scrapterapiachile.blogspot.cl/
Claudia
Muchas gracias Claudia, te ha quedado muy bonito!! :)
EliminarMe alegra muchísimo leer tus palabras, me siento feliz por tu agradecimiento.
Mis mejores deseos en tu proyecto!
Muack!
Hola! Me encanta tu blog!
ResponderEliminarMe preguntaba si tienes alguna entrada sobre cómo hacer un menú desplegable, lo he intentado mil veces y no doy una :)
Gracias por todo el contenido!
Hola!! muchísimas gracias!
EliminarSí, tenemos uno genial!! de la mano de Minerva Aurora, te dejo por aquí el enlace :)
Menú desplegable responsive por Minerva Aurora
Espero que te sirva Muack!!
Hola! Me encanta el tutorial y está clarísimo, y con el video se ve súper sencillo. Sin embargo no lo puedo llevar a cabo porque no encuentro lo de ".tabs-inner .section" para insertar el código, ni con ctrl-F ni buscando entre los códigos. Alguna idea de lo que me puede estar pasando? Gracias!
ResponderEliminarme pasó lo mismo!, no lo encuentro, al parecer no lo tengo bajo ese nombre pero me busqué todo y no pude darme cuenta donde está.
EliminarOk, dejar la URL de vuestro blog por aquí y le echo un ojo. :) un saludo
EliminarMuchas gracias Moni! en el blog donde intento hacerlo es aquí: www.lamaisonboop.blogspot.com ♥♥
Eliminarhola! una pregunta, como se hace para que en el menú de paginas pueda ser como el tuyo de "CURSO GRATIS" o "RECURSOS", en el que cuando aprietas la flechita, salgan otras opciones? Lo siento, no me sé explicar bien. Gracias
ResponderEliminar