domingo, 8 de octubre de 2017

Tutorial: Menú desplegable

¡Hola a todos! ¿Cómo están? Ésta es una entrada un poco improvisada debido a un pedido que me hicieron y de paso, comparto con todos. Especialmente con J. P. Alexander quién quería el menú de la cabecera.

Voy a dejarles todo explicadito para que no tengan ningún problema al instalarlo, pero si aun así se les complica, me lo dicen en un comentario o me mandan un privado que les ayudo con lo que les haga falta.

Yo voy dejarles un menú con zonas desplegables y sin ellas, para que puedan usarlo a gusto y piacere.

¡Comencemos!

Primero, vamos a entrar al panel de administración de nuestro blog y vamos a ir a la zona de Diseño y crearemos un gadget nuevo.



 Y elegimos el que dice HTML/Javascript. Le ponemos de nombre Menú —o el que gusten— y lo ubicamos en 'Todas las columnas'. Debería quedarles así:



 Pueden ubicarlo en otra zona, sólo que para que les quede tal y como lo tengo en blog, deben seguir estos pasos y ya si se animan y tienen ganas de travesear un poco el código, son libres de hacerlo.

Una vez que ya lo tienen hecho, vamos a editarlo y así tal cuál está, vamos a pegar este código en él:


Lo único que tienen que hacer aquí es ir copiando los links y cambiando donde dice Texto y Sublink por el nombre que va a tener la lista que se va a ver.

Texto: Link sin listas desplegables
<li><a href="LINK">Texto</a></li>
Texto y sublink: link con lista desplegables
<li><a href="LINK">Texto</a>
<ul>
<li><a href="LINK">Sublink</a></li>
<li><a href="LINK">Sublink</a></li>
</ul>
</li>
 En el caso del código, seria esto:


 Pero para agregar nuevas líneas sería simplemente copiar y pegar ese fragmento antes del </div> del código.

Ahora que ya tenemos esto hecho, vamos a pasar a darle un bonito estilo a nuestros links. Yo les he señalado qué partes pueden ser editadas y cuáles no, conjuntamente, con la parte del código que pueden editar, que van a ver al lado de lo que se puede cambiar, las indicaciones para hacerlo.

Cuando tengamos todo listo, vamos a pegar esto en el CSS del blog y para eso, vamos a ir a Tema>>Personalizar>>Opciones avanzadas>>CSS, que es la opción que está al final de todo.



Y ya, si quieren hacer un índice —como los del blog— simplemente, hacen la entrada como normalmente lo harían, recopilando links y cuando la publican, copian y pegan el link en el código del menú y ya, les queda todo ordenadito.

Básicamente, esto es todo lo que tienen qué hacer, que no es más que copiar, pegar y reemplazar.  Como pueden ver, no es difícil hacerlo. Aun así, si les llega a surgir algún inconviente, me avisan y los ayudo con gusto.

¡Se cuidan!

¡Un abrazo!



4 comentarios:

  1. !Super entrada!
    Las zonas desplegables son geniales. Voy a practicarlo, me interesan.
    Gracias por compartir el tutorial tan bien detallado, y por tu tiempo.
    Abrazo!

    ResponderEliminar
    Respuestas
    1. Es super práctico para organizarse. Espero te sirva y puedas ponerlo en marcha <3

      ¡Un abrazo!

      Eliminar

¡Hola! ¿Cómo estás? Gracias por pasar a leer mi blog y agradezco que vayas a comentar. Me encanta leer sus opiniones.

Pueden escribir lo que gusten, tienen todo el espacio que quieran para comentar ¡Y no se echen para atrás por ser una entrada vieja! Yo responderé el comentario sin importar la fecha <3

¡Qué tengas un lindo día!

¡Un abrazo enorme!

Sueños etiquetados