Éste es un pequeño script que nos permite navegar con el teclado, pulsando las flechas izquierda y derecha a través de las páginas del blog o de los posts en particular. Lo podéis poner tanto en el <head> como encima de </body>

El efecto funcionando lo podéis ver ahora mismo en este blog ;). El código debe de ir entre etiquetas <script> y </script>

<script>/*<![CDATA[*/(function(){
    if( document.querySelector )
        document.addEventListener ? document.addEventListener('keyup', onKeyUp, false): document.attachEvent('onkeyup', onKeyUp);

    function onKeyUp(e){
        var prevLink = document.querySelector('[rel="prev"]'),
            nextLink = document.querySelector('[rel="next"]');


        e = e || window.event;
        e.target = e.target || e.srcElement;
        e.keyCode = e.keyCode || e.which;


        if( e.target.tagName !== "BODY" )
                    return;
        
        if( e.keyCode === 37 || e.keyCode === 39 ){
            if(typeof e.preventDefault === 'function'){
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        
            if( e.keyCode === 37 && prevLink ){
                window.location = prevLink.href;    
            } else if ( e.keyCode === 39 && nextLink ) {
                window.location = nextLink.href;
            }
        }
    }
})()/*]]>*/</script>

Consideraciones a tener en cuenta

Si usáis mi sistema de paginación, ha sido actualizado para que funcione.

Si usáis el sistema de blogger, funcionará siempre que el <b:includable id='nextprev'> sea así (importante tener rel="next" y rel="prev", no sólo por esto sino por el SEO):

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' rel="next" expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a rel="prev" class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' rel="home" expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

6 pensamientos en “Navegar a través de los posts con el teclado

    • Imagen de Emilio Cobos Álvarez el dijo:

      Es posible hacerlo con una sola línea, cambiando:

      if( e.target.tagName !== "BODY" )

      por (en este caso uso 900px, pero puedes cambiar el valor…)

      if( e.target.tagName !== "BODY" || screen.width < 900)

      Para activarlo o desactivarlo sería posible hacerlo con un checkbox, y comprobar su valor cuando se realiza la función, pero no lo veo un inconveniente.

  1. Migrar de blogger a WordPress: La guía definitiva | Emilio Cobos-CMC
  2. Imagen de Pedro PC el dijo:

    Gracias funciona perfectamente.
    Una consulta, en mi plantilla podría eliminar el: includable de la paginación de Blooger? ya que mi plantilla tiene la paginación personalizada, vamos que no es una plantilla de Blooger.
    No se si al eliminarlo podría incurrir algo por el tema de SEO o cualquier otro inconveniente. Ya me entiendes, quiero decir que si es un código innecesario en mi caso, si lo puedo quitar.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.