Personaliza los enlaces de navegación: "Entradas antiguas", "Página Principal" y "Entradas más recientes" de tu Blog con una buena imagen

Personaliza tu Blog, dale el toque que deseas. Te propongo una manera de ofrecer los enlaces para mostrar las entradas antiguas o las entradas nuevas de una manera vistosa sin perder un rendimiento y con un excelente acabado.

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"), 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".

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" de nuestro salto de línea. 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 "Editar HTML". Se te mostrará el código fuente de Blogger que compone tu plantilla.

Editor de plantilla de Blogger. 

Poniendo la imagen para el enlace "Entradas más recientes"

3) Pulsa CONTROL + F para localizar el texto <data:newerPageTitle/>

• Se trata de la etiqueta que controla el texto para el enlace de las "Entradas más recientes". El código completo que debes estar viendo y sobre el que vamos a actuar es este: 

<b:if cond='data:newerPageUrl'>

      <span id='blog-pager-newer-link'>

      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/> </a>

      </span></b:if>

• Para poner una imagen en vez del texto que por defecto se carga para "Entradas más recientes" cambia o comenta como hago en el ejemplo el texto <data:newerPageTitle/> por <img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/></a>

Quedaría algo así:

<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><!--<data:newerPageTitle/>--><img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/> </a>
      </span>
    </b:if> 

•  En amarillo: La parte de código que no es necesario tocar y que no cambia.
• <!--<data:newerPageTitle/>-->: Comentamos la línea que hace que salga el texto "Entradas más recientes" al presentar nuestra página. El comentario <!-- que se cierra con -->, hace que el navegador lo interprete como texto "que no existe", que se salta. Es mejor comentarlo para no tenerlo que borrar, si no te gusta el resultado puedes quitar las etiquetas de comentario y vuelve a dibujarse normalmente. Si lo prefieres, puedes borrarlo directamente, esto según tus preferencias.
• <img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/>: Aquí pondrás la imagen que hayas diseñado y que desees que se muestre para que el usuario pulse y acceda a las entradas más recientes.

Poniendo la imagen para "Entradas Antiguas"

4) Pulsa CONTROL + F para localizar el texto <data:olderPageTitle/> (un poco más abajo de las páginas para entradas más recientes, se encuentra esta etiqueta que referencia a las más antiguas).

• Se trata de la etiqueta que controla el texto para el enlace de las "Entradas antiguas". El código completo que debes estar viendo y sobre el que vamos a actuar es este: 

  <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

• Para poner una imagen en vez del texto que por defecto se carga para "Entradas antiguas" cambia o comenta como hago en el ejemplo el texto <data:olderPageTitle/> por <img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/></a>

Quedaría algo así:

  <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><!--<data:olderPageTitle/>--><img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/> </a>
      </span>
    </b:if>

•  En amarillo: La parte de código que no es necesario tocar y que no cambia.
• <!--<data:olderPageTitle/>-->: Comentamos la línea que hace que salga el texto "Entradas antiguas" al presentar nuestra página. El comentario <!-- que se cierra con -->, hace que el navegador lo interprete como texto "que no existe", que se salta. Es mejor comentarlo para no tenerlo que borrar, si no te gusta el resultado puedes quitar las etiquetas de comentario y vuelve a dibujarse normalmente. Si lo prefieres, puedes borrarlo directamente, esto según tus preferencias.
• <img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/>: Aquí pondrás la imagen que hayas diseñado y que desees que se muestre para que el usuario pulse y acceda a las entradas más antiguas.

Poniendo la imagen para "Página principal"

5) Pulsa CONTROL + F para localizar el texto <data:homeMsg/> (un poco más abajo).

• Se trata de la etiqueta que controla el texto para el enlace de las "Página principal". El código completo que debes estar viendo y sobre el que vamos a actuar es este: 

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

• Para poner una imagen en vez del texto que por defecto se carga para "Página principal" cambia o comenta como hago en el ejemplo el texto <data:homeMsg/> por <img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/></a>

Quedaría algo así:

<a class='home-link' expr:href='data:blog.homepageUrl'><!--<data:homeMsg/>--><img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/></a>

•  En amarillo: La parte de código que no es necesario tocar y que no cambia.
• <!--<data:homeMsg/>-->: Comentamos la línea que hace que salga el texto "Página principal" al presentar nuestra página. El comentario <!-- que se cierra con -->, hace que el navegador lo interprete como texto "que no existe", que se salta. Es mejor comentarlo para no tenerlo que borrar, si no te gusta el resultado puedes quitar las etiquetas de comentario y vuelve a dibujarse normalmente. Si lo prefieres, puedes borrarlo directamente, esto según tus preferencias.
• <img src="DIRECCIÓN_DE_TU_IMAGEN" width="ANCHO" height="ALTO"/>: Aquí pondrás la imagen que hayas diseñado y que desees que se muestre para que el usuario pulse y acceda a las entradas más antiguas.

Sobre las imágenes que utilices, útiles recomendaciones y formas de subirlas a un servidor para utilizarlas en tu blog:

Controla que no haya reescalado:

• La imagen que pongas procura que NO haya que reescalarla. Es decir, suelen ser imágenes pequeñas de unos 120x45 píxeles. Busca tu tamaño más apropiado y procura que la imagen mida exactamente ese ancho y alto. De esta forma evitarás que el navegador "pierda tiempo" en el dibujado de tu imagen por tener que reescalarla al ancho y alto que hayas puesto en "Width" y "height". Fíjate en los tutoriales para "iconos sociales" en el punto 2.
• Te recomiendo que para la correcta gestión de imágenes para el Blog realices el tutorial de imágenes para obtener el mejor rendimiento posible.

Subir imagen de "más información" a Drive para utilizarla en tu Blog:

Una vez tengas tus imágenes, lo mejor es que las pongas en Google Drive o en un almacenamiento fiable y disponible para tí. 

• En Google selecciona en el menú superior "Drive" y el icono de la flecha apuntando arriba que te he marcada en la imagen.

• En el menú desplegable que te sale pulsa "Files" y selecciona las imágenes de los iconos que te descargarte para utilizar en el blog.
• Luego, cuando ya te aparezcan las imágenes subdias, no olvides seleccionarlas con la casilla de verificación que aparece a su izquierda y hacer clic en el icono que te marco en la imagen (el del "hombrecito" con un símbolo +):

• Cuando hagas "Share", vas a dejar la imagen compartida como pública para que pueda dibujarse en tu blog para todos los usuarios que accedan al mismo. Si no la compartes, no se dibujará. Deberás seleccionar "Public" en la sección "Who has access" tal como te muestro en pantalla. Además cópiate el código que te he marcado de cada una de las imágenes que hagas públicas. Es el código identificativo único que Drive asignará a tu imagen para que puedas compartirla, lo utilizaremos después en los próximos pasos (cada imagen que subas tendrá uno, apúntate cada uno con cada imagen que compartas):

Subir imagen de "más información" con Blogger para utilizarla en tu Blog de la manera más óptima:

• Puedes poner tu imagen en Drive, el problema es que su gestión se realizará mediante protocolo https en lugar de http. Esto puede ser un poco más lento, el https no se gestiona en la caché de tu navegador igual que lo hace el http. Mi consejo es que subas la imagen a una entrada de Blogger, la pongas en tamaño "original" y copies la URL asociada a dicha imagen, así la podrás utilizar con http que es más rápido:

1)  Créate una nueva entrada en Blogger (luego la podrás dejar en borrador o eliminarla, es igual).

2) Con el icono insertar imagen metes la imagen en la entrada como sueles hacer normalmente (la subes a Blogger como normalmente haces o utilizas una ya existente). Mete la imagen de cada icono.

3) Una vez insertada en la entrada, haz "clic" derecho sobre la imagen y copia la URL que Blogger ha asignado a la misma.

4) Cuando necesites llamar a esa imagen en tus páginas, por ejemplo iconos de redes sociales o de más que puedas tener alojados en Drive o servidores externos, cambia la URL por la nueva que Blogger ha asignado a la imagen al alojarla en sus servidores.
Con esto la carga de la imagen será por HTTP con un correcto alojado en caché y además dentro de los propios servidores de Blogger (sin necesidad de "salir fuera" a por dicha imagen).

Para cualquier duda, como siempre cuéntame lo que necesites en los comentarios.