Paginación en Blogger

AUTOR: VICARLONE

Hoy vamos a ver como crear el truco de Paginación en Blogger.

¿Que es la paginación? Paginar es separar las entradas del blog en grupos de cierta cantidad de entradas y permitir navegar entre ellas. Un ejemplo es este:


Como sabemos los que usamos blogger, esta plataforma no trae por defecto un estilo muy lindo de paginación, apareciendo simplemente los links de "Entradas Antiguas", "Entradas más recientes" y "Página Principal", los cuales son bastante feos.

Como debemos hacer antes de practicar cualquier cambio a la plantilla, realizamos un backup de la misma (Diseño -> Edición HTML -> Descargar plantilla completa).

Ahora si manos a la obra. Lo primero es dirigirnos a la Edición HTML de la plantilla, expandir artilugios y buscar el siguiente código:

#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}

Nota: si no lo encuentran tal cual al código busquen por pager-newer-link o pager-older-link que lo encontrarán.

Una vez localizado lo reemplazamos completamente por el siguiente código:

#blog-pager a {
text-decoration: none;
padding: .2em 1em;
margin: .2em;
color: #000000; /* Color del texto */
background-color: #FFFFFF; /* Color del fondo */
border: 1px dotted #CCCCCC; /* Color del borde */
}
#blog-pager a:hover {
color: #000000; /* Color del texto */
background-color: #EEEEEE; /* Color de destaque */
border: 1px dotted #CCCCCC; /* Color del borde */
}
#blog-pager {text-align: center;}

Pueden modificar lo que está en negrita por el valor que ustedes quieran. Al costado les aclaré cuales son cada color para que les sea más fácil. Pueden checkear la paleta de colores AQUI.

El siguiente paso es buscar éste código:

<b:includable id='nextprev'>
<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 +
&quot;_blog-pager-newer-link&quot;'
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 +
&quot;_blog-pager-older-link&quot;'
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>
<div class='clear'/>
</b:includable>


Y reemplazarlo completamente por este:

<b:includable id='nextprev'>
<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 +
&quot;_blog-pager-newer-link&quot;'
title='Página anterior'>&lt;&lt;</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 +
&quot;_blog-pager-older-link&quot;'
title='Próxima página'>Siguiente &gt;&gt;</a>
</span>
</b:if>
</div>
<div class='clear'/>
</b:includable>


Hecha la modificación hacemos click en vista previa y si todo ha salido correctamente guardamos los cambios. Ahora tienes tu propia paginación en blogger.

Aclaración: este truco funciona en el 99% de las plantillas, por lo cual existe un 1% en el que puede no funcionar correctamente. Por ello debes hacer un backup de la plantilla y probar si funciona. En caso contrario restauras la plantilla y no sucederá nada.

Vía: http://www.vidablogger.com.ar/