Venimos de: PureCssMenu en mi Blog.
Antes de que veamos como colocar nuestro Menú en el Blog, debemos de asegurarnos de que si algo sale mal, podamos retroceder sin recibir ningun daño ( que nuestro Blog quede ileso).
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 en Subir .
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:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
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í:
<b:section id='crosscol' maxwidgets='1' showaddelement='yes'>
Seguimos:
Volvemos al campo de búsqueda y buscamos ahora : /* tabs
Como vemos en esta imagen.
Debemos de eliminar todas las lineas de código que siguen a la línea :
----------------------------------------------- */
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:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
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í:
<b:section id='crosscol' maxwidgets='1' showaddelement='yes'>
Seguimos:
Volvemos al campo de búsqueda y buscamos ahora : /* 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;}
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ú :
<!-- Start PureCSSMenu.com STYLE -->
<style>
.
.
.
.
</style>
<!-- End PureCSSMenu.com STYLE -->
Todo este contenido de estilo debemos de copiarlo y pegarlo dentro de la etiqueta <head> de nuestra Plantilla (volvemos a entrar en Diseño, Edición de HTML si hubieramos salido).
En el campo de búsqueda (Control+F) escribimos <head> y en el código de nuestra Plantilla justo debajo de <head> colocamos el cursor y pegamos .
Guardamos los cambios a nuestra plantilla y podemos salir de Edición de HTML.
La segunda parte que contiene el Menú en sí está definida justo debajo de la parte de estilo :
<!-- Start PureCSSMenu.com MENU -->.
.
.
.
<!-- End PureCSSMenu.com MENU -->
Todo este contenido debemos de copiarlo y pegarlo allí donde queramos que el Menú aparezca. Entramos en Diseño, Elementos de Página .... Añadir Gadget . ...... tipo Html/Javascript (si lo queremos en la cabecera de nuestro Blog). Pegamos (dejamos al gadget sin título). Guardamos.
Sí hacemos clic en ver el Blog, nuestro Menú ya aparecerá colocado.
.
.
.
</style>
<!-- End PureCSSMenu.com STYLE -->
Todo este contenido de estilo debemos de copiarlo y pegarlo dentro de la etiqueta <head> de nuestra Plantilla (volvemos a entrar en Diseño, Edición de HTML si hubieramos salido).
En el campo de búsqueda (Control+F) escribimos <head> y en el código de nuestra Plantilla justo debajo de <head> colocamos el cursor y pegamos .
Guardamos los cambios a nuestra plantilla y podemos salir de Edición de HTML.
La segunda parte que contiene el Menú en sí está definida justo debajo de la parte de estilo :
<!-- Start PureCSSMenu.com MENU -->.
.
.
.
<!-- End PureCSSMenu.com MENU -->
Todo este contenido debemos de copiarlo y pegarlo allí donde queramos que el Menú aparezca. Entramos en Diseño, Elementos de Página .... Añadir Gadget . ...... tipo Html/Javascript (si lo queremos en la cabecera de nuestro Blog). Pegamos (dejamos al gadget sin título). Guardamos.
Sí hacemos clic en ver el Blog, nuestro Menú ya aparecerá colocado.
