Ir al contenido principal

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 Photobucket, como os explico aquí. Necesitaremos copiar el mismo código que cuando instalamos los botones sociales.

Cuando tengamos todos los botones en Photobucket, 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.

De este modo, mi botón Inicio queda con este código:

<a href="http://aminomegustacocinar.blogspot.com.es/" ><img src="http://i1295.photobucket.com/albums/b626/aminomegustacoc/botoninicio200x50px_zps0fe9a96c.png" /></a> 

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!
En este espacio respetamos la diversidad de opiniones, vuestras sugerencias y las críticas constructivas. Pero cualquier comentario ofensivo o fuera de tono no será respondido, sino que lo eliminaré en cuanto lo vea. Aquí no alimentamos a los trolls...

LO MÁS VISTO EN EL ÚLTIMO MES:

Salsa de queso azul o roquefort

Hoy os traigo esta rica salsa de queso azul, muy fácil de hacer, que resulta ideal para acompañar carnes y patatas (fritas, al horno, asadas al microondas,...). También se me ocurre que, si ponemos un par de cucharadas de esta salsa sobre unos macarrones rehogaditos, tienen que estar buenísimos.
Pero no sólo nos va a servir para acompañar platos calientes, sino que también la podemos usar para aliñar ensaladas.
En fin, como veis es una salsa tremendamente versátil. Eso sí, os tiene que gustar el queso, claro, porque el sabor es intenso.

Por cierto, si os gusta el queso, os encantarán estas galletas saladas de queso azul y nueces. ¡Tenéis que probarlas! Y si os gusta el queso menos intenso, estas galletas saladas de queso y bacon son ideales para vosotros.
Yo hoy he hecho la salsa con queso azul, pero si queremos salsa de roquefort la haremos exactamente igual, sólo que sustituyendo el queso azul por la misma cantidad de roquefort.



INGREDIENTES100 gr de queso azul (o roquefort)250 ml d…

Patatas asadas al microondas

Ésta es una forma rápida, limpia y sana de cocinar las patatas. Como el microondas las cocina en su propio jugo, quedan mucho más sabrosas que simplemente hervidas. En la foto se ven servidas sólo con un chorrito de aceite de oliva y sal, pero les vendrá bien vuestra salsa favorita, como la salsa de queso azul o roquefort.

Estas patatas al microondas pueden solucionaros la cena un día que no sepáis qué hacer, o que no tengáis ganas de meteros mucho en cocina, pero que no se os apetezca comer de precocinados. Esta receta está incluida en el recopilatorio 20 CENAS MUY FÁCILES de este mismo blog. Echadle un vistazo, que seguro que encontráis ideas interesantes.

Os dejo por aquí también el enlace a la receta de las patatas asadas en horno convencional, por si preferís prepararlas así.

Y ya, sin más, vamos a preparar las patatas asadas al microondas.
PREPARACIÓN
Cocinaremos la patata con su piel, así que lo primero es lavarla muy bien y secarla.
Después, haremos agujeros pinchando por to…

2 tintes a prueba: Majirel de L'Oreal vs. Igora Royal de Schwarzkopf. ¿Con cuál me quedo?

He de confesaros que no me gusta demasiado ir a la peluquería. Habrá a quien sí le guste, que se relaje,... Pero yo no. Sé que en estoy puedo ser un poco rara, pero no me relajo, me parece que pierdo demasiado tiempo y, por si fuera poco, acabo con el cuello destrozado del lava-cabezas (o como sea que se llame ese invento infernal, ese potro de tortura).
Eso sí, me gusta ir con el pelo arreglado, sin canas ni raíces. Porque una es rara, pero coqueta. Y para que no se me vean las canas, he de teñirme cada cuatro semanas.
Solución: voy a la peluquería cada tres o cuatro meses, para retocarme el corte (y ya de paso sí me dan el color allí), pero el resto de las veces me tiño yo en casa. Eso sí, el teñirte en casa no ha de significar usar productos de baja calidad, por lo que voy a una tienda de productos específicos de peluquería para comprar los tintes.
Los tintes que uso son de los mejorcitos, orientados a uso profesional y se aplican (como en la peluquería) con brocha, lo que asegura…

Conservas de mermelada casera: cómo hacerlas y precauciones que debemos tener.

Hacer mermelada casera resulta bastante sencillo y el resultado es delicioso. Lo podéis ver, por ejemplo, en la receta de mermelada de fresa, que veíamos el otro día.
La mermelada casera nos durará en el frigorífico de una semana a diez días sin problemas. Pero, claro, ya que hacemos mermelada... ¿por qué no la conservamos?
Las conservas de mermelada son una buena forma de aprovechar la fruta de temporada, y poder degustarla meses después. Y está el aliciente de usar sólo productos naturales, ya que los únicos conservantes que llevarán serán el zumo de limón y el azúcar.
Además, podemos decorar los tarros para que nos queden taaaan chulis... ¿Cómo nos podremos resistir a hacerlas?


El procedimiento es algo laborioso, pero nada complicado. Eso sí, hemos de seguir bien las instrucciones y tener muy en cuenta las siguientes precauciones, para evitar llevarnos un disgusto.
Y si nos nos decidimos... ¡siempre podemos optar por congelar la mermelada! Después, sólo hay que descongelar a tempe…

Cañas de chocolate: ¡más fácil, imposible!

Vale, ¿y qué os cuento de esta receta? Es muy fácil y se hace en un momento.

Aquí os explico cómo hacer las cañas grandes de chocolate, como las que venden en las pastelerías. Pero siguiendo la misma técnica las podéis hacer del tamaño que queráis, incluso preparar mini-hojaldres. Lo que sí debéis tener en cuenta es que cuanto más pequeñas sean las piezas de hojaldre, menos tiempo tardarán en hacerse en el horno, así que es bueno vigilarlas, para que no se nos quemen.

Si os gustan las cañas de chocolate, seguro que también os gustarán las cañas de cabello de ángel. Y si sois como yo, que os pirra el hojaldre, tanto dulce como salado, os dejo aquí el enlace a un recopilatorio de 7 recetas muy fáciles con hojaldre, que seguro que os interesa y podréis sacar ideas.

Aquí os pongo también la foto de las mini-cañas de chocolate:



INGREDIENTES
No pongo las cantidades, porque es "a ojo": ¡depende de la cantidad que queráis hacer!

Hojaldre Crema de cacao (tipo Nocilla)Azúcar glasFideos…