Blogger. Cambiar enlaces a entradas recientes/antiguas por sus títulos | Oloblogger 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...

31 de marzo de 2013

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

Cambiar entradas recientes-antiguas por su título


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

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

follow us in feedly

65 comentarios :

  1. El truco funcionó perfecto, ¡muchas gracias! ^_^

    ResponderEliminar
  2. Donde iriai display: none; para ocultar el enlace de pagina principal???

    ResponderEliminar
    Respuestas
    1. Aquí: a.home-link {display:none;}
      ...añadiendo esa línea a tu CSS (entre las etiquetas SKIN).

      Eliminar
    2. DSisculpa Oloman, hay una manera de poner aquellos enlaces uno debajo del otro, me explico, el nombre de la entrada anterior y abajo de este el nombre de laentrada posterior, espero me puedas ayudar ...

      Eliminar
    3. #blog-pager-newer-link, #blog-pager-older-link {float:none; display:block;}

      Eso o bien lo pones al final de tu CSS para que sobreescriba los valores por defecto o bien cambias eso en los selectores con el mismo nombre que encontrarás en tu plantilla y que llevan un float:right y float:left.

      Eliminar
  3. Anónimo1/4/13, 0:20

    hola oloman la verdad tus implementaciones web son muy utiles y las he usado algunas en este blog que hice www.vaubuntu.blogspot.mx y la verdad estoy satisfecho con el resultado :D

    ResponderEliminar
    Respuestas
    1. Algunas cosillas reconozco. Muy elegante ;)

      Eliminar
  4. Hola, he copiado y pegado el código donde dices, y no me funciona, el jquery que tengo es el
    src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> el css no he llegado a ponerlo.
    Un saludo.

    ResponderEliminar
  5. Por cierto mi blog es http://doshermanasayeryhoy.blogspot.com.es/
    por si te sirve para saber la plantilla que uso. Gracias

    ResponderEliminar
    Respuestas
    1. El CSS no es necesario, pero el JavaScript tras la llamada a jQuery es imprescindible. Ahora mismo no lo tienes y si no funciona no pasa nada si lo dejas, al menos temporalmente para que lo vea.

      De todas formas he visto que tienes instalada también la libreria mootools.js y esa al igual que scriptaculous, da muchas veces problemas de incompatibilidad con jQuery.

      Prueba a quitar la de mootools cuando pruebes este truco. Luego la restituyes si la necesitas, aunque creo que no tienes nada para lo que te haga falta. Quizás es de algo anterior que tuviste.

      Eliminar
  6. Gracias, acabo de insertar el código y he quitado Mootools, pero algo falla si ves el qué me lo dices. Gracias de nuevo.

    ResponderEliminar
    Respuestas
    1. Pues ahora sí que no veo nada raro. Sólo se me ocurre que pruebes una tontería por si acaso, pero no debería ser eso. Prueba a cambiar las comillas dobles del script por comillas simples.

      Eliminar
  7. Anónimo4/4/13, 8:45

    Muy buen truco. Oye felicidades por tu blog está realmente instructivo.

    ResponderEliminar
  8. Hola oloman necessito ayuda, soy nuevo en esto, sere breve.

    En mi blog kiero que en cada pagina que he hecho pueda aver opcion y acceder a ellas, te lo digo por ejemplo.

    1 Deportes
    1.1 Bici
    1.2Natación
    1.3 Correr
    1.4 patinaje

    Y ke cuando aprete haga como cuando voy a una pagina u otra del blog.

    ResponderEliminar
    Respuestas
    1. Esas opciones las tienes que gestionar con etiquetas.

      Has de etiquetar (es como clasificar) los posts con esos nombres y una vez hecho puedes añadir un gadget tipo Etiquetas que lo que te muestra es una menú como ese que se genera automáticamente.

      Eliminar
  9. Esto lo probaré en cuanto pueda, que es una de las cosillas que tengo pendientes desde hace tiempo. Muchas gracias por iluminarnos una vez más ;)

    ResponderEliminar
    Respuestas
    1. Pues me he puesto al tema en un blog secundario y me he encontrado un "problemilla" recurrente: uso scriptaculous. Para que esto funcione, debo anular la carga de scriptaculous.

      Estoy por cambiar los efectos de scroll y similares que tengo en scriptaculous, y pasarme a jquery definitivamente. Lo malo es que luego aparecerá algo interesante en scriptaculous y querré volver... ¡Esto es un sin vivir!

      Eliminar
    2. No creas. jQuery es muy completo y pienso que durará bastante. Yo hace mucho tiempo que di el paso.

      Eliminar
    3. Tras meses después... ya estoy en el mundo jQuery! No fue muy complicado y me permitió hacer varias cosillas a las que tenía ganas. Recomiendo el cambio :)

      Eliminar
  10. Por alguna razon no funciono en mi plantilla, creo que tengo un desorden, para empezar esta plantilla contiene algo similar para las paginas llamado prev y next antes de el sistema de comentarios disqus. Se agradece su ayuda y una vista en wii4everybody.com Saludos!

    Oziel

    ResponderEliminar
    Respuestas
    1. En un principio lo veo todo normal, por lo que en primera instancia te diría que repitieras el proceso por si erraste en algo sin querer.

      Si sigue sin funcionar tiene que ser cosa de eso que dices que lleva Disqus, pero no he usado nunca ese sistema y no tengo ni idea de cómo funciona, además que desde esta parte se ve ya interpretado.

      Eliminar
    2. Vaya, yo también uso disqus en el blog... ¿será un problema de incompatibilidad o algo así? Tengo un blog con sistema de comentarios de Facebook en el que el truco funcionó perfecto, pero a la hora de ponerlo en el blog con disqus, no hubo cambio alguno...

      Eliminar
    3. Disqus sustituye los comentarios originales de Blogger por los suyos y puede (no lo sé seguro), que efectivamente haga que no funcione bien este truco.

      Eliminar
  11. Realmente útil. Mil gracias por todo, Oloman. Me estás salvando el blog ;)

    (http://labibliotecadecristal.blogspot.com.es/)

    ResponderEliminar
  12. la verdad no sé que pasa con Blogger, esto desde el navegador se ve el texto de los artículos e incluso con firebug se ve el texto, pero al mirar el código fuente no cambia nada, sigue igual.

    saludos

    ResponderEliminar
    Respuestas
    1. Es lo normal porque este es un JavaScript que cambia "al vuelo" los enlaces de navegación. Blogger hace una cosa, lo que tiene programado, y luego el script, al cargar la página, lo sustituye.

      Eliminar
  13. por cierto es posible insertar estos enlaces dentro del artículo? saludos

    ResponderEliminar
    Respuestas
    1. Dentro exactamente no, pero lo puedes poner en la cabecera del post (post-header) o en el footer (post-footer).

      Para ello tendrías que incluir (desde la plantilla, edición HTML) en el lugar deseado una línea como está:
      <b:include name='nextprev'/>

      Eliminar
  14. ya logré hacerlo, muchas gracias amigo

    ResponderEliminar
  15. Hola de nuevo, ha pasado tiempo desde la ultima vez. Pues bien como no funcionaba lo dejé por imposible. Pero hoy me ha dado por copiar el código y pegar onde dice ¡¡Y FUNCIONA!! . Una pregunta en el css le he aumentado el tamaño de fuente pero no me las agranda, podrías orientarme?. Gracias. Un saludo

    ResponderEliminar
  16. #blog-pager {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    }

    No hay otra manera y probé en tu sitio y funcionó.

    ResponderEliminar
  17. Hola, como puedo asociar en el Menu Background un texto?Por ejemplo que en "How to use?" cuando le de se vaya a una entrada que explique como se usa. Es decir, asociar una entrada a las opciones que salen en el menu backgroud de Home, Samples Pages, How to use...
    Muchíisimas gracias por adelantado soy muy torpe y nueva, el ansia me puede :-)

    ResponderEliminar
  18. Esto esta muy bueno. Mi consulta es la siguiente:

    Hay manera de que estos enlaces vayan a determinada pagina que se le indique en cada post? Ya que quiero que se pueda navegar a un post diferente al anterior o al siguiente.

    Quizas no me expreso bien por eso pongo un ejemplo:

    Estoy haciendo un Diario de Viaje, donde cada post es Dia x Dia mi viaje. Pero hay entradas en el medio donde explico algunas cosas de determinadas ciudades. Cuando se navega yo quiero que vaya al proximo dia, no al proximo post.

    Graficamente:

    Post1: Dia 1
    Post2: Dia 2
    Post3: Mas de Chicago
    Post4: Dia 3

    Al hacer click en el siguiente del Post2 quisiera que vaya al Post4, y en aterior del Post4 que vaya al Post2.

    Espero que se entienda, sino perdon..jeje

    ResponderEliminar
    Respuestas
    1. Eso sólo se puede hacer manualmente, lo que supone un trabajo adicional para cada post que publiques. Lo único que se me ocurre a bote pronto es que pongas un .blog-pager {display:none;} para ocultar el gadget y luego que al final de cada post, incluyas a mano los enlaces:
      <a href="LOQUESEA">DIA 1<</a> | <a href="LOQUESEA">DIA 3<</a>

      Eliminar
  19. Este código está muy bien ya lo había usado ... lo que no consigo es cambiar la posición de estos enlaces y que aparezcan antes de los comentarios.

    info@muacarmen.com

    ResponderEliminar
    Respuestas
    1. Una línea <b:include name='nextprev'/> te genera los enlaces de navegación dónde quieras. Sólo has de insertarla debajo de las entradas y antes de los comentarios.

      Eliminar
    2. Oloman, yo igual que Mua Carmen quiero que la posición de los enlaces me aparezca antes de los comentarios, a ser posible al lado del tiúlo del post, sino justo antes de los comentarios. Exactamente donde tengo que poner la línea:que señalas , puedes ser más específico y decirme que linea html tengo que buscar?

      Eliminar
    3. Las plantillas tienen cada una códigos distintos, pero en una plantilla "normal" tendría que ser justo antes de
      <div class="comments" id="comments">

      Eliminar
  20. Oloman, funciona, lo que pasa es que si bien la entrada más reciente se ve bien, la entrada antigua se cuadriplica, es decir repite su nombre cuatro veces.

    ¿Cómo puedo subsanr el error?

    Te dejo una captura de pantalla de mi blog para que lo veas:

    http://img59.imageshack.us/img59/6875/c6qi.png

    ResponderEliminar
    Respuestas
    1. No debería pasar nada de eso si todo el código está como se explica aquí. Por favor repásalo.

      Eliminar
  21. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Sí Anabel, eso es un problema común. Blogger no controla bien cuando NO hay más entradas.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Con eso quiero decir que si lo hay, yo no lo conozco.

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
  22. Hacer esto mismo, pero al estilo Alt1040.

    ResponderEliminar
  23. Hacerlo, sí... ?!!! (no tiene nada parecido que yo vea)

    ResponderEliminar
  24. Anónimo1/7/16, 4:53

    Me quedo muy bueno. Gracias!

    Colocar le estilo no me funciono, lo que hice fue buscar el estilo predeterminado y agregue lo que habías mencionado: font-size: 20px;font-weight: bold;

    Para eliminar pagina principal tuve que buscar el código y eliminarlo. Todo lo demás queda excelente.

    Un abrazo.

    ResponderEliminar
  25. Muy bien. Casi siempre hay diversas formas de hacer lo mismo.

    ResponderEliminar
  26. Muchas gracias Oloman por tus aportaciones. He implementado este código en mi blog y me sale una línea de puntos que cruza la pantalla muy molesta. ¿Cómo puedo quitarla?

    ResponderEliminar
  27. Oloman, he visto que respondiste a esto en otro comentario de otra entrada similar a esta. Le dijiste a una persona que quitara algo de su plantilla y se quitaban los puntos, pero yo no tengo eso en mi plantilla y no sé qué hacer. Gracias por tu atención. atmcampus.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Acabo de ver que usaste para otro código que publiqué posterior a este y que te va bien, así que problema solucionado... supongo.

      Eliminar
    2. Sí, gracias Oloman, eres un crack. Si puedo hacer algo por ti házmelo saber.

      Eliminar
    3. ¿Tienes mucho dinero? XD

      Eliminar
  28. Wooo por fin encontré lo que hace tiempo buscaba pero antes de probarlo me gustaría saber si me funcionara ya que yo utilizo una plantilla personalizada no es una de blogger y en la plantilla no trae no aparecen los enlaces en cada post de entradas antiguas y recientes esa es mi primera pregunta y la segunda es que busco que este truco me funcione por etiquetas es decir por ej: mi primer post capitulo 01 y el código reconozca ese titulo por el mi primer post capitulo 02, y así sucesivamente o llamarlo en cada entrada por ej: con un script poniendo la etiqueta para que en cada entrada muestre solo las entradas de esa etiqueta no todas las entradas en general bueno saludos espero una idea gracias...

    ResponderEliminar
    Respuestas
    1. El movimiento se demuestra andando. Pruébalo y verás si te funciona. Si no sólo tienes que quitar lo que añadiste.
      Para lo de las etiquetas no te va a funcionar porque ese código no está preparado para ello.

      Por si te sirviera, aquí tienes una entrada más moderna sobre el mismo asunto.

      Eliminar
  29. y si no los quiero abajo? q hago si los quiero a los costados de las publicaciones?

    ResponderEliminar
    Respuestas
    1. Tendrías que usar CSS. Si quieres dejame un mensaje te ayudo, ya que parece que el Oloman está en un vieja astral

      Eliminar
  30. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  31. No me funciona , no sé por qué

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar