Pon una imagen para los enlaces "Entradas más recientes" y "Entradas antiguas" utilizando la potencia de las hojas de estilo

Personaliza tu Blog, dale el toque que deseas. Continuando con las entradas que nos ayudan a personalizar la presentación de nuestra plantilla por medio de las hojas de estilo, te propongo una manera de ofrecer los enlaces para mostrar las entradas antiguas o las entradas nuevas de una manera vistosa.



Los usuarios tienden a utilizar más de lo que se suele pensar los enlaces a pié de página que Blogger añade para que puedan pasar de las entradas más recientes a las entradas más antiguas o ir a la página principal. Son especialmente útiles cuando carecemos de menú u orientación posible para la navegación por el Blog.

Los Blogger no solemos conformarnos con la presentación por defecto que la propia herramienta nos brinda para muchos de sus componentes. Nos gusta editar la plantilla, utilizar los tipos de letra propios, darle nuestro toque personal.

Si anteriormente vimos cómo poner una imagen en el enlace del resumen de las entradas ("Más información") por medio de hojas de estilo, esta vez vamos a aplicar ese mismo concepto a los dos enlaces del pié de página de Blogger que más complementan el soporte a la navegación por el Blog: Ir a "entradas antiguas" o ir a "entradas más recientes".

Repaso de conceptos previos:

Conviene aclarar tres conceptos fundamentales con los que vamos a trabajar para personalizar la presentación de nuestro Blog y especialmente centrarnos en el enlace para "Más información" de nuestras entradas.

La Plantilla de Blogger:

Es una representación esquemática que sintetiza código HTML en etiquetas propias que al ser interpretadas por el servidor de Blogger conforman la presentación del blog. Al ser reutilizadas por todos los usuarios no podemos alterarlas sólo para nuestros intereses. Es por ello que cuando queremos "ir más allá" de lo que ofrecen a nivel básico, debemos reescribir algunos de los elementos que las componen. Entre esos elementos citados se encuentran las hojas de estilo, pilar básico del aspecto y formato de nuestras páginas en Blogger o en cualquier "publicación web".

Las hojas de estilos (.css)

Con Blogger las plantillas se basan fundamentalmente en hojas de estilo. Esta clase de archivos tienen la extensión .css: Hojas_de_estilo_en_cascada. Este tipo de archivos contienen la información semánticamente construida de los elementos que en la página HTML constituirán el aspecto y el formato de los componentes que la integran.

Conceptos iniciales para los más noveles: "Entradas antiguas", "Entradas más recientes"

• El llamado "cuerpo del blog" o página central de nuestro sitio web dispone su parte inferior o pié de página de tres enlaces que sirven para que el usuario pueda navegar por el Blog si se encuentra visualizando su parte inferior. Permiten avanzar a páginas con las entradas más recientes (enlace "Entradas más recientes"), retroceder a las más antiguas (enlace "Entradas antiguas") o volver a la página principal (enlace "Página principal").

• Si bien normalmente en la parte superior del Blog hay varios componentes que le permiten al usuario navegar a una página determinada del mismo (archivo del blog, menús, entradas populares, etc...), en la parte inferior no hay muchas más formas de que pueda acceder a contenidos antiguos o nuevos que utilizando estos enlaces.

• Un ejemplo de los enlaces para entradas antiguas, nuevas o página principal realizados con texto (la opción por defecto que ofrece Blogger):

Los enlaces para retroceder a entradas antiguas, entradas nuevas o volver a la página principal

Cómo ponemos una imagen para el texto "Entradas más recientes" utilizando hojas de estilo. Paso a paso.:

Los más creativos no se conformarán "sólo con texto". Si deseamos añadir una imagen, hay que seguir estos sencillos pasos:

1) Realiza una copia de seguridad de tu Blog siguiendo la guía para la que te he puesto el enlace. No te llevará más de dos minutos y si cometes cualquier error, simplemente podrás volver a tu copia de seguridad.

2) Dentro de Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y selecciona el botón "Personalizar". He marcado con reborde rojo el botón para personalizar plantilla.

Personalización de Plantilla

 3) En la página de personalización de plantilla, en el menú superior izquierdo selecciona la opción "Avanzado". La he marcado en naranja en la pantalla inferior.

Pulsamos en Avanzado para editar css

4) Al pulsar en avanzado nos aparece la página de personalización avanzada de plantilla. Si bajas el "scroll" del menú que ha salido tras pulsar "Avanzado" te aparecerá una última opción llamada "Añadir .css". Pulsa sobre dicha opción. En la pantalla inferior está marcada en naranja.

Sobreescritura de css

5) En la caja de texto grande en blanco sobreescribirás la clase o propiedad de la plantilla de Blogger del .css que utiliza.

[OPCIONAL, EJEMPLO PARA DETECTAR LA CLASE ASOCIADA AL ENLACE "MÁS INFORMACIÓN". Para los usuarios más avanzados o con ganas de saber más, si quieres saber cómo se detecta a qué elemento del .css de la plantilla de Blogger pertenece aquello que deseamos personalizar]

En la plantilla la parte que corresponde a más información la podemos localizar con Chrome o Explorer pulsando F12.

Detección de clase de hoja de estilos asociada a elemento en pantalla para su posterior personalización

Al hacer F12 en Chrome entras en modo "desarrollador". Si sigues las instrucciones tal y como he puesto en la pantalla anterior:

• Pulsas primero el icono de la "lupa".
• En modo "lupa"  al mover el ratón por encima de la pantalla, "Chrome" te dirá qué código fuente corresponde a ese punto de la pantalla donde tienes colocado el ratón. En este caso lo he puesto sobre "Más información".
• En el código se aprecia que el "class id", la clase que encargada de la presentación en la hoja de estilos del enlace "más información, es "jump-link".
• Con esto nos fijamos en las propiedades que tiene dicha clase para alterar su formato.

6) En la caja de texto para sobreescribir el .css, metes el código según tus necesidades.

Si la imagen "incluye el texto", se usaría algo como esto:

Para "Entradas más recientes": 

#blog-pager-newer-link a{
display:block;
width:500px;
height:500px;
background: url(nombre_imagen.gif) no-repeat left top;
text-indent:-999px;
}

Para "Entradas antiguas":

#blog-pager-older-link a{display:block;width:500px;height:500px;background: url(nombre_imagen.gif) no-repeat left top;text-indent:-999px;}

Si la imagen "no incluye el texto", porque ésta ya lo tiene, se elimina lo que resalté de negrita en el CSS anterior. En este caso, también podría ser necesario "desplazar el texto", para acomodarlo bien, y para ello podemos usar el padding, ejemplo: padding:10px 4px 3px 12px;.
Los valores se leen así: 10 pixeles arriba 4 pixeles a la derecha, 3 pixeles abajo, y doce pixeles a la izquierda. Habrá que editarlos según se necesite.
Los valores de ancho (width) y alto (height) se editan según el tamaño de la imagen.

• Observarás que cuando pongas tu imagen dentro del código, automáticamente en la vista previa podrás ir viendo cómo queda. Si alteras el width (ancho) o el height (alto) podrás hacer que ocupe el espacio que deseas.
• En los .css la imagen debe medir el espacio que va a ocupar, es decir, el width y el height no van a modificar su tamaño original.

¡Eso es todo!, ya tienes mayor control sobre tu plantilla para personalizarla a tu gusto.