Mis Consejos de Blogger: Paginación con botones

Hola. Hoy estreno una sección de este blog dedicado a compartir con el resto de la blogsfera mis grándes descubrimientos sobre personalización y construcción de vuestro blog.

Voy a empezar con una modificación que me costó sangre conseguirla, ya que casi me atreveria a decir, no hay precedentes . Se trata de una navegación primera-anterior-siguiente-última que muchos webcomiqueros me agradecerán. Lo podeis ver en acción en mi webcomic http://boredgirlwebcomic.blogspot.com y, con suerte, en este mismo blog.

Con esto pasareis del aburrido y confuso paginador tradicional:

A uno más vistoso, lógico y amigable^-^:

Empieza la cosa:
Primero, iros a vuestro BLOG y pinchad sobre la opción "Diseño" de la barrita superior:

Después iros a la pestaña "Edición HTML" para ver el código de la plantilla:

ahora, (¡¡MUY IMPORTANTE!! ya que si no no encontrareis lo necesario para el siguiente paso) pulsad sobre el "check" de "Expandir plantillas de artilugios" para verlo TODO:

Una vez hecho esto, buscais el siguiente código:

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

Y lo substituis por ESTE:

#blog-pager-first-link {
float: left;
}

#blog-pager-older-link {
float: left;
}


#blog-pager-last-link {
float: right;
}

#blog-pager-newer-link {
float: right;
}

(Consejo: para facilitar la edición y evitar pifias suelo copiar TODO el codigo en un editor de texto por partida doble. uno para modificar comodamente y otro para tenerlo como seguridad.)

Como podreis observar, lo único que hize fue añadir las linesas de "#blog-pager-older-link" y "#blog-pager-newer-link" y borré el de "#blog-pager". El orden de estas lineas es irrelevante. creedme. lo he probado de 1000 formas y nada ha cambiado.

Luego buscais el siguiente trozo de 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 + "_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>

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

</div>
<div class='clear'/>
</b:includable>

y lo substituis por este codigo:

<b:includable id='nextprev'>
<div id='blog-pager'>

<b:if cond='data:olderPageUrl'>
<a href='[Link al primer post]' id='blog-pager-first-link' title='Primera tira'>
<img src='[imagen de primero-on]'/></a>
<b:else/>
<a id='blog-pager-first-link'>
<img src='[imagen de primer-off]'/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' id='blog-pager-older-link' title='Anterior tira'>
<img src='[imagen de anterior-on]'/></a>
<b:else/>
<a id='blog-pager-first-link'>
<img src='[imagen de anterior-off]'/></a>
</b:if>



<b:if cond='data:newerPageUrl'>
<a expr:href='data:blog.homepageUrl' id='blog-pager-last-link' title='Última tira'>
<img src='[imagen de último-on]'/></a>
<b:else/>
<a id='blog-pager-last-link'>
<img src='[imagen de último-off]'/></a>
</b:if>
<!-- archivos -->
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' id='blog-pager-newer-link' title='Siguiente tira'>
<img src='[imagen de siguiente-on]'/></a>
<b:else/>
<a id='blog-pager-newer-link'>
<img src='[imagen de siguiente-off]'/></a>
</b:if>

</div>

<div class='clear'/>
</b:includable>

(Fijaos en las partes entre []. subtituirlo por los links correspondientes)

Decir que esta parte del código lo podeis poner donde os apetezca e incluso duplicarlo, tal como lo hice en Bored Girl.

yo voy a utlizar estas imagenes. ¡cojedlas si quereis! son Creative commons^-^