Điều hướng Blogger bằng phím tắt

by Phan Nhật Chánh

HTML

<div id="blog-pager" class="blog-pager">
    <span id="blog-pager-older-link">
        <a class="blog-pager-older-link" href="#">Bài cũ hơn &raquo;</a>
    </span>
    <span id="blog-pager-newer-link">
        <a class="blog-pager-newer-link" href="#">&laquo; Bài mới hơn</a>
    </span>
</div>
<h1>Bấm phím &larr; hoặc &rarr; trên bàn phím để thấy kết quả</h1>

CSS

#blog-pager {
  position:fixed !important;
  position:absolute;
  top:50%;
  right:0;
  left:0;
  z-index:9999;
  width:100%;
  height:0;
}
#blog-pager-older-link a,
#blog-pager-newer-link a {
  display:block;

  font:normal normal 40px/45px Arial,Sans-Serif;
  text-align:center;
  margin-top:-25px;
  background-color:#5B9DA7;
  color:white;
  text-decoration:none;
}
#blog-pager-older-link a {float:right}
#blog-pager-newer-link a {float:left}

/* Effect */
#blog-pager-older-link.active a,
#blog-pager-newer-link.active a,
#blog-pager-older-link a:active,
#blog-pager-newer-link a:active {
  margin-top:-20px;
  background-color:#9D1C34;
}

JavaScript

(function(win, doc) {
 
    var pager;

    // left = 37, right = 39
    doc.onkeydown = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className += ' active';
            win.location.href = pager.children[0].href;
            return false;
        }
    };

    doc.onkeyup = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className.replace(/ active/g, "");
        }
    };

})(window, document);