Tutorial: Paginación webcómic para blogger.

Uno de los principales problemas de tener un webcómic en blogger es la difícil que resulta navegar en el.

Así que para mejorar ese asunto vamos a cambiar los textos de  "entradas antiguas" Entradas nuevas" por botones.

Yo pondré como ejemplo mi blog titulado One Shot que como pueden ver en la imagen todavía tiene la navegación anterior.

Antes de comenzar con el tutorial deben tener hecho al menos cuatro botones de navegación (inicio, anterior, siguiente, última) , adicional cuatro botones mas pero con un tono diferentes para que sean botones inactivos y tenerlos subidos en imageshack  o alguna página  similar.

También recuerden guardar un respaldo de su plantilla por si algo sale mal.

Así que en el escritorio de nuestro blog nos vamos a plantilla y edición html

Nos aseguramos de poner el visto en donde dice "expandir plantillas de artilugios"

Ahora buscamos el siguiente código

#blog-pager {

  padding: 15px;

  font-size: 120%;

  background-color: $(pager.background.color);

  border: 1px solid $(widget.border.color);

  -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  -moz-border-radius: $(widget.border.radius);

  -webkit-border-radius: $(widget.border.radius);

  -goog-ms-border-radius: $(widget.border.radius);

  border-radius: $(widget.border.radius);

  -moz-border-radius-topleft: $(pager.border.radius.top);

  -moz-border-radius-topright: $(pager.border.radius.top);

  -webkit-border-top-left-radius: $(pager.border.radius.top);

  -webkit-border-top-right-radius: $(pager.border.radius.top);

  -goog-ms-border-top-left-radius: $(pager.border.radius.top);

  -goog-ms-border-top-right-radius: $(pager.border.radius.top);

  border-top-left-radius: $(pager.border.radius.top);

  border-top-right-radius-topright: $(pager.border.radius.top);

  margin-top: $(pager.space.top);

lo boramos y lo sustituimos 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;

}

Ahora  buscamos el siguiente 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 sustituimos con este:


<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>

Ahora deben poner las correspondientes urls donde se indica en azul

Si se hizo bien el resultado quedará así:

El tutorial original fue realizado por Osukaru y fue puesto en su blog, quien tuvo muchísima paciencia para enseñarme.

Mil gracias por leer y comentar.