Tutorial: Cómo poner una barra de menú con submenús en blogger con PureCSSMenu

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ú, solo teneis que hacer click en la imagen:

Aquí os dejo un vídeo sobre cómo crear el menú:

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:

<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

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ú :

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

El tutorial ha sido extraido de esta página, os dejo el link por siquereis pasaros:

http://migrancapricho.blogspot.com.es/2014/02/tutorial-como-poner-una-barra-de-menu.html

Bueno eso ha sido todo por hoy espero que os quede bien vuestro menú y me lo pongáis en los comentarios.