Hola hoy tengo un nuevo tutorial acerca de crear una barr de menú con submenús en blogger, si seguís todas las intrucciones que se os van dando vereis como no es tan dificil como parece.
En primero lugar lo que teneris que hacer es crearos un menú en PureCSSMenu, en mi opinión me parece una página fantástica que facilita muchísimo la creación del menú pues puedes ver directamente como va quedando el menú en la vista previa y cambiarlo todo a tu gusto de una manera muy sencilla, el único "inconveniente" es que para descargaros el menú que creeis teneis que registraros pero os aseguro que merece la pena.
Aquí os dejo el link para que creéis el menú:
http://purecssmenu.com/
Aquí os dejo un vídeo sobre cómo crear el menú:
link: https://www.youtube.com/watch?v=Dw4nBZ4-yHU
Después de crear el menú lo que vamos a hacer es integrarlo en blogger, para ello solo teneis que seguir las instrucciones que os vaya dando.
En la pestaña Diseño, hacemos clic en Edición de HTML, y como vemos en la imagen , hacemos clic en Descargar plantilla completa. Anotamos el nombre del fichero y donde lo hemos descargado (siempre es: template........xml).
Si algo nos fuera mal (blog vuelto loco...) entrariamos de nuevo en Diseño, hacemos clic en Edición de HTML, y en la sección Crear copia de seguridad/Restaurar plantilla, en la segunda línea : Clic en Elegir un archivo, seleccionamos el archivo que descargamos antes y hacemos clic enSubir .
Guardamos nuestros cambios y todo vuelve a la normalidad.
Este proceso es indispensable como medida de seguridad. Si algo puede fallar....
**************
Para comenzar ya con nuestro Menú el preceso a realizar es el siguiente :
1º.- Preparar nuestra Plantilla .
Entramos en Diseño... Edición de HTML .
Pulsamos Ctrl+F se nos abrirá un campo de búsqueda (en Firefox abajo de nuestra pantalla, en otros navegadores en la parte de arriba).
En ese campo de búsqueda escribimos : section class= . Abrá buscado de inmediato. Comprobamos que ....section class=... se encuentra dentro de esta línea:
Si no es así, le damos a buscar siguiente hasta que nos aparezca. Cuando tengamos esta línea debemos borrar de ella: class='tabs'
La línea debe de quedar así:
Seguimos:
Volvemos al campo de búsqueda y buscamos ahora : /* tabs
Debemos de encontrar:
/* Tabs
----------------------------------------------- */
Como vemos en esta imagen.
Debemos de eliminar todas las lineas de código que siguen a la línea :
----------------------------------------------- */
(sin eliminar ésta) hasta que veamos :
/* Headings
----------------------------------------------- */
Todas esas líneas de código que hemos borrado las vamos a sustituir por las siguientes (copiar de aqui mismo):
ul {z-index: 200; padding:0 !important;}
li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
El código debe de quedar como en esta imagen:
Ahora sí podemos guardar los cambios a nuestra Plantilla, que ya estaría preparada para poder colocarle nuestro Menú (que ya se podrá desplegar sin problemas).
******
¿Cómo colocamos el Menú?:
El fichero comprimido que descargamos de http://purecssmenu.com contiene una carpeta nombrada images y un fichero purecssmenu.html. Las imágenes de la carpeta debemos de subirlas a nuestro espacio en la Web (Dropbox por ejemplo)
El fichero purecssmenu.html debemos de abrirlo ( con Gedit, Notepad... o cualquier editor Web). Sustituir en su código la dirección de las imágenes por las de nuestro espacio en la Web.
background-image:url(./images/arrv_white.gif);
Ésta es una de las lineas del código, que debemos cambiar. La parte sombreada es la que debo sustituir con la url de la imagen en mi espacio Web (así con todas).
Una vez que hemos cambiado las direcciones de las imágenes, nos centramos en el código de este fichero:
Nuestro Menú está definido en su estilo y contenido por dos partes diferenciadas del código (las primeras líneas del código no pertenecen al menú en sí) que deben de incluirse en distintos lugares cada una.
La primera parte define el estilo del menú :
Todo este contenido de estilo debemos de copiarlo y pegarlo dentro de la etiqueta
En primero lugar lo que teneris que hacer es crearos un menú en PureCSSMenu, en mi opinión me parece una página fantástica que facilita muchísimo la creación del menú pues puedes ver directamente como va quedando el menú en la vista previa y cambiarlo todo a tu gusto de una manera muy sencilla, el único "inconveniente" es que para descargaros el menú que creeis teneis que registraros pero os aseguro que merece la pena.
Aquí os dejo el link para que creéis el menú:
http://purecssmenu.com/
Aquí os dejo un vídeo sobre cómo crear el menú:
link: https://www.youtube.com/watch?v=Dw4nBZ4-yHU
Después de crear el menú lo que vamos a hacer es integrarlo en blogger, para ello solo teneis que seguir las instrucciones que os vaya dando.
En la pestaña Diseño, hacemos clic en Edición de HTML, y como vemos en la imagen , hacemos clic en Descargar plantilla completa. Anotamos el nombre del fichero y donde lo hemos descargado (siempre es: template........xml).
Si algo nos fuera mal (blog vuelto loco...) entrariamos de nuevo en Diseño, hacemos clic en Edición de HTML, y en la sección Crear copia de seguridad/Restaurar plantilla, en la segunda línea : Clic en Elegir un archivo, seleccionamos el archivo que descargamos antes y hacemos clic enSubir .
Guardamos nuestros cambios y todo vuelve a la normalidad.
Este proceso es indispensable como medida de seguridad. Si algo puede fallar....
**************
Para comenzar ya con nuestro Menú el preceso a realizar es el siguiente :
1º.- Preparar nuestra Plantilla .
Entramos en Diseño... Edición de HTML .
Pulsamos Ctrl+F se nos abrirá un campo de búsqueda (en Firefox abajo de nuestra pantalla, en otros navegadores en la parte de arriba).
En ese campo de búsqueda escribimos : section class= . Abrá buscado de inmediato. Comprobamos que ....section class=... se encuentra dentro de esta línea:
Si no es así, le damos a buscar siguiente hasta que nos aparezca. Cuando tengamos esta línea debemos borrar de ella: class='tabs'
La línea debe de quedar así:
Seguimos:
Volvemos al campo de búsqueda y buscamos ahora : /* tabs
Debemos de encontrar:
/* Tabs
----------------------------------------------- */
Como vemos en esta imagen.
Debemos de eliminar todas las lineas de código que siguen a la línea :
----------------------------------------------- */
(sin eliminar ésta) hasta que veamos :
/* Headings
----------------------------------------------- */
Todas esas líneas de código que hemos borrado las vamos a sustituir por las siguientes (copiar de aqui mismo):
ul {z-index: 200; padding:0 !important;}
li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
El código debe de quedar como en esta imagen:
Ahora sí podemos guardar los cambios a nuestra Plantilla, que ya estaría preparada para poder colocarle nuestro Menú (que ya se podrá desplegar sin problemas).
******
¿Cómo colocamos el Menú?:
El fichero comprimido que descargamos de http://purecssmenu.com contiene una carpeta nombrada images y un fichero purecssmenu.html. Las imágenes de la carpeta debemos de subirlas a nuestro espacio en la Web (Dropbox por ejemplo)
El fichero purecssmenu.html debemos de abrirlo ( con Gedit, Notepad... o cualquier editor Web). Sustituir en su código la dirección de las imágenes por las de nuestro espacio en la Web.
background-image:url(./images/arrv_white.gif);
Ésta es una de las lineas del código, que debemos cambiar. La parte sombreada es la que debo sustituir con la url de la imagen en mi espacio Web (así con todas).
Una vez que hemos cambiado las direcciones de las imágenes, nos centramos en el código de este fichero:
Nuestro Menú está definido en su estilo y contenido por dos partes diferenciadas del código (las primeras líneas del código no pertenecen al menú en sí) que deben de incluirse en distintos lugares cada una.
La primera parte define el estilo del menú :
Todo este contenido de estilo debemos de copiarlo y pegarlo dentro de la etiqueta