Perzonalizar el pie de navegación a entradas más nuevas o antiguas en Blogger

El nuevo Blogger incorpora tanto en la página principal, etiquetas y entradas idividuales un pie de navegación, es decir, enlaces a “Entrada más reciente”, “Entradas antiguas” y “Página principal” sin formato y sin estilo. En este artículo te mostraremos como personalizarlo.

1. Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.

2. Activa la opción “Expandir plantillas de artilugios” y en el campo de texto busca el siguiente código:

   <DIV class='blog-pager' id='blog-pager'>
   <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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></A>
   </SPAN>
   </b:if>
   
   <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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></A>
   </SPAN>
   </b:if>
   
   <b:if cond='data:blog.homepageUrl != data:blog.url'>
   <A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
   <b:else/>
   <b:if cond='data:newerPageUrl'>
   <A class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></A>
   </b:if>
   
   </b:if>
   </DIV>

   Este es el código encargado de mostrar los enlaces de navegación. Sí te das cuenta corresponden aca uno de los links:
   <data:newerPageTitle/> – Corresponde al texto “Entrada más reciente”
   <data:olderPageTitle/> – “Entradas antiguas”
   <data:homeMsg/> – “Página principal”
3. Personalización:Cambiar el texto por otro. Para remplazar el texto por otro de nuestro agrado sólo remplazamos la etiqueta correspondiente a cada enlace por nuestro texto, por ejemplo, para el link de entradas recientes sustituimos completamente “<data:newerPageTitle/>” por “Artílos más recientes” directamente.Cambiar texto por imagen. Para sustituir el texto por una imagen podemos seguir metodología anterior y remplazar cada etiqueta por su imagen correspondiente. A continuación te damos un ejemplo creado por Blogyweb y que puedes usar libremente con sólo remplazar el código inicial con este:
   

   <div class='blog-pager' id='blog-pager'>
   <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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> <img alt='data:newerPageTitle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ5jh48l_t777HRCPgsdAfqbbwqmyuedURlZAuL9DtIsKVPpMol-R8RKlgR18EWKCrtLoFPVmfoMV1153s_MvLAJhOmtJHgc3bUUZtl03Dcy76xVVS3hXqyc8EK8sZObYd8kLY2Ge7nR0/s1600/botong_atras.gif' /></a>
   </span>
   </b:if>
   
   <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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'> <img alt='data:olderPageTitle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh25tkRUGddcyArSKoHEtsrRppm9tnG_I1HWBX7S6RAzoVo9csts5gZmPaB7hT03Gr3iu-HfuZI-0tKE2g_mAW-BaKENpT2Rvnxl7B3iMqec39N2HXZRkrPBbn1Z0rclXDoe6kOwuBHP8k/s1600/botong_adelante.gif'/> </a>
   </span>
   </b:if>
   
   <b:if cond='data:blog.homepageUrl != data:blog.url'>
   <a class='home-link' expr:href='data:blog.homepageUrl'>
   <img alt='data:homeMsg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoe3vxJczKmah07itPjE_sxQeH5x4CaiZpCZzFZ7XdUditLVpTTJxmF2TMndKv7Yh_3FwYz8rem0zhwado3P6v-0M8GP_-JY-5P9WX0jM_WsX6yS9Stb9AbIGLw6lbtL9uiMKPljDzrw/s1600/botong_home.gif'/> </a>
   <b:else/>
   <b:if cond='data:newerPageUrl'>
   <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   </b:if>
   
   </b:if>
   </div>

Dar formato a los links. Si lo único que quieres es darles un mejor formato a estos enlaces modifica los atributos de las siguientes clases:

#blog-pager-newer-link – Para “Entrada más reciente”

#blog-pager-older-link – Para “Entradas antiguas”
#home-link – Para “Página principal”