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:










28 comentarios:

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

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

      Borrar
  2. Que bonito esta tu blog bebe!!!

    ResponderBorrar
  3. Como agregas el mundito de visitantes bebe?

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

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

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

      Borrar
  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

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

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

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

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

    ResponderBorrar
  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

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

    ResponderBorrar
  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

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

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

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

    ResponderBorrar
  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

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

    ResponderBorrar
  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?

    ResponderBorrar
  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.

    ResponderBorrar
  20. si quisiera poner un menu y que cada iten de menu, tenga varios submenus como hago?

    ResponderBorrar
  21. Hola, si compro un menu maker el primer enlace que tiene, es facil colocar el menu despegable, descargarlo y copiarlo en un html/javascript de un gadget. La compra es de $19 dólares y es de por vida y unico pago que puedo hacer. Porque no se nada de programación y se me hace dificil, pero puedo comprarlo porque tengo planes. Te dejo mi blog para que lo vea: https://mi-sitio-web-con-hbn.blogspot.com/

    ResponderBorrar
  22. Compre la compra de $19 dólares y muy exito he tenido con el menú despegable, pero ahora como yo pongo el menú despegable debajo del título y no encima del título. Este es mi blog: https://mi-sitio-web-con-hbn.blogspot.com/

    ResponderBorrar