Ciudad Blogger

Inicio » Archivos de febrero 2013

Enlaces de navegación que aparecen al bajar la página y muestran el nombre de las entradas

Los enlaces de navegación son esos que aparecen al final de la página que dicen "Entradas antiguas", "Entradas recientes" y "Página principal" y nos sirven para desplazarnos por las entradas del blog. Lo que haremos con esta entrada son dos cosas:

Cambiar los textos "Entradas antiguas" y "Entradas recientes" por los títulos de las entradas.
Hacer que éstos datos aparezcan en un recuadro "desvaneciente" cuando se baje el scroll de la página.

Puedes verlo en funcionamiento en este blog de pruebas, al bajar el scroll aparecerán los enlaces de navegación mostrando los títulos de las entradas que anteceden y preceden al post.

Esta forma de mostrar los enlaces de navegación sólo se verá en las entradas individuales, ya que en la portada y demás partes del blog se seguirán mostrando como siempre.

La instalación es muy sencilla en realidad. Primero entra en Plantilla | Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:

<b:include name='nextprev'/>

Y cámbiala por esto:

<b:if cond='data:blog.pageType != "item"'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='blog-pager-note'>
<h4>También hemos publicado:</h4>
<b:include name='nextprev'/>
</div>
</b:if>

Ahora pega antes de </head> lo siguiente:

<b:if cond='data:blog.pageType == "item"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
// <![CDATA[
$(function() {
$('#blog-pager-note').toggle()
.css({
width: '520px',
height: '150px',
position: 'fixed',
padding: '1em',
bottom: 0,
right: 0,
background: 'url(http://lh5.googleusercontent.com/-clah_t6_oas/USvzA1V-FJI/AAAAAAAAEN0/CSyef3sNBp0/s10/negro85.png)'
});

$(window).scroll(function() {
if($(this).scrollTop() > 150) {
$('#blog-pager-note').fadeIn();
} else {
$('#blog-pager-note').fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html("<div>Entrada anterior:</div>" + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html("<div>Entrada siguiente:</div>" + olderLinkTitle);
});
});
// ]]>
</script>

<style type='text/css'>

</style>
</b:if>

Hay tres URLs en color azul, la primera es la imagen de fondo semitransparente del recuadro, las otras dos corresponden a los íconos de las flechas.

En color verde puedes ver dónde cambiar los colores de los textos.
El número en color rojo es la distancia en pixeles que activa el gadget, es decir, que como está ahora, el recuadro aparecerá cuando se haya bajado el scroll 150px. Puedes usar un valor más alto en caso de que tus entradas suelan ser largas y por lo tanto la "altura" del scroll sea mayor.

Cabe mencionar que este gadget usa jQuery, así que procura tener sólo una versión, y si usas Scriptaculous deberás aplicar un hack, de lo contrario podría no funcionar.

También puedes cambiar las palabras "Entrada anterior" y "Entrada siguiente" por alguna otra frase.