Cómo hacer tu blog de blogger más amigable y llamativo

    ¡Buenas noches!

   ¿Qué tal habéis pasado la semana? Yo fenomenal porque... hemos tenido un tiempo fantástico, y en el trabajo he descubierto un par de errores que no encontraba y que estoy segura que me llevarán a la gran victoria final (uaajajajaja -risa diabólica-).

    Bueno, dejemos de lado mi objetivo secreto de dominar el mundo... Hoy quiero concentrarme en un concepto que oí por primera vez el sábado pasado durante las conferencias del I encuentro de madres blogueras en Madrid. Así que démosle una calurosa bienvenida a nuestro invitado de hoy: la USABILIDAD (plas, plas, plas). Sí, lo sé, la RAE ya me avisa de que ese término no existe en español, pero refleja muy bien el concepto que quiero que entendáis. ¿Nunca os habéis preguntado cómo de fácil es para vuestros visitantes interaccionar con vuestro blog? ¿es sencillo para ellos moverse por las distintas secciones? ¿encuentran con facilidad lo que han venido a buscar? en definitiva, ¿se sienten cómodos con la estructura del blog? Si la respuesta a todas estas preguntas en un sí, entonces la usabilidad de nuestro blog sería correcta.

    Cuanto me planteé yo misma estas preguntas mi respuesta fue clara y rotunda: sí... ¿no? Pensándolo mejor, me pareció que era más no que sí, porque viendo el blog que la niña sin nombre (ponente en el congreso de madres bloggeras) nos citó como ejemplo, me quedó claro que la antigua estructura de mi blog no era la más cómoda para vosotros. Sí, había agrupado los temas y simplificado las etiquetas para que os fuera más sencillo navegar por las secciones, pero no se podía echar un vistazo rápido a las entradas para ver si eran interesantes o no. Una buena solución, como decía la niña sin nombre, es la que sigue el blog de mi gremlin no me come. ¿Y cuál es esa?:

1. Tener botones (pestañas) para las secciones más importantes. 
2. Que esos botones nos lleven a un listado con todas las entradas publicadas. 

    Así de un vistazo se pueden ver todas y entrar donde más nos interese. ¡Me pareció una idea genial! Así que he reestructurado el blog y ya de paso he cambiado el diseño por el que veis ahora (que me gusta mucho más, ¿y a vosotros?). Si queréis saber cómo poner pestañas en una plantilla blogger, seguid leyendo que os lo explico todo de forma muy sencilla. Y sino... apaga y vámonos (a tomarnos un vasito de leche y a la cama, ea).

    Lo primero que tenemos que hacer es crear tantas páginas como secciones queremos tener en nuestro blog. El objetivo es que estas nuevas páginas contengan los enlaces a todas las entradas publicadas en cada sección. ¿Cómo hacemos esto? Muy fácil.

1. Tendremos que entrar en nuestro blogger, seleccionar la pestaña "Páginas" (en el panel lateral de la izquierda).
2. Dentro de "Páginas" pincharemos en "Página nueva" y elegiremos "Página en blanco". Se abrirá una nueva página (como pasa al crear una entrada).

  

3. En esta página tendremos que poner el título de la sección que queremos crear y en el cuerpo de la página hacer una lista con los enlaces a todas vuestras entradas publicadas hasta la fecha. Bien, ya tenemos la página lista. Si queremos ver cómo va a quedar, ya sabéis, en vista previa tendremos el resultado. Si os gusta, la publicamos.
4. Repetiremos los pasos anteriores para crear tantas páginas como botones a secciones queramos.
5. Y para terminar, dentro de la pestaña "Páginas" de blogger pincharemos en la pestaña de "Mostrar páginas como" y elegiremos "Pestañas principales" (Esto hará que se muestren las pestañas en nuestro blog). 

    Ahora ya tendríamos nuestro blog mucho más "usable" y amigable para los visitantes, peeeeeeero.... con las pestañas por defecto de blogger que no son muy bonitas. Podríamos dejarlo aquí, pero no. ¡Vamos a dejarlo más chulo!

    Ahora tenemos nuestras nuevas páginas publicadas pero aún no sabemos su dirección. No hay problema, eso es fácil de averiguar. Entramos en nuestra web, pinchamos en cada una de las pestañas y apuntamos sus respectivas direcciones html (las copiamos de la barra de tareas en un archivo de texto o donde queramos, vaya). Las necesitaremos más tarde para poner nuestros botones personalizados.

    Ok. El primer paso ahora será ocultar de nuevo las pestañas con la opción "No mostrar". (En "Páginas", "Mostrar Páginas Cómo". Así  ignoraremos las pestañas de blogger y crearemos las nuestras propias.

    Aquí entra en juego vuestra imaginación y vuestro arte con el diseño gráfico. Como veis yo de arte ando justita. Pero bueno, a lo que vamos. Necesitaremos dos tipos de botones para cada entrada. Un botón que será el que aparecerá por defecto y otro que aparecerá cuando pasamos el ratón por encima.

   Para el diseño de los botones podemos utilizar lo que más nos guste: Powerpoint, GIMP, PicMonkey, etc. A vuestra elección. Eso sí, es importante que las imágenes ocupen lo menos posible porque de lo contrario, cuando pongamos el ratón sobre el botón, la nueva imagen tardará mucho en cargar. Así que:

1. Diseñamos nuestros super-botones y los guardamos como png (si tiene transparencias) o jpg.
2. Ahora subiremos nuestros diseños a un servidor de imágenes. Hay muchos yo uso ImageShack. En esta web, por ejemplo, solo necesitaremos registrarnos, cargar las fotos en el servidor y apuntarnos la direcciones html de las imágenes que acabamos de subir (el link está en el cuadro que pone "Enlace directo") en, por ejemplo, el archivo de texto de antes.

    Ya hemos casi acabado, ¡yuhuuu! Ahora hay que trabajar un poco con html pero nada que vosotros no podáis hacer.

1. Vamos a la pestaña "Diseño" de blogger y añadimos un nuevo gadget HTML/Javascript. 

2. En el gadget dejamos el título en blanco, introducimos el siguiente código html y guardamos:

<center>

<a href="dirección_html_de_la_sección "1" style="margin-left: 1em; margin-right: 1em;"><img border="0" width="80" src="dirección_hml_de_la_imagen_normal" onmouseover="this.src='dirección_hml_de_la_imagen_ratón'" onmouseout="this.src='dirección_hml_de_la_imagen_normal'"/></a>

*/Repetir el código de arriba para cada sección/*

</center>

    center lo usamos para centrar los botones en el blog. El texto en amarillo lo tenéis que substituir por la dirección html de una de las páginas (las que tenéis guardadas en el archivo de texto). En el texto en verde pondréis la dirección html de la imagen correspondiente al botón, de esa sección, que queréis que salga siempre. En el texto en rojo hay que poner la dirección de la imagen que queréis que salga al pasar el ratón por encima. Los demás valores los podéis dejar como están. Sin embargo es importante que modifiquéis el valor de width a vuestro gusto. Ese número indica el ancho (en píxeles) del botón. Para que os hagáis una idea los míos están a 70.

    El texto en html que va entre <center> y </center> lo tenéis que repetir para cada sección, usando las direcciones que os habéis copiado previamente.

3. Nuevamente en "Diseño", movemos el nuevo gadget justo debajo de la cabecera del título del blog.

   ¡Y ya está! Tenemos listos los botones que nos llevarán al listado de las entradas publicadas en cada una de nuestras secciones. Recordad que cada vez que publiquéis una nueva entrada que pertenezca a la sección tendréis que editar la página correspondiente e insertar el nuevo link.

   ¡Espero que os hayáis aclarado!... o al menos, que os guste cómo me ha quedado a mí, jajaja. Si os perdéis en algún paso preguntadme, y os respondo.

   Besos, ¡y a disfrutar del finde que ya está aquí!