Tutorial para personalizar la barra de páginas en vuestro blog

Habréis visto que he vuelto a hacer cambios en la estética del blog. Y, como siempre, los comparto con vosotros, para que, si os gusta, podáis hacer lo mismo en vuestros blogs.

En esta ocasión, uno de los cambios más llamativos que he realizado es en la barra de páginas, donde podéis seleccionar a qué apartado del blog queréis ir. Otro día, si queréis, podemos hablar de la diferencia entre entrada (post) y página. Pero para lo que os voy a explicar hoy no hace falta, porque lo que vamos a crear son botones que nos llevarán a donde queramos (una página, una entrada en concreto, una página web externa...).

Lo que ocurre es que yo tenía ya hecha en mi blog una organización por páginas, para poder usar la barra que te facilita blogger. Esta herramienta está muy bien y es muy práctica, pero estéticamente tiene muchas limitaciones. Porque no me diréis que es lo mismo esto:



Que esto:


A ver, que contra gustos no hay nada escrito, y estoy segura de que vosotros podréis hacer unos diseños de botones mucho más bonitos. Pero la forma de instalarlos es siempre igual.

Como ya os estaréis imaginando, la forma de hacerlo es prácticamente igual que cuando instalamos los botones sociales, con algunas pequeñas variaciones.

Lo primero que debemos hacer es diseñar (o que nos diseñen) los botones. Es importante:
  1. Que se adapten a la estética del blog.
  2. Que tengan las medidas adecuadas, porque luego no las vamos a poder cambiar. Es importante saber las medidas de vuestro blog. Para ello, me voy, en Blogger, a Plantilla - Diseño - Ajustar ancho. En esta ocasión, necesito saber el ancho del blog completo y cuántos botones quiero poner. Para que os hagáis una idea, los botones que he instalado son de 200 px de ancho y 50 px de alto.
  3. Cuando los diseñemos, los guardaremos en formato .png con el fondo transparente. El formato .png es el único que nos va a respetar el fondo transparente. Si no lo hacemos así, nos saldrá un cuadrado blanco un poco feo alrededor de cada botón.

Una vez tengamos listos los botones, los subiremos todos a la nube (Google Drive, Dropbox,...), como os explico aquí. Necesitaremos copiar el mismo código que cuando instalamos los botones sociales.

Nos vamos a nuestro blog, en Diseño, y le damos a la opción Añadir un gadget. Seleccionamos el de HTML.





Ahora se nos abrirá el cuadro donde escribiremos nuestro código HTML.
El título lo dejamos en blanco.
En el cuadro de Contenido, por cada botón que queramos añadir, escribiremos:
<a href="URL del link"><img src="URL de la imagen"></a>
  • URL del link: a la página donde quiero que vaya cuando se pique en la imagen (en mi caso: Inicio, Recetas, etc...).
  • URL de la imagen: el código que hemos copiado en Photobucket.
(Lo que está escrito en rojo y el subrayado es para que lo veáis bien: vosotros escribidlo todo en negro).

Si tenéis alguna duda con respecto a lo que es la URL y cómo averiguarla, podéis consultar este post, donde os lo explico al detalle.


Si quiero añadir más botones, para que salgan juntos, voy pegando la misma secuencia de código (sin dejar espacios) todas las veces que necesite. Solo tendré que cambiar las URL del link y de la imagen en cada caso.

Hecho de esta manera, quedarán los botones alineados a la izquierda de la pantalla. Si quiero que queden centrados (como yo los tengo ahora) sólo tengo que escribir:
  • <center> al principio de todo.
  • </center> al final de todo el código de todos los botones que he incluido.

Así es el código HTML que nos quedaría:


Ya sólo nos queda guardar, colocar el gadget en el lugar que queramos (en la pantalla de Diseño) y comprobar cómo ha quedado.

Para eliminar la barra de páginas que teníamos con el gadget de blogger, sólo tenemos que irnos a la pantalla Diseño, buscar la barra de páginas, darle a Editar y a Eliminar. Así nos quedará sólo la nuestra.



¿Y si más adelante queremos deshacer los cambios, eliminar nuestra barra de páginas personalizada y volver a la de Blogger? ¡Sin problema! Eliminamos el gadget de HTML en el que está el código que hemos escrito para crear nuestra barra y nos vamos a Diseño - Añadir un gadget y seleccionamos el de Páginas. Si tenemos creada la estructura en páginas, nos creará la barra automáticamente.


¡Pues ya está! Ahora "sólo" os queda diseñar vuestros propios botones, para que queden a vuestro gusto. Porque yo los he hecho rectangulares (así de sosa soy), pero pueden ser redondos, en forma de animales, pueden ser fotos... ¡lo que queráis! ¡Los límites los ponéis vosotros!

Espero que os resulte útil este tutorial y... ¡nos vemos en el próximo post!

Comentarios

  1. Carmen alucino contigo! parece que me lees el pensamiento, el otro dia estuve buscando justo como hacer esto, tengo ganas de cambiar el blog!! Bscosss

    ResponderEliminar
    Respuestas
    1. ¡Me alegro de que te sea útil! Y ya ves que no es nada difícil... :) Un beso!!!

      Eliminar
  2. Útil se queda corto!! Como siempre genial. El problema es querer crear algo chulo cuando no somos expertos en ello. Se nos va una vida entera. Pero como a mi no me gana nadie en cabezona...¡Algún día cambiaré todo mi blog!
    ¡Gracias por compartir tu sabiduria!
    Besos!!!

    ResponderEliminar
  3. que bien, michas gracias que todo va bien saber, besos!

    ResponderEliminar
  4. Qué buen post, he de confesarte que yo también soy seguidora fiel de Blanca y que estoy en proceso de elaboración de otra plantilla para mi blog. Muchos besitos

    ResponderEliminar
  5. Hola! Qué bien me viene tu post!!
    A ver si me puedes ayudar con una cosita... Cómo sabes cuáles son las urls de tus páginas... Igual es súper básico pero soy incapaz de encontrarlas.

    Mil gracias

    ResponderEliminar
    Respuestas
    1. Hola, Beatriz. Me ha parecido muy interesante tu pregunta, así que he escrito un post para responderla. Puedes verlo AQUÍ. Besos!!!

      Eliminar
  6. Muy bueno el post !!! muchas gracias , lo intentaré , espero no estropear todo jejejeje

    ResponderEliminar
    Respuestas
    1. Siempre puedes luego volver atrás, María... Que la opción del gadget de páginas de Blogger siempre lo puedes volver a activar... Pero ya ves lo fácil que es y el buen resultado que da. Ya me contarás. Besos!!!

      Eliminar
  7. ¡Gracias! Ahora el diseño de mi nuevo blog ya no quedo tan simple. Puedes ver mi trabajo: http://simpleagatha.blogspot.com

    ResponderEliminar
  8. ¡Hola!
    Una pregunta, ¿cómo haces para que se te queden todas a la misma altura? Es que no soy capaz jaja

    ResponderEliminar
  9. ¡Me ha servido de mucho!
    Hacía tiempo que quería cambiarlo pero no sabía como. Un tutorial perfecto, fácil y completo. Felicidades y muchísimas gracias. ¡Me ha quedado genial!
    ¡Felices fiestas!

    ResponderEliminar
  10. Gracias por explicar tan claramente las cosas. Haces un trabajo excelente.
    Saludos y feliz 2014!

    ResponderEliminar
  11. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  12. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  13. Buen aporte me ha encantado tu post Carmen. Les invito a mi Blog muchas gracias un placer!!

    diseño de paginas web en Málaga

    ResponderEliminar

Publicar un comentario

Muchas gracias por dejar tu comentario. Me encanta leerlos todos y me ayudan a mejorar este blog día a día... ¡Sin vosotros, esto sería muy aburrido!