Menu

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. Si quieren descargar el código completo, pueden hacerlo con un clic aquí.


¡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 por categorías
¡Escribe por semana! ¡Yo escribo! 15 retos para fanfics 30 días con BUCK TICK 31 días de escritura 52 retos de escritura A contramano Ahora que estamos solos Alejandro Dolina Apaga la luna que los ángeles nos miran Arreglos de Eternidad Azaly BUCK TICK Bye bye Esperanza Cita en el bar Citaura Claro de luna; luz de sueños Como una luz o como un grito Conquistando las estrellas Cuando la magia se apaga Cuando los cerezos caen Cuentos De la A a la Z Desafío fantástico Detective Conan Dibuja tu OC Dibujos Diseños Doramas El alma del vampiro El brillo de los copos de nieve El cielo a mi favor El mundo entre dos Escribe con K Espíritus del mar Estadía indefinida Fanarts Fanfics Halloblogween Ideas Inktober Inspirándome con un elemento Inuyasha Japonés Juntaletras La flor del infierno Lectores otakus Libros Locos y azules Los locos Adams Mahouka Koukou no Rettousei Manga Manhwa Mayores de 18 Me sobran los motivos Microrrelatos Mientras duerme el sol Mudai Musicales Naruto No siento al mundo ni el mundo me siente a mí No te soñé Novedades Obra de teatro Ojos de cristal Películas Piratas del Caribe Pocahontas Poesía Querido diario Recuerda que morirás Recursos Relato juevero Reto de San Valentín Reto navideño Reto Tahisiano Retos Ricardo Arjona SAUROM Señora Luz de Luna y Señor Oscuridad Series Si no volvieras Si perdemos el control Siempre te voy a esperar Siempre volveríamos Sketchbook blogger Sueños Sueños de tinta Supernatural Tag The devil`s Carnival Top Tutorial Uno entre mil Valentino Variétés Victimas del amor visual novel Yuuwaku Zetsuai since 1989