sábado, 21 de marzo de 2015

Crear Menú desplagable online

Hola a todos bienvenidos una vez más a mi blog, en esta ocasión les voy a enseñar a poner un menú desplegable en su blog, ya que muchos lo han preguntado espero que les guste :). Antes de ver el siguiente tutorial tienes que crear una copia de tu plantilla!! (como hacerlo aquí) Este menú desplegable lo crearemos en linea para encontrar ya hecho y solo encontrar el que nos guste y encaje con nuestro blog o página web.



Por cierto para algunos puede ser que no les funcione por el tipo de plantilla, de hecho este tutorial sólo funciona par aquellos que tienen una plantilla simple, las otras como Awesome Inc, Vistas Dinamicas, etc primero tenemos que hacer un cambio a la plantilla aqui te dejo el link :) De ahi los demás pasos a seguir son iguales.

Pasos
1. Crear una copia de seguridad de la plantilla sin este paso no pueden avanzar al siguiente. (porque vamos a modificar el código HTML agregando un CSSy borramos o penemos algo mal, nuestro blog se arruinará para siempre D:)
2. Ir a cualquiera de las siguientes páginas:
  • http://cssmenumaker.com/
  • http://www.cssmenubuilder.com/home
  • http://purecssmenu.com/
  • http://css3menu.com/index.html (descargar programa)
  • http://www.free-css.com/free-css-menus/page1
para algunas páginas es necesario inscribirse antes para poder descargar tanto el código HTML como el CSS3.

3. Ahora nos dirigimos a nuestro Blog en "Plantilla" y crear copia de seguridad
4. Nos vamos a la opción de "Editar HTML" y buscamos con "CTRL+F"  dentro de la caja de códigos lo siguiente:
]]></b:skin>

5. Y justo antes de ]]></b:skin> vamos a poner /*menu desplegable/ y pegamos el código Css que es el estilo de nuestro nuevo menú, si alguna vez lo quisiéramos cambiar es más sencillo buscar las palabras menú desplegable y cambiarlo, deben fijarse que si a veces no funciona es porque le falta al principio del código <style> y al final </style> y para terminar el código agregar /*fin menu desplegable/ para poderlo ubicar bien.
6. Ahora nos dirigimos a "Diseño"  y agregamos un Gadget o Widget de HTML y pegamos el código de los links y submenus, por lo regular es el que inicia con <div id= .....>

Si no han creado el código de HTML en la página donde lo descargaron lo mejor es crearlo en la primera página que les puse como link, pero si quieren hacerlo manualmente les dejo a continuación como cambiarlo conforme a sus links les dejo este tutorial.

7. Guardamos los cambios y vemos si es de nuestro agrado, si no les gustará o se llegará a desconfigurar siempre pueden restaurar su copia de seguridad previa, he ahi la importancia.

Para todos aquellos que conocen y pueden modificar los códigos CSS les va a ser fácil editar los menús prediseñados. Espero que les sirva mucho y cualquier duda no olviden en comentar :)

PD: les aconsejo ir guardando sus copias de seguridad en dado caso quisieran iniciar de nuevo o regresar a su antigua plantilla.

Fuente: Ciudadblogger

te puedes ayudar con los siguientes videos parte 1 y parte 2:










25 comentarios:

  1. Tomaré nota para ponerlo en práctica ;)

    ResponderEliminar
    Respuestas
    1. Que bueno que te parecio interesante, muchas gracias por pasarte por mi blog :)

      Eliminar
  2. Como agregas el mundito de visitantes bebe?

    ResponderEliminar
    Respuestas
    1. http://mikututoriales.blogspot.com/2014/02/contador-mundial-para-visitas.html aqui te muestro como

      Eliminar
  3. y si no me sale ]]> en CTRL+F Como hago el procedimiento

    ResponderEliminar
    Respuestas
    1. que raro tienes que dar click dentro del cuadro de códigos de html de la plantilla

      Eliminar
  4. Respuestas
    1. que no te ha funcionado? puedes ver los videos

      Eliminar
  5. Al inscribir CTRL+F en el cuadro de códigos de html de la plantilla y escribir el codigo de ]]> no aparece
    Buen Blog saludos

    ResponderEliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  7. Hola, al digitar '' b:section class tabs '' no me sale, y no se eso de ''sin expandir los artilugios'' me puedes aconsejar?
    Gracias

    ResponderEliminar
  8. A mi no se me despliegan los menús
    Por favor ayuda!

    ResponderEliminar
  9. hola como ases para tener la letra de este blog asi

    ResponderEliminar
  10. Hola muchas gracias por ayudarnos en esta publicación. Te dejo mi blog para que vean como quedó.

    http://derrotalacrisisafiliadosagm.blogspot.com.es/2015/08/webtrasnfer-red-social-para-ganar.html

    Saludos

    ResponderEliminar
  11. LIKE!!!!! MUY BUENA GRACIAS ME SALVASTE DE UN TRABAJO ERES LA MEJOR GRACIAS POR HACER ESTE MAGNIFICO TUTORIAL

    ResponderEliminar
  12. Es una trabajo magnifico debo admitir, pero amiga colocaste en vez de ponemos algo mal, penemos algo mal.
    Me hiciste reir un poco jejejeje.
    Buen tuto XD

    ResponderEliminar
  13. En el primer link, ¿Cual es el codico de cada una de las plantillas?

    ResponderEliminar
  14. esospasos sirven para la plantilla awesome inc luego de hacer los pasos que dice en el blog que de dejaste?

    ResponderEliminar
  15. buen tutorial saludos!!!!!! http://mrgelmasbacan.blogspot.com

    ResponderEliminar
  16. Hola, he seguido tu tutorial y finalmente he conseguido poner unmenú desplegable en mi blog con la plantilla descargada del enlace http://www.cssmenubuilder.com/home, sin embargo no son visibles todos los submenús. Te mandaría la url de mi blog por vía privada para que lo compruebes y me pudieras dar posible solución. Gracias

    ResponderEliminar
  17. Tienes una voz muy linda, lastima que no pude hacer nada de lo que explicaste.

    ResponderEliminar
  18. Hola Miku, Buenas tardes, Dias o noches sucede que esto de '']]>'' no me aparece cuando lo pongo en el menú de ''CTRL + F'' y tampoco en el menú de la plantilla en ese caso ¿que podría hacer?

    ResponderEliminar
  19. Hola, he entrado al primer link de "Menu maker" porque es el único que me ha gustado más, pero al término de buscar el código en html no funciona, ahora se debe pagar... No sé qué hacer, ayúdenme please.

    ResponderEliminar