Como hacer una barra de menú horizontal para tu blog (Parte II)


Ya hace algún tiempo os explicaba aquí una manera de hacer un menú horizontal, y ahora voy a explicaros otra bien diferente.

Las dos son aptas y funcionan correctamente, simplemente son diferentes, y cada una puede solucionaros un tema distinto en relación a la organización de los contenidos en el blog, que a veces es difícil ¿verdad?

Esta barra que os voy a explicar es totalmente personalizable, aunque no os voy a mentir que vais a necesitar un ratito largo, ya que tenéis que pasar por varios pasos.

Si estáis preparados y queréis empezar ya mismo, ahí va el tutorial paso a paso para hacer una barra de menú horizontal de páginas monísima de la muerte :)

Esta es la mía, al menos en el momento que estoy escribiendo este post, es posible (y más con lo que me gusta a mi trastear...) que dentro de un tiempo tenga otra, por eso os pongo la imagen para que veáis como va a quedar.






Es muy importante organizar primero que secciones vamos a añadir a nuestra barra. Como es una barra que se encuentra en la parte superior, y que es lo primero que vemos al entrar en el blog, sería lo más lógico enlazar aquello que creamos más importante. Me explico, en mi caso he añadido todos los temas que creo son más interesantes de mi blog, Mis DIY, Crochet and Knit, Mi tienda, Contacto...etc.
Esto es a criterio personal totalmente, es posible que para unas personas un tema sea más importante que otro, pero eso debes decidirlo tú.

Lo que si recomiendo es que antes de tocar código tengamos claros los temas que vamos a incluir en nuestra barra, apúntalos en un papel y guárdalos para añadirlos después.



Vamos con el siguiente paso. Una vez hemos elegido cuales serán las secciones, vamos a crear los botones.

Para ello, antes tenemos que tener claro que existen diferentes tipos de enlaces a incluir en nuestra barra horizontal:

  • Enlaces a una página fija: Esto es un enlace único que te dirige a una página fija, que no cambia, por ejemplo, una página de contacto o sobre mi. Éstas se pueden crear directamente en blogger y que tengan su propia dirección.
  • Enlaces a una página externa: Por ejemplo, una tienda en Dawanda o Etsy, tienen su propio enlace y puedes dirigir el enlace a la tienda directamente. Es una página que no esté dentro de blogger.
  • Un grupo de post o etiqueta de blogger: Quizás os interese enlazar el botón a una etiqueta concreta, por ejemplo, Mis DIY, donde se encuentran todos los proyectos que he realizado durante todo este tiempo. Es un enlace que te dirige a un grupo de post con la misma etiqueta.
  • También puedes encontrarte con la necesidad de enlazar cualquier otro elemento, pero este debería probarse con anterioridad y dependerá del tipo de elemento que funcione o no, tendrás que probar o preguntar :)
La manera de incluir cada enlace a la barra es distinta, así que iremos por partes.

Para crear los botones que se dirigen a páginas fijas, sería la primera opción, debemos hacer lo siguiente:

  • Si se trata de una página que será fija, primero tenemos que dirigirnos a la parte de páginas de blogger:



Aquí simplemente se trata de crear una nueva página, escribir lo que nos interese o bien copiar y pegar si tenemos el contenido en un post. Todas estas páginas se mostraran después en nuestra barra horizontal, así que procurar que el nombre de la página sea cortito para que el botón no sea muy grande, luego veréis porque. Si ya las tenéis creadas ¡perfecto! a la hora de incluir la barra en blogger ya os saldrán.

Para crear los botones a enlaces externos o a un grupo de etiquetas lo haremos fuera del apartado de páginas,  así que debemos hacer lo siguiente:
  • Si se trata de una sección que va a dirigirse a una página externa a blogger, debemos copiar la dirección en un word para tenerla a mano más adelante, por ejemplo, www.mitienda.com.
  • Si se trata de un grupo de post con la misma etiqueta, también necesitamos extraer la dirección. Sólo tenéis que seleccionar la etiqueta en concreto de la parte inferior de los post o del gadget 'etiquetas del blog', y se os abrirán todos los post relacionados con dicha etiqueta, una dirección similar a esta: http://klaudisseny.blogspot.com.es/search/label/Crochet%20and%20Knit. Fijaros que en la dirección sale la palabra 'Label', ésta será la dirección correcta. Guardar la dirección en un word junto a las otras direcciones para utilizarlas después.

Ahora vamos a la parte de diseño y a añadir nuestra barra horizontal al blog.





Para añadir el gadget de páginas, debemos dirigirnos a diseño, y añadir en la parte superior debajo del banner del blog un nuevo gadget.
Este gadget se llama páginas.



Al añadirlo hay que situarlo justo debajo del banner superior.
Ahora vamos a la edición de la barra horizontal.
Para añadir los enlaces a nuestra barra de páginas debemos editar la barra de páginas que antes hemos añadido.




Se nos abrirá una pequeña ventana para modificar las propiedades de la barra de páginas, aquí es donde añadiremos todas las secciones de nuestra barra.

En la parte superior aparecen las páginas fijas que hemos creado anteriormente en la parte de páginas, y podemos escoger cuales queremos que aparezcan en nuestra barra.




Y en la parte inferior es dónde podemos añadir los enlaces tanto externos como enlaces a etiquetas que hemos reservado en un word.

En la primera parte donde nos pone 'Título de la página' es donde escribiremos el nombre que queramos que aparezca en nuestro botón barra de páginas, y en la parte inferior escribiremos la dirección de enlace que hemos guardado anteriormente. Por ejemplo, una opción sería poner de título de página 'Mi tienda' y luego de dirección el enlace www.mitienda.com.

Podemos añadir tantas como queramos ^.^ y los botones en nuestra barra se crearán automaticamente.





Una vez añadidos todos los datos a nuestra barra, ahora vamos a la parte más diver, ponerla chula chula.
Sin movernos de donde estabamos, vamos a averiguar como se llama el gadget de paginas, ya que necesitaremos saber el nombre para modificar las propiedades. Para eso, si mantenemos el cursor sobre la palabra 'Editar' del gadget páginas, en la parte inferior de la página saldrá un texto similar:


En mi caso el gadget de páginas se llama 'Pagelist2' justo lo que pone antes de 'action'. Quizás hay alguna otra forma de extraer el nombre, pero no he investigado mucho sobre ello y no se otra forma más que esta, prometo hacer los deberes :)


Una vez tenemos el nombre del gadget, nos vamos a Plantilla, Personalizar, Avanzado, Añadir CSS, y Vamos a enganchar en el cuadro todo el texto que está en lila:


/* Personalizar barra de páginas
----------------------------------------------- */
#Nombre del gadget {
width: 100%;
border: 1px solid #666666; /* Color del borde del menú */
background-color: #333333; /* Color de fondo */
}
#Nombre del gadget ul li a {
color: #000; /* Color de los enlaces*/
text-decoration: none;
font-weight: bold; /* Fuente en negrita */
padding-right: 20px; /* Posición*/
background: transparent url(Dirección de la imagen que queremos de fondo) center right no-repeat;
}
#PageList2 ul li a:hover {
color: #ccc; /* Color del texto al pasar el ratón */
position: relative;
left: 1px;
top: 1px;
}
}.tabs-inner .widget li a {
font: normal normal 15px 'Courier';
background: #ffffff
url(Dirección de la imagen que queremos de fondo);text-decoration:none; ) ;
border-radius: 10px; /*Si queremos redondear los botones*/
color: #XXXXXX;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #999999;
background-color: transparent;

text-decoration: none;
}

Os explico por partes para que vayáis rellenando todos los datos que faltan para personalizar vuestra barra:

  • Nombre del gadget: Aquel que os saldrá en la parte inferior al colocar el cursor sobre 'editar', en mi caso como he dicho antes 'Pagelist2'.
  • Dirección de la imagen que queremos de fondo: Aquí debéis escribir la dirección de la imagen de fondo que tenemos subida a nuestro álbum de picasa o google+, o bien en otro servidor que nos permita subir imágenes. Podéis poner cualquier imagen que queráis, si es un mosaico que se repite mejor, así no tendréis que hacer retoques. Si no queréis imagen de fondo, borrar toda la linea de código, desde 'background' hasta 'repeat' ; Si queréis algunos fondos aquí os regalaba algunos para vuestros botones.
  • border-radius: 10px: Si queréis que los botones de la barra de páginas sean redondeados, debéis poner un número, a más alto más redondeo. Si los queréis cuadrados poner 0px
  • #666666; /* Color del borde del menú */ : Los números como ya sabéis la gran mayoría son los colores, al lado de cada código de color os he puesto a que elemento pertenece. Así que no tenéis más que modificarlo a vuestro gusto, cogiendo antes los códigos de color de vuestro blog.

Y ya hemos acabado, en resumen, añadir páginas en el apartado de páginas de blogger, añadir la barra con el gadget páginas en el apartado de diseño, y personalizar la barra en CSS en la parte de avanzado.

Algunos ejemplos:





Si tenéis cualquier duda podéis dejar un comentario aquí en el blog o escribirme a klaudisseny@gmail.com, espero vuestras sugerencias.

Besos, Clau

5 comentarios:

  1. Genial tutorial! Me lo guardo para cuando tenga tiempo, que queda un menú muy original! :D
    Un besazo!

    ResponderEliminar
  2. Hola! nos ha gustado mucho el tutorial! muchísimas gracias por compartirlo! besis

    ResponderEliminar
  3. En la ultima parte, cuales son los colores que representan los números?

    ResponderEliminar

Gracias por decir la tuya :)