15/2/14

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

Holaa hoy vengo con un tutorial, por si a alguien le ayuda....

No soy una experta en esto, aunque ya con blogger me apaño bien, pero quiero compartir cómo he hecho la barra horizontal con submenus que veis en el blog debajo de la cabecera...



Lo primero de todo es hacer copia de seguridad de la plantilla!!!, nunca agradeceréis lo suficiente este consejo, pero hay que ser precavido por lo que pueda pasar. Si te interesa sigue leyendo



Lo siguiente es activar en Páginas la opción "no mostrar pestañas principales". Os pongo imagen para que veáis a lo que me refiero:


Si tienes plantillas de blogger ( si no es así sáltate este paso)
Para empezar debemos hacer unos cuantos pasos para poder poner la barra horizontal en blogger de manera manual ya que por defecto debajo de la cabecera no se pueden agregar más gadgets.

Debemos buscar en la plantilla (Ctrl + F) esta línea en el código html de la plantilla:


Y os aparecerá algo como lo siguiente, dependiendo de si lo habéis cambiado ya o no:




Lo cambiáis para que quede así:


Lo siguiente que debéis hacer si tenéis plantilla de blogger y no os funcionan los menús con submenús que es lo que me pasaba a mí es seguir los 4 pasos de este tutorial.  Leerlo muy bien y cambiar solo lo que dice. Veréis cómo no es nada difícil.

http://csssoldier.blogspot.com.es/2013/04/como-usar-cualquier-menu-en-las.html?showComment=1392481635859#c7007287434611198084



Creación de los menús y submenús con Pure CSS Menu
Lo siguiente es crearos los menús y submenús en esta página http://purecssmenu.com/
Esta es la página en cuestión:


La verdad yo era reacia a registrarme pero os recomiendo esa página, se crean fácilmente ya que se hace de una forma muy intuitiva. Podréis crear menús desplegables únicamente con CSS sin javascript. Para poder utilizar este programa, os dejo este tutorial de youtube en el que se explica cómo hacer los menús y submenús.
http://www.youtube.com/watch?v=VAJEHtioFDE 



Instalando el código html en la plantilla:
Una vez tenéis la plantilla html que habréis descargado previamente en esa página (en download). Lo abrís con el bloc de notas. Yo las imágenes que vienen en la carpeta no las he utilizado porque creo que queda mejor sin las flechas.
Si os fijáis en vuestro código tenéis dos partes diferenciadas el estilo y el menú propiamente dicho

El estilo es la parte que va desde:
<!-- Start PureCSSMenu.com STYLE -->

Hasta:
<!-- End PureCSSMenu.com STYLE -->

Os dejo una imagen para que veáis donde empieza el estilo:


Y el menú es la parte que va desde:
<!-- Start PureCSSMenu.com MENU -->

Hasta
 <!-- End PureCSSMenu.com MENU -->


 Aquí véis donde empieza y acaba el menú:


Y haremos lo siguiente:
Vamos a edición html de nuestra plantilla (no os preocupéis que queda bien, palabra) y buscamos:
 

Justo debajo copiamos el estilo del menú, es decir todo el contenido que va desde:






Una vez hecho esto guardamos la plantilla y vamos a la pestaña  "diseño" de nuestro blog y en el lugar que queramos que aparezca el menú que hemos creado, en mi caso debajo de la cabecera y el buscador, copiamos el menú propiamente dicho.

Copiamos todo el contenido que va desde:


Y lo pegamos en un gadget tipo Html/Javascript. Pulsamos en vista previa y si lo habéis hecho todo bien, os aparecerá en el lado izquierdo de vuestras pantallas.(tutorial sacado de http://jm-manuales.blogspot.com.es/2011/12/purecssmenu-en-mi-blog-m2.html)



Truco para centrar el código html de pure menu CSS
En mi caso lo tengo centrado y os voy a contar un truquito, y esto lo he averiguado investigando y liándola con la plantilla xd, si es que soy un trasto...

A ver por defecto en el código del estilo os aparecerá lo siguiente:

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    display:block;
    zoom:1;
    float: left;
}


Pues yo probé en poner "center" en float: center pero esto no sirve ya que sólo puedo ponerse on the right (a la derecha) u on the left (a la izquierda). Así que lo que hice fue cambiarlo a float: right y añadirle lo siguiente al código:

right:28%; (este número, en tanto por ciento, lo vais cambiando hasta ajustarlo a vuestro blog)
list-style-type:none;
margin:0 auto;
padding:0;
position:relative;
}


Quedando así:

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    display:block;
    zoom:1;
    float: right;
right:28%;
list-style-type:none;
margin:0 auto;
padding:0;
position:relative;
}

He hecho una captura de mi plantilla para que veáis como queda:


EDITO: como veis ahora la barra de menú está fija arriba del todo esto lo he conseguido haciendo lo siguiente. He sustituido:

position:relative;

Por:
position:fixed;

Y he añadido la siguiente línea debajo:
top: 50px; (el número lo podéis cambiar hasta dar con la posición adecuada.  La propiedad top desplaza el elemento contando desde su borde superior. Si se da un valor positivo, el elemento se desplaza hacia abajo. Si se da un valor negativo, el elemento se desplaza hacia arriba.)








Y esto ha sido todo, me gustaría saber si lo ponéis en vuestro blog, dejadme vuestro enlace para ver cómo os queda.
Muchos saludos y recordar que no soy una experta en esto de los códigos html y demás...Así que no sé si os voy a saber responder a vuestras preguntas...Muchas gracias por las visitas y los comentarios!!!

EDITO: El menú lo acabé cambiando y el que tengo ahora mismo en el blog lo seguí realizando el tutorial que aparece en este otro blog, click aquí

Mostrar comentarios
Ocultar comentarios

2 comentarios:

  1. Es perfecto!
    gracias por compartir
    Que tengas una semana genial
    Besos de colores creativos

    ResponderEliminar
  2. Muchas gracias guapi ^^ haber si me animo a haberlo jeje besitos

    ResponderEliminar

Dime que te pareció la entrada, sé bienvenido a comentar lo que creas conveniente.
¡Por favor NO dejes el link de tu blog! (no voy a publicar más comentarios con enlaces), por cuestión de SEO, te perjudica a ti y a mi. Dime que tienes blog y te buscaré. Intentaré contestar tu comentario ya sea por aquí o en tu blog, ¡muchas gracias!