Blogger. Títulos de entradas en lugar de Reciente/Antigua | Oloblogger Supongo que en algunos sitios habréis visto enlaces de navegación por entradas (los del tipo Entrada...

11 de junio de 2015

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

Sustitución de rótulos por títulos


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

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

follow us in feedly

26 comentarios :

  1. No sé si el comportamiento será el usual, pero yo, que uso en uno de mis blogs una plantilla XML de un tercero, ya tengo implementados los enlaces a las páginas anteriores y siguientes, y por tanto al añadir el código del inicio no encuentro ningún comportamiento nuevo. Todo esto viene por querer cambiar el aspecto que tienen y no ser capaz por mucho que me lo propongo. Pensé que con este añadido me sería posible, pero sigo en las mismas. :(

    ResponderEliminar
    Respuestas
    1. Vuelvo a escribir porque no me he explicado nada bien...
      En verdad al añadir la primera parte no tengo una nueva funcionalidad, porque esta ya la tenía, pero al añadir el CSS dedicado a los estilos sí que encuentro diferencias. Lo que pasa que quiero añadir una, prácticamente trivial, y esa sí que no soy capaz de añadirla.

      Eliminar
    2. Casi seguro que te faltó al menos una palabra más RGV: "Lo que pasa que quiero añadir una..." ¿Una qué?

      Prueba con la palabra "antiguas" en mi buscador a ver si en alguno de los resultados que te saldrán encuentras eso que quieres hacer.

      Eliminar
  2. Me funciono de maravilla, gracias, pero en vista para celulares hay un espacio inmenso entre el ultimo post y el footer.

    ¿Cómo lo soluciono?

    Mi blog es: SolaScripturaJc.blogspot.com

    ResponderEliminar
    Respuestas
    1. Con las plantillas móviles no me aclaro mucho, pero prueba a repetir el mismo css debajo del que indiqué, pero añadiendo a todos los selectores un #mobile-link-button. Por ejemplo, que #blog-pager-newer-link pase a ser en ese añadido repetido #mobile-link-button #blog-pager-newer-link

      Eliminar
    2. OK, gracias por tu respuesta lo aplicaré cuando tenga tiempo. (y)

      Eliminar
    3. Ya hice lo que me dijiste, pero no se solucionó, de todas maneras gracias.

      Eliminar
    4. Pues lo siento Emanuel. Ya te dije que no controlo la parte para móviles de las nuevas plantillas.

      Eliminar
  3. Bueno ..ademas de agradecerte tantos trucos y tretas que estan aca y que han sido de gran ayuda para mi,, tengo una problema que no he podido solucionar a ver si con tu sapiensa me haces el favor y me das una manito !!
    quite el “Publicar un comentario en la entrada” y puse "Gracias por tu comentario".... pero luego pasa que despues que hacen algun comentario en algun post.. esta opcion desaparace...no se a que se debe o este haciendo algo mal.. de antemano...muchas gracias por tu respuesta sea cual sea... DTB... un Abrazo !!!

    ResponderEliminar
    Respuestas
    1. Joral Gom, a ver si lo que explico en este otro post es lo que necesitas.

      Eliminar
  4. No me funciona agrego el código justo después del cual mencionas pero parece que ya no anda.

    ResponderEliminar
    Respuestas
    1. Robinson ¿quieres probar con estos otros?

      Eliminar
    2. Ya los probé, funciona pero no son el estilo que estoy buscando.

      De todas maneras muchas gracias.

      Eliminar
    3. El estilo lo puedes cambiar. Sólo has de modificar la parte CSS

      Eliminar
  5. Probe varios y no me andan..

    http://nasuverse.blogspot.com.ar/2016/08/manga.html

    ¿Tendre algo que da incompatibilidad?

    ResponderEliminar
    Respuestas
    1. Ahora mismo no tienes este código en tu plantilla, así que no te podría decir exactamente. De todas formas tienes muchos códigos jQuery en ella y además creo que estás cargando varias versiones de esa librería por distintas partes. Intenta dejar sólo la versión más reciente.

      Eliminar
  6. la plantilla la saque de un lugar templates. Cual jquery me recomendas para que no se deforme mi html?
    asi evito sacar todas las demas

    ResponderEliminar
    Respuestas
    1. Sinceramente, yo cambiaría de plantilla. Esa abusa mucho del JavaScript. Hay muchas parecidas a la que tienes, sin necesidad de tanto código.

      De todas formas, tienes la versión 1.12.4 y también la llamada "migrate". Yo quitaría esta última... salvo que te generara mayores inconvenientes que ventajas. Es cuestión de probar.

      Eliminar
  7. El tema es que no se que plantilla ponerle ¿Me recomendas algo?
    o empiece a hacer una plantila desde cero.. es que quiero que se vea bien desde el ámbito visual y similar a la que yo tengo.

    ResponderEliminar
    Respuestas
    1. Hay miles de plantillas Nassu y no me suelo apuntar las que veo que me gustan porque prefiero hacerlas.

      Si tienes conocimientos suficientes, yo la haría desde cero y si no, buscando, buscando, seguro que encuentras alguna parecida a la tuya actual, pero sin tanto JS.

      Eliminar
  8. Hola, estoy probando esta opcion,, pero no me quedan en linea, sino los boxs uno abajo del otro,ni tampoco al medio su texto.. por favor sabrias decirme como puedo arregarlo ? y te pregunto tambien ya que esta relacionado, como ponerlo por encima de los comments y no por debajo.. muchisimas graciasss !!!!

    ResponderEliminar
    Respuestas
    1. Para ver eso con el detalle que me preguntas, necesitaría ver tu blog y no sale su dirección en tu perfil.

      Eliminar