Enlaces flotantes de las entradas

Vamos a ver hoy un formato diferente que hemos encontrado en la página de http://www.oloblogger.com.

Es un método diferente para sustituir mediante JQuery las leyendas de las entradas más antiguas y las más recientes.

Ya publicamos un post antiguamente, de cambiar las entradas antiguas, entradas recientes e inicio de página por imágenes.

Lo puedes ver en este link.

Como siempre Oloblogger nos facilita mucho la tarea,y nos aconseja que si no estamos usando JQuery, es que implantemos el siguiente código justo después de }]]></b:skin>.

Pero si ya lo estamos usando, tenemos que elíminar la primera línea marcada en morado.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "item"'>
<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>