Tab Menu

Thủ thuật phân trang cho bài viết dài trên blog

Thủ thuật phân trang cho bài viết dài, Paging in a long post Paging in a long post
Nếu có một bài viết quá dài, blog hoặc website của bạn sẽ phá vỡ layout tổng thể gây khó nhìn, đối với người xem thì việc kéo thanh cuộn bé xíu lên xuống cũng không lấy gì làm dễ chịu. Vậy tại sao bạn không chia nhỏ nó ra bằng cách phân trang trên chính bài viết của mình. Article này sẽ chia sẻ các bạn làm điều đó thật hữu hiệu.

#bl3 Thật ra, thì đây chỉ là một thủ thuật nhỏ nếu bạn có một chút kiến thức HTML và Javascript, cách này không giúp giảm thiểu được time tải trang mà chỉ có tác dụng với cái nhìn từ bên ngoài. Xem demo Thủ thuật phân trang cho bài viết dài #bllink
#bl2 Bắt đầu, bạn cần có bộ thư viện jQuery nhúng trong phần <head> của site, tiếp đến là đoạn code xử lý phân trang s đã viết sẵn.
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript">
</script>
<script src="http://salipropham-blogspot-com.googlecode.com/files/PagingInPost-min.js" type="text/javascript"></script>
#bl2 Cũng trong phần <head> bạn nhúng đoạn css để design cho phần phân trang này.

#bl2 Bây giờ chũng ta chỉ còn kích hoạt đoạn code bằng cách đặt đoạn js sau trong bài viết nơi bạn muốn hiển thị dòng phân trang.
<script type="text/javascript"> 
 NumberedPage(
  numPage = 3, // Số trang cần phân
  title =  "Trang", // Chữ cần hiển thị như Phần 1 hoặc Trang 1
  separator = "|" // Kí tự ngăn cách 
      
 ); 
    
 </script>
#bl2 Và đây là cách sử dụng, bạn hãy chuyển s chế độ soạn thảo bằng HTML để dán vào tag sau
<div id="spaging-container">
    $pageIn
  Nội dung trang 1
    $pageOut
    $pageIn
  Nội dung trang 2
    $pageOut
    .........
 </div> 
Short explain: Điều bạn cần là nội dung bài viết phải được chứa trong thẻ html nào đó với id="spaging-container", ở đây s chọn là thẻ div. Dùng $pageIn để bắt đầu cho một trang và $pageOut để kết thúc trang, phần này bạn có thể soạn thảo bình thường.

Hiện có 3 comments

Anonymous

cho mình hỏi xíu nha
Vì sao mình add đoạn code trên vào và chạy trên 2 trình duyệt
Kết quả:
+ Chrome : phân trang đc
+ IE: ko phân trang đc, khi nhấn vào trang khác nó đều hiển thị lại duy nhất trang 1.

Bạn có biết cách fix lỗi trên thì chỉ mình với.
Thanks.

Salipro Phạm

Chào @Nặc danh , mình đã test trên IE9 vẫn OK. Nếu IE của bạn xảy ra lỗi đó là do nó không tương thích với phiên bản jQuery 1.7.2. Bạn có thể thay thế bằng phiên bản cũ hơn xem sao nhé.

Post a Comment

Bạn có thể tự do cho ý kiến, thảo luận về bài viết này nhưng phải theo những điều khoản sau:
- Phải nghiêm túc, không dung tục, không spam.
- Nội dung phải liên quan đến bài viết.
- Không mang tính chất chính trị...
- Hạn chế sử dụng Ẩn danh, hãy dùng Tên/URL để thay thế.
Lưu ý : Có thể sử dụng tag HTML cơ bản trong comment: br, b, i, u, a href= ...

:)
:(
;)
:D
=))
:-/
:x
I-)
@-)
=D:
:-q
:-w
[-X
B-)
:((
:-B
:-h
:x(
:-*
~O)
@};-

About

RSS
Coming soon... :))