SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.
TODO EL CONTENIDO

ES GRATUITO

Por ello no puedo crear contenido
con regularidad, de hecho tengo que dejarlo por el momento
Si quieres hacerme un regalo para agradecer todo el contenido gratuito de que puedes disfrutar gracias a mi esfuerzo puedes hacerlo aquí , quizás pueda seguir creando nuevo contenido útil. Gracias!

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


Tutorial Blogger: Personalizar el menu de paginas y pestañas C-11



¡¡Hola!! No sabes lo contenta que estoy con esta clase. Es tan útil y tan sencilla que te va a encantar tanto como a mi. Además te comparto un truco muy útil de diseño.

Llega el momento de personalizar nuestro menú de páginas, para que quede molón, limpio, claro, atractivo.

Como siempre digo, en cosa de diseño es mejor algo sencillo pero "cuco" y ya sabes que para los títulos del sidebar he elegido el fondo Washi-Tape , y para el menú he diseñado (usando el washi de los títulos de sidebar) un Washi Tape más largo y me ha encantado como ha quedado de fondo de menú. Me quedo con ese. 

Os lo comparto para que puedas descargarlo y usarlo y además te regalo un truco para cambiarle el color y que así puedas conseguir el color de tu paleta de colores.

truco para cambiar color de cualquier background o imagen de fondo






Podría ponerme a diseñar varios colores para que te los descargaras pero tendría que hacer un montonazo para que alguno te pudiera servir, así que ¿Qué mejor que consigas tú misma/o el color que buscas?

Si quieres descargarlo solo tienes que compartir el post en alguna de tus redes a través del siguiente botón. Así me ayudarás a mi y yo a ti, es genial ¿Verdad? Prometo tutorial para que puedas añadir este recurso en tu blog :)







Una vez que tengamos nuestro diseño pensado y preparado (en el caso de la imagen) para nuestro menú de páginas, vamos a editarlo y copiarlo en nuestra plantilla. Para esto simplemente te facilito los códigos de diferentes estilos para que puedas colocar el que quieras.

Al final del post de explico lo que puedes modificar.

** Selecciona el código al completo (está en un cuadro de texto extensible) y copia el que elijas en tu plantilla (explico dónde se copia después de todos los códigos y opciones).

Fondo del menú con Washi-tape:



Selecciona el texto y copialo.

Fondo del menú de páginas cuadrado





Fondo del menú de páginas cuadrado con bordes redondeados



Menú de páginas con línea arriba y abajo:



Menú de páginas con línea arriba y puntitos abajo:



Menú de páginas cuadrado con selección en blanco








Ey!! ¿A que están chulos? Pues ¿Qué tal si lo personalizamos un poquito más a nuestro gusto? 



Personalizar los códigos:

En las clases anteriores como en la de personalizar título de gadgets, hemos practicado la modificación básica de algunos códigos, para acercarnos al efecto deseado. De todas formas te dejo una explicación de todos los significados para que puedas adaptarlo.

.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 :)


.
Ahora vamos a colocar el código en nuestra plantilla para que nuestro menú quede así de bonito.

 Vamos a Plantilla

 Hacemos una Copia de Seguridad

 Le damos a Editar HTML

 Buscamos en plantilla (si no sabes cómo mira este vídeo) el siguiente código:

.tabs-inner .section
Después borramos todo lo que hay desde ese primer código hasta este otro:

.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




   EXTRA    si te interesa un menú superior fijo, que tenga iconos de redes sociales y además sea responsive, visita el tutorial "Menú desplegable responsive con iconos de redes sociales - Blogger" Te encantará

¿Qué te ha parecido? ¿Fácil o difícil? Podemos adaptarlo todo a  nuestro estilo de blog con unos pocos detalles y crear un menú de páginas a nuestro estilo. 
Si tienes cualquier duda no dudes en comentar aquí debajo. Además me ayudaría muchísimo y me haría muy feliz que le dieras like al vídeo y compartieras en post en tus redes para poder seguir currándome más posts de utilidad y creando más cursos interesantes :)



¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.




11 comentarios

  1. 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?

    Un saludo

    ResponderEliminar
    Respuestas
    1. Lo siento, no hago servicios personales de este tipo.
      Espero que lo hayas solucionado
      Un saludo

      Eliminar
  2. Hola, 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

    ResponderEliminar
    Respuestas
    1. Qué 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...

      Eliminar
    2. Ten 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.

      Suerte y gracias

      Eliminar
  3. hola he intentado ponerlo en mi blog de blogger y no funciona y tampoco el enlace de compartir,gracias.

    ResponderEliminar
    Respuestas
    1. Hay que fijarse bien en el proceso... Es un tutorial complejo.
      Ánimo

      Eliminar
  4. Hola Mónica, ¿cómo puedo incluir un buscador en el menú y centrado junto al resto de pestañas?. Gracias

    ResponderEliminar
    Respuestas
    1. Hola!
      Sinceramente no sé añadir un buscador al menú... Espero que lo consigas y lo compartas por aquí, gracias!

      Eliminar
  5. 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

    https://scrapterapiachile.blogspot.cl/


    Claudia

    ResponderEliminar
    Respuestas
    1. Muchas gracias Claudia, te ha quedado muy bonito!! :)
      Me alegra muchísimo leer tus palabras, me siento feliz por tu agradecimiento.
      Mis mejores deseos en tu proyecto!
      Muack!

      Eliminar

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.