Enlaces flotantes de nuestros post

Hoy vamos a mostrar como podemos poner unos enlaces flotantes de nuestras entradas más recientes y más antiguas en nuestro blog.
 Es un método diferente para sustituir mediante JQuery las leyendas de las entradas más antiguas y las más recientes.


Para ello vamos a modificar un poco el código HTML de nuestra plantilla.
Antes de todo esto como siempre comento, es mejor hacer una copia de seguridad de la plantilla antes de modificar algo por si nos equivocamos.
Aquí dejo este link donde lo explico paso a paso.
Una vez hecha nuestra copia de seguridad, vamos a modificar la plantilla.
Para ello nos vamos a Plantilla > HTML

Buscamos este código  }]]></b:skin>.
Una vez lo tengamos pegamos este justo debajo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var masreciente = $('a.blog-pager-newer-link').attr('href');
$('a.blog-pager-newer-link').load(masreciente + ' .post-title:first', function() {
var titulomasreciente = $("a.blog-pager-newer-link:first").text();
$('a.blog-pager-newer-link').text(titulomasreciente);
});
var masantiguo = $('a.blog-pager-older-link').attr('href');
$('a.blog-pager-older-link').load(masantiguo + ' .post-title:first', function() {
var titulomasantiguo = $('a.blog-pager-older-link').text();
$('a.blog-pager-older-link').text(titulomasantiguo);
});
});
//]]></script>
<style>
#blog-pager{width:100%;margin:0;padding:0;position:fixed;top:50%;font-size:0;left:0;text-align:left;line-height:0}
.blog-pager span{position:relative;display:inline-block;vertical-align:top;width:120px;height:120px;overflow:hidden;margin:0;padding:0;text-transform:none;box-sizing:border-box}
.blog-pager span:before{display:inline-block;vertical-align:middle;content:"";height:100%;width:0}
.blog-pager a{float:none!important;display:inline-block;vertical-align:middle;width:100%;height: auto;min-height:40px;color:#eee;text-align:center;padding:15px 15px 15px 30px;box-sizing:border-box;line-height:1.1em;font-size:14px;font-family:arial;background:rgba(0,0,0,.4);border-radius:0 10px 10px 0}
#blog-pager-older-link a{float:right;padding:10px 25px 10px 10px;border-radius:10px 0 0 10px}
.blog-pager a:hover{background:#000}
a.home-link{display:none;padding:0}
.blog-pager span:after{content:"\2039";position:absolute;left:0;font-family:Trebuchet,serif;font-size:70px;line-height:70px;top:50%;margin-top:-40px;color:#ccc;text-align:center}
.blog-pager span#blog-pager-older-link:after{content:"\203A";left:auto;right:0}
@media (max-width: 640px) {
#blog-pager{position:relative}
.blog-pager span{display:block;width:100%;height:auto;margin-top:10px}
.blog-pager a {border-radius: 10px !important;}
}
</style>
</b:if>

Nota importante:
Si ya tenemos en nuestra plantilla insertado el código de jquery, debemos eliminar la primera línea

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>