Thứ Hai, 29 tháng 9, 2014

ĐIỀU HƯỚNG BÀI VIẾT BẰNG BÀN PHÍM CHO BLOGGER

Tại bất kì một Blogger template nào bạn có thể thấy ở phía dưới cùng của mỗi trang bài viết thường có ba nút mắc định, Bài đăng mới hơn, Bài đăng cũ hơn, và Trang chủ. Ở ngay bài viết trước đây, mình có hướng dẫn các bạn thay thế bộ ba nút này bằng hình ảnh

Hôm nay mình sẽ tiếp tục hướng dẫn các bạn thêm thủ thuật nhỏ giúp khách truy cập dễ dàng chuyển trang mà không cần đụng chạm đến các nút đó.

Điều hướng bài viết bằng bàn phím cho Blogger

Như mình để ý thì khá nhiều người khi truy cập website, họ thường sử dụng các phím mũi tên lên - xuống để cuộn trang, chính vì lẽ đó mình thiết nghĩ việc điều hướng trang bằng bàn phím (phím trái - phải) sẽ giúp họ linh động hơn nếu có nhu cầu xem các bài viết mới hoặc cũ hơn tại blog của chúng ta.

Điều hướng bài viết bằng bàn phím cho Blogger
Đăng nhập vào Blogger » Mẫu » Chỉnh sửa HTML

Bây giờ các bạn tìm đến thẻ </body> và dán đoạn mã sau lên trên

<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == &#39;TEXTAREA&#39; || document.activeElement.nodeName == &#39;INPUT&#39;) return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById(&#39;Blog1_blog-pager-newer-link&#39;);
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById(&#39;Blog1_blog-pager-older-link&#39;);
if(olderLink!=null) window.location.href = olderLink.href;
}
};
};
</script>

Cuối cùng đơn giản chỉ việc lưu lại template của bạn.

Lời kết
Đây là một đoạn mã rất đơ giản và hữu ích khi thêm vào blog của bạn sẽ giúp khách truy cập linh động trong việc di chuyển giữa các bài viết, từ đây nhiều khi bạn gia tăng được thêm pageviews trên blog của bạn, và một lưu ý nhỏ là bạn nên cung cấp thông tin cho khách truy cập rằng họ có thể sử dụng bàn phím để điều hướng trên blog của chúng ta bằng các loại pop-up hay bất cứ cách nào đó bạn có thể nghĩ ra.

0 nhận xét:

Đăng nhận xét