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

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.

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

1 comments :

Comments

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

RELATED POSTS

1 comments :