Blogger. Títulos de entradas en lugar de Reciente/Antigua

Supongo que en algunos sitios habréis visto enlaces de navegación por entradas (los del tipo Entrada más reciente - Entrada antigua), que en lugar de las leyendas normales incluían otras cosas como iconos, flechitas y similares.

Eso es algo muy fácil de hacer en Blogger, pero ya no lo es tanto conseguir sustituir esos rótulos por los propios títulos de las entradas correspondientes, exactamente las publicadas justo antes y justo después de la que se está leyendo.

Bueno dije que no era tan fácil, pero con jQuery se simplifica mucho la cosa. Sólo se trata de acudir a las entradas enlazadas, observar sus títulos y mostrarlos en lugar de los rótulos originales. Esa es la idea y dicha así puede parecer laboriosa o casi imposible pero para cosas como esas existe JavaScript.

Una vez que hagamos lo que después detallaré y con algo de CSS, los enlaces originales quedarán sustituidos por algo más o menos así:

Lo primero que tenemos que hacer -y lo único si nos parece bien para los nuevos enlaces el estilo de los anteriores- será añadir este código justo después de ]]></b:skin>

<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>
</b:if>

Como siempre que usamos jQuery, si ya tienes esa librería cargada para cualquiera otra cosa, la primera línea la puedes eliminar para no duplicar dicha carga.

---

Para los curiosos explicaré todo esto.

En primer lugar, este código va dentro de una condición para que sólo se ejecute cuando estamos en una página tipo entrada, pues no tiene sentido en otro tipo de páginas como portada, páginas estáticas y navegación por etiquetas, por ejemplo.

Lo que hace el resto es una idea tan buena como simple: usamos el enlace de cada página de destino para acudir a ellas, una vez allí leemos el título de la entrada y por último sustituimos los rótulos originales por dichos títulos.

Explicado con más detalle, el flujo del programa sería como sigue:

• La función se ejecuta con .ready para poder trajinar sin problemas con los elementos una vez cargados totalmente y así evitar errores si estos están todavía a medio dibujar
• Luego creamos la variable masreciente que llenamos con la dirección del enlace de la entrada siguiente a la que se está viendo y que se extrae directamente del enlace original.
• A continuación usamos .load con la dirección de la entrada siguiente, pero esta vez para ir a ella virtualmente y leer allí el contenido del primer título de entrada que encontramos. En el código esto se expresa como .post-title:first. Normalmente sólo habrá uno, pero por si acaso.
• Ahora guardamos sólo el texto de ese título eliminando el código que pudiera incluir en otra variable llamada titulomasreciente.
• Por último tomamos el texto que forma el enlace "Entrada más reciente" y lo sustituimos por ese título que justo antes habíamos guardado.

La segunda mitad es exactamente lo mismo pero con el enlace "Más antigua".

Lo dicho, una idea feliz que con poco consigue algo muy efectivo. Me gustaría hacer referencia a aquella persona que se le ocurrió originalmente, pero esto lleva ya varios años danzando por la Red y aparece en tantos sitios que no sabría decir quién fue.


Con sólo esto anterior ya todo funcionará bien, pero al ser los títulos de un longitud variable y por lo general más largos que los enlaces-tipo originales, me pareció oportuno liquidar el que llevaba a Home (para eso ya tenemos la cabecera y posiblemente algún otro enlace en algún menú) y repartir los dos que quedan en el ancho del blog. Además, ya que estamos, que el conjunto sea también adaptable (RWD) y con algún pequeño efecto para el :hover.

Para ello sólo hay que añadir este CSS en la plantilla, preferentemente al final del que ya tuviéramos para otros menesteres.

#blog-pager {
  width: 100%;
  margin: 10px auto;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.home-link {
  display: none;
}
#blog-pager-newer-link, #blog-pager-older-link {
  float: none;
  display: inline-block;
  width: 49%;
  height: 80px;
  margin: 0 .5%;
  padding: 10px;
  background: #eee;
  color: #000;
  text-transform: uppercase;
  box-sizing: border-box;
}
.blog-pager-newer-link, .blog-pager-older-link {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 18px;
  font-weight: bold;
  vertical-align: middle;
}
[id^="blog-pager-"]:before {
  content:"";
  display:inline-block;
  width:0;
  height: 100%;
  vertical-align:middle;
}
#blog-pager-newer-link:hover, #blog-pager-newer-link:hover a, #blog-pager-older-link:hover, #blog-pager-older-link:hover a {
  background: #000;
  color: #fff;
  text-decoration: none;
}
#blog-pager-newer-link a:hover, #blog-pager-older-link a:hover {
  font-style: italic;
}
@media (max-width: 640px) {
  #blog-pager-newer-link, #blog-pager-older-link {width: 100%; margin: 2px 0;}
}

¿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