27 de diciembre de 2016

Tutorial: Menú Top Rounded

Continuamos con los tutoriales, porque el 2017 esta a la vuelta de la esquina y tu blog tiene que estar chulo para el nuevo año. En esta ocasión les traigo un menú muy colorido que podrán colocar en todo el top del blog.  
Al diseñarlo para mostrarlo lo he titulado Top Rounded.

Este menú puede ser personalizado para que convine con todo tipo de diseño. Solo seria cuestión de cambiar los colores, pero mientras más colorido sea mejor se verá. hehehe. #TeamKawaii.

Comencemos... y te recomiendo que leas todo el post antes de ponerte manos a la obra.
  • Dirígete a: Plantillas → Editar HTML → y busca (Ctrl +F): </body>
Una vez encontrado </body>, pegas ARRIBA de él, el siguiente código:
<style>
.TOPRounded {
font-family: thebit, Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
text-transform: uppercase;
padding: 10px;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
overflow: hidden;
text-align: center;
border-top: 5px solid #AF7AC5;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
}
.TOPRounded:hover {
border-top: 5px solid #000;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.TOPRounded a { /* LINKS */
background: #EBDEF0;
border-radius: 0 0 100px 100px;
color: #000;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
padding-top: 10px;
padding-bottom: 10px;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
 text-shadow: 0px 2px #ccc;
}
.TOPRounded a:hover {
background: #AF7AC5;
text-decoration: line-through;
color: transparent;
padding-left: 20px;
padding-right: 80px;
TEXT-SHADOW: 30PX 0PX 0PX #fff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
</style>
<div class="TOPRounded">
<a href="URL">Inicio</a>
<a href="URL">Acerca</a>
<a href="URL">Reseñas</a>
<a href="URL">Doramas</a>
<a href="URL">Libros</a>
<a href="URL">Afiliados</a>
</div>
Eso te dará como resultado el aspecto que tiene el Top Rounder en el Blog de pruebas.

Entendiendo los códigos: Personalizando a tu gusto
  • font-family: thebit, Verdana, Arial, Helvetica, sans-serif; Es el tipo de fuente de texto del menú. Puedes cambiarla a tu gusto [ Tutorial: Añadir y utilizar fuentes de Google Front en tu blog ]
  • font-size: 15px; Es el tamaño del texto.
  • text-transform: uppercase; Para que el texto quede por completo en mayúscula. Si no quieres que aparezca todo en mayúscula elimina esa línea. (text-transform: uppercase;)
  • text-align: center; Para que el menú este centrado.
  • border-top: 5px solid #AF7AC5; Borde top del menú. (5 es el tamaño, Solid el estilo y AF7AC5 el color.)
  • border-top: 5px solid #000; El el borde del menú cuando el cursor se pasa sobre el. (5 es el tamaño, Solid el estilo y 000 el color.) El tamaño del borde normal y cuando se pasa el cursor sobre el menú debe de ser igual, esto es para que la transición no se vea tan brusca.
  • background: #EBDEF0; Es el color de fondo del menú. El fondo del contenedor de texto.
  • border-radius: 0 0 100px 100px; Es el aspecto redondeado que tiene el contenedor del texto.
  • color: #000; Color del texto.
  • text-shadow: 0px 2px #ccc; Sombra del texto, cuando el menú esta sin tocar. Si no quieres sombra en el texto, elimina esa línea o cambia el 2 por 0. 
  • background: #AF7AC5;  Es el color de fondo del contenedor de texto, cuando se pasa el cursor sobre él. 
  • text-decoration: line-through; Es la línea horizontal que sale sobre el texto cuando se pasa el cursor sobre él. Si no te gusta, eliminala.
  • TEXT-SHADOW: 30PX 0PX 0PX #fff; En esta línea lo único que deben de modificar es #FFF ya que es el color del texto cuando se pasa el cursor sobre él. 
Guardan los cambios y listo. Disfruten del nuevo menú. 

Como siempre les recomiendo "Creen un Blog de pruebas", ahí practiquen y modifiquen antes de aplicar cambios a tu plantilla/blog original. Pueden hacer eso o ir a HTML Live y ver los cambios instantáneamente, antes de aplicar. AMO ESA PÁGINA. Con ella he aprendido mucho.

Jugando un poco


Me gustar mostrarles diferentes aspecto que se pueden lograr cuando hay pequeñas modificaciones. Estos nuevos estilos tambien los pueden encontrar en el Blog de pruebas. Ahí el espacio entre el top es diferente, pero eso es solo para el blog de pruebas. Si aplican algunos de los aspectos que les enseñare a continuación les saldra correctamente. O sea, justo en el top.

Verde y sin el redondeado

Cambie los colores, quite el aspecto redondeado y reduje el espacio del contenedor del texto, para que de esa manera cuando se pase el curso sobre el menú el cambio no solo será en el color de fondo si que el recuadro se ampliara. También cambie la fuente y le agregue la línea sobre el texto.
Código:

Amarillo a la izquierda

Cambie los colores, solo un lado tiene aspecto redondeado y coloque el menú en el lado izquierdo del top. También cambie la fuente, quite la líneas de texto y añadí una sombra en el texto cuando se pase el cursor sobre el. La sombra es medio alejada del texto. 
Código:

Rosa y a la derecha

Cambie los colores, quite el aspecto redondeado, pero eso aparecerá cuando se pase el cursor sobre menú. Reduje el espacio del contenedor del texto, cambie la fuente y cuando se pase el cursor sobre el texto, esta aparecerá subrayado.
Código:

Notas

Otra forma de agregar el menú en tu blog es ir a:
  • Diseño  → Añadir un gadget → HTML/Javascript y ahí pega el texto del menú:
<div class='TOPRounded'>
<a href='URL'>Inicio</a>
<a href='URL'>Acerca</a>
<a href='URL'>Reseñas</a>
<a href='URL'>Doramas</a>
<a href='URL'>Libros</a>
<a href='URL'>Afiliados</a>
</div>
Guarda el gadget y luego te diriges a
  • Plantilla  → Personalizar → Avanzado    Añadir CSS y ahí pega la personalización del menú: Por lo que no va <style> y </style>. Solamente la personalización.
.TOPRounded {
font-family: thebit, Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
text-transform: uppercase;
padding: 10px;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
overflow: hidden;
text-align: center;
border-top: 5px solid #AF7AC5;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
}
.TOPRounded:hover {
border-top: 5px solid #000;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.TOPRounded a { /* LINKS */
background: #EBDEF0;
border-radius: 0 0 100px 100px;
color: #000;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
padding-top: 10px;
padding-bottom: 10px;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
 text-shadow: 0px 2px #ccc;
}
.TOPRounded a:hover {
background: #AF7AC5;
text-decoration: line-through;
color: transparent;
padding-left: 20px;
padding-right: 80px;
TEXT-SHADOW: 30PX 0PX 0PX #fff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
Guarda los cambios y listo.

Por último, si en ambos casos, la cuerpo del blog queda muy cerca del menú podemos cambiar eso de esta manera: 
  • Plantilla  → Personalizar → Avanzado    Añadir CSS y ahí pega lo siguiente: 
.content {
margin-top: 30px !important;
}
  • margin-top: 30px; Cambia el número (30) tal como te convenga.
Guarda los cambios y listo. Tiene el nuevo y muy bonito menú en el top del blog.

Pregunta frecuente:

 → ¿Por qué la fuente que utilizas en los ejemplos no se ven en mi blog?
Eso pasa porque en su blog no están agregadas ese tipo de fuente. Para los ejemplos utilice fuentes de Google -Anaheim, thebit, ABeeZee y Amarante.-  Si quieres agregarlas o quieres otro tipo de fuente lee mi Tutorial: Añadir y utilizar fuentes de Google Front en tu blog.

Y este es el tutorial de la noche. Espero les guste.
Hasta la próxima...

Les envió muchos besos. Si quieren un tutorial en especifico solo pídanlo en los comentarios o llenen ESTE FORMULARIO...

4 comentarios:

  1. Hola es muy lindo el menu, recuerdo cuando puse el mio dure como 2 semanas de verdad no me salia, por los momentos lo dejare asi... Pero este me enamoro, gracias por el tuto.

    ¡Te estare leyendo!
    Saludos desde: https://mochila-de-libros.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Helen me encanta el diseño de tu blog, así que por los momentos déjalo así! xDD hehehe

      Saludos!!!

      Eliminar
  2. Hola, de verdad no quiero hacer spam pero no veo la publicación de la iniciativa y DISCULPA estoy intentando llegar a 300 seguidores antes de que termine el 2016 ¿me ayudas? http://bannyleeentreotrascosas.blogspot.mx/2016/12/favoritos-2016.html#comment-form
    Obviamente ya te he seguido ¡Un beso!

    ResponderEliminar
    Respuestas
    1. Hola Carolina, gracia por seguirme es todo un placer.
      En realidad no se de que iniciativa hablas!!! 😨 así que estoy medio perdida.
      Ya me pasare por tu blog y por tus redes sociales para hacerte un RT! 😊

      Saludos.

      Eliminar