Enlaces flotantes de navegación con los títulos de las entradas

Este es un sistema para dar un formato distinto al habitual a los enlaces de navegación de Blogger, esos que nos permiten pasar al post siguiente o anteriormente publicado al que estamos viendo.

Está basado en algo que ya vimos anteriormente y que consiste en sustituir mediante jQuery las leyendas "Entrada antigua" y "Entrada más reciente", por el título de la correspondiente entrada y la novedad esta vez es que le hemos añadido el CSS necesario para que cada uno de esos enlaces aparezcan flotando en los extremos izquierdo y derecho de la página.

Parece que actualmente es tendencia, sobre todo en periódicos digitales, lo de poner así este tipo de enlaces. Este sería aproximadamente el resultado:

Siempre con el ánimo de simplificaros el trabajo y pensando en los más torpes, he montado todo el código de manera que sólo haya que copiarlo e insertarlo en un único paso. El lugar dónde pegarlo será en la plantilla, accediendo a Edición HTML e insertándolo entre }]]></b:skin> y </head>.

Si actualmente no estáis usando jQuery, lo mejor es que sea justo después de }]]></b:skin>. Sin embargo, si ya tenéis jQuery, la primera línea que es la carga la librería tendréis que eliminarla y el resto del código añadirlo tras la línea equivalente que vosotros tengáis para cargar jQuery.

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

Todo el código está dentro de una condición para que sólo se ejecute en las páginas correspondientes a entradas (item), ya que en portada o páginas de etiquetas, al mostrarse más de un post, no es lógico calcular cuál es el siguiente o el anterior.

La explicación de qué es lo que hace la parte JavaScript la podéis ver en el post que mencioné al principio de esta entrada y con respecto a los colores y formas, como siempre, sólo hay que cambiarlos en la parte de estilo para dejarlos como a cada cual le cuadre.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Google+

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Google+

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter