Blog and Web

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='http://bp0.blogger.com/_Zuzii37VUO4/Rf4lJS031KI/AAAAAAAAAfc/JItp8PeZF1U/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='http://bp2.blogger.com/_Zuzii37VUO4/Rf4lEy031JI/AAAAAAAAAfU/iu3bL2eUbhM/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='http://bp1.blogger.com/_Zuzii37VUO4/Rf4lMi031LI/AAAAAAAAAfk/m7Qpa985MY0/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”