Qua lại bài viết sử dụng phím mũi tên cho blogspot

Vừa rồi có bạn đã hỏi mình làm cách nào để chuyển qua lại giữa các bài viết bằng phím mũi tên trên bàn phím, ngày hôm nay mình đã vô tình đọc được bài một bài viết hướng dẫn thêm tiện ích này cho blogspot và mình lập tức muốn chia sẻ đến các độc giả của TrollVL.Com.





Giới thiệu

Tiện ích cho phép bạn chuyển qua lại bài viết trên blog bằng cách sử dụng phím mũi tên bàn phím sẽ rất tiện ích cho độc giả của bạn muốn chuyển tới bài kế tiếp hoặc trước đó mà không cần phải tìm các liên kết trang mới hơn hoặc cũ hơn. Có lẽ bạn đã gặp tính năng này trên nhiều website, điểm hình là haivl.com.
Phím mũi tên sẽ bị vô hiệu khi bạn đang gõ văn bản trên blog như khi đang viết nhận xét vì vậy bạn không phải lo lắng sẽ bị chuyển trang khi đang soạn thảo.
Đây là một tiện ích đơn giản, trọng lượng nhẹ và nó thực sự dễ dàng để cài đặt vào blog.

Demo

Cài đặt

Cách 1: Rất đơn giản, bạn chỉ việc click vào button bên dưới để thêm tiện ích thú vị này vào blog của mình. Bạn có thể xóa tiêu đề widget Arrow Key đi nếu muốn




Cách 2: Vào Blogger -> Bố cục(Layout) thêm tiện ích HTML/Javascript mới sau đó sử dụng đoạn code bên dưới
<script type='text/javascript'>
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
</script>

Làm cách nào để cho độc giả bạn biết về tiện ích này

Bạn có thể thêm một số thông báo cho độc giả của bạn biết rằng blog bạn được sử dụng các phím mũi tên trên bàn phím để qua lại bài viết.

Chúc bạn thành công!
11 Comments
Comments

11 comments

hehe. cảm ơn nhé, yêu cầu đã đc thự hiện, thích troll qá :))
This comment has been removed by the author.
hjhj template mình ko dùng đc :(
12/11/13
Mình thực hiện vẫn ok mà :meu
Bạn thử xem demo tại http://viet.trollvl.com/2013/11/ai-gia-hon.html
13/11/13
hihi, tùy template thôi, template mình có 1 team ko dùng đc ^^"
TKS bạn nhiều, tìm quài ko đc, may mà có bạn tìm đc :D
15/11/13
Thủ thuật đơn giản nhưng rất tuyệt ! Cảm ơn Huy nhiều nhé ! Thanks ! g:ah
16/11/13
a viết bài hướng dẫn tạo scrollbar cho cả trang blog đi :)
16/11/13
Ý bạn là tùy biến thanh cuộn scrollbar?
16/11/13
đúng rồi a. tùy biến như blog này đó.
16/11/13
Cái này mình nghĩ nhiều bạn biết nên không cần thiết phải viết bài mới nữa. Nếu muốn bạn sử dụng đoạn css sau để tạo style cho nó
::-webkit-scrollbar {
height: 12px;
width: 7px;
background: #333;
border: 1px solid #fff;
}
::-webkit-scrollbar-thumb {
min-height: 28px;
padding-top: 100px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
background-clip: padding-box;
background-color: #b5b5b5;
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1),inset 0 -1px 0 rgba(0,0,0,0.07);
}

Thay đổi màu sắc và kích thước cho phù hợp với blog/website của bạn nhé!
16/11/13
tks a. e không nghĩ nó chỉ dùng css không thôi :)

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->