Botones flotantes ir atrás e ir adelante de las entradas

¡Hola amigos! En esta entrada les voy a enseñar a agregar unos botones para ir adelante e ir atrás y que estén siempre flotando. Lo único que necesitaremos para este trabajo será un poco de CSS. Una ventaja de estos botones es que solo utilizaremos una imagen, no dos, pero claro que ustedes las pueden cambiar. Bueno, empecemos:

Enseñaré dos maneras de hacerlo: una será para poner los botones que yo tengo; y la otra, para que ustedes puedan poner sus propias imágenes. Comencemos con mis imágenes:

Primero, se van a Blogger - Su blog - Plantilla - Editar HTML. Ahí abren el buscador dentro del editor, presionando F3 o CTRL + F. Una vez que tengan abierto el buscador, buscan lo siguiente:

<b:includable id='nextprev'>

Si no lo encuentran así, quiten las < y > y deberían hallarlo. Cuando lo hayan encontrado, eliminen todo el include:

<b:includable id='nextprev'>...</b:includable>

Y en su lugar peguen el siguiente código:

<b:includable id='nextprev'>
<b:if cond="data:blog.pageType != &quot;item&quot;">
<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='Previous Post'>&#171; Anterior</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='Next Post'>Siguiente &#187;</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Inicio</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Inicio</a>
</b:if>
</b:if>
</div>
</b:if>
<b:if cond="data:blog.pageType == &quot;item&quot;">
<b:if cond='data:newerPageUrl'><a expr:href='data:newerPageUrl'><div class='botones-posts atras'/></a></b:if>
<b:if cond='data:olderPageUrl'><a expr:href='data:olderPageUrl'><div class='botones-posts adelante'/></a></b:if></b:if>
<div class='clear'/>
</b:includable>

La parte de edición de HTML ya está terminada; ahora tienen que agregar los estilos, y para esto, buscan:

]]></b:skin> 

Y justo arriba de eso, agregan los estilos:

.botones-posts{
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKi9j3PdDn5uKqHogNq_vTWW6G4faxTPJq0E2ezfOb7Dbfb_faSC-ZPxSpozUwiBsnaYo4DMVSv8RXG7eATcuX4dwcGYGmwVkM_GliTzwuaxS0Zzvml6Z_sqM_5r_QV73hjvrfxXRcefxN/s1600/botones-posts.png&quot;);
background-repeat:no-repeat;
width:49px; height:37px;
}
.atras {background-position: -1px -53px;position:fixed;bottom:10px;left:10px;}
.adelante {background-position: -1px -4px;position:fixed;bottom:10px;right:10px;}

Y listo, ya tendrán los botones. Si los quieren cambiar de posición, modifiquen bottom por top para ponerlos arriba. Claro, cambiando los dos botones.

Pero ahora, si lo que quieren es agregar sus propias imágenes, lo único que tienen que hacer es editar el código HTML de arriba. Busquen lo siguiente:

<b:includable id='nextprev'>...</b:includable>

Y cámbienlo por:

<b:includable id='nextprev'>
<b:if cond="data:blog.pageType != &quot;item&quot;">
<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='Previous Post'>&#171; Anterior</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='Next Post'>Siguiente &#187;</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Inicio</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Inicio</a>
</b:if>
</b:if>
</div>
</b:if>
<b:if cond="data:blog.pageType == &quot;item&quot;">
<b:if cond='data:newerPageUrl'><a expr:href='data:newerPageUrl'><img class="boton-atras" src="AQUI-LA-URL-DE-TU-IMAGEN.PNG"/></a></b:if>
<b:if cond='data:olderPageUrl'><a expr:href='data:olderPageUrl'><img class="boton-adelante" src="AQUI-LA-URL-DE-TU-IMAGEN.PNG"/</a></b:if></b:if>
<div class='clear'/>
</b:includable>

Y con respecto a los estilos, en vez de poner los anteriores, ponen estos:

.boton-atras{position:fixed;bottom:10px;left:10px;}
.boton-adelante{position:fixed;bottom:10px;right:10px;}

Y ahí es exactamente lo mismo que lo anterior: si quieren los botones arriba, cambian bottom por top.
Eso es todo en este tutorial. ¡Espero que les sirva!