Blogger. Cambiar enlaces a entradas recientes/antiguas por sus títulos

Esto es algo que vi en Ciudad Blogger pero que formaba parte de un código algo más largo y que servía para hacer aparecer en un recuadro con un efecto cuando se hace scroll, los enlaces de navegación que casi todos tenemos en la parte inferior del blog.

Pero lo que me resultó más curioso de su lectura fue la parte que sustituía los típicos Entrada antigua / Entrada más reciente por los títulos de las correspondientes entradas. Y eso es lo que vamos a ver a continuación.

Lo podéis ver abajo del todo en esta página de pruebas. He enlazado un post y no la página principal porque salvo que tengáis una configuración de Mostrar un máximo de entradas en la página principal, el truquillo no funcionará bien del todo en otro tipo de páginas y por ese mismo motivo, de manera genérica lo mejor será condicionarlo para que sólo se ejecute en las entradas individuales (tipo item).

Se trata de un pequeño código que requiere de jQuery así que lo primero de todo será comprobar si se tiene esa librería en la plantilla y si no pues incluirla. Esto se hace añadiendo esta línea justo después de }]]></b:skin>.

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

A continuación de ella o incluso en cualquier lugar posterior antes de </head>, es dónde tendremos que insertar el JavaScript que se encarga del trabajo:

<!-- Títulos posts en enlaces navegación -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// <![CDATA[
$(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( 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(olderLinkTitle);
});
});
// ]]>
</script>
</b:if>

Y nada más... Con eso ya aparecerán los títulos de las entradas anterior y posterior en lugar de los rótulos habituales.

Como decía esto sólo será efectivo en las páginas de posts individuales, así que el Vista Previa no os servirá de nada para comprobar. Hay que grabar (prueba de fe) y luego acceder a una entrada para poder ver el resultado.

---

Si usáis títulos muy largos, los tres enlaces (reciente-home-antiguo) podrían no caber en una sola línea, así que como ajuste adicional se podría esconcer el enlace a la Página principal con un display: none; al enlace correspondiente para hacer más hueco.

Y ya que estamos por aquí pues también podemos añadir unos símbolos que nos ayuden a resaltar más los enlaces. Este sería el CSS para esos pequeños cambios con un resultado que es exactamente el que se muestra en la página demo que enlacé al principio.

#blog-pager {
text-align: center;
font-size: 20px;
font-weight: bold;
}

a.home-link {display:none;}

a.blog-pager-newer-link:before {
content:"\25C4";
}
a.blog-pager-older-link:after {
content:"\25BA";
}

¿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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter