Tạo phân trang cho bài viết dài trên blog

Đăng bởi Admin | 6/7/13 | 0 nhận xét

Nếu có một bài viết quá dài sẽ dẫn tới không đẹp mắt, ảnh hưởng ít nhiều đến SEO, Và gây ức chế cho người xem khi cứ phải kéo chuột để xem. 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 đó. Bài viết này namkna sẽ hướng dẫn các bạn cách phân trang cho bài viết quá dài.

Các bạn có thể xem Demo: 
. 

Demo for Post

☼ Cách tiến hành:
  1- Đăng nhập vào Blog
  2- Vào Mẫu
  3- Chọn Chỉnh sử HTML (Edit HTML)


  4- Thêm đoạn code sau vào trước thẻ </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://dl.dropbox.com/u/70549761/Navigation/namkna-blogspot-com/PagingInPost-min.js" type="text/javascript"></script>

Lưu ý: Để sử dụng lâu dài các bạn hãy tải các file javarscrip về (xem cách tải Tại đây) sau đó Uplaod lên host riêng (host Google code Tại đây hoặc Dropbox Tại đây) để sử dụng lâu dài nha.

  5- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> . 

#spaging-container, #snumber-container {
 width: 100%;
}
.spage183 {
 display:none;
}
.sitem183 {
 padding: 3px;
}
.sitem183 a, .sitem183 a.visited {
 font-weight: bold;
 text-decoration: none;
 color: green;
}
.sitem183 a:hover, .sitem183 a.current183 {
 text-decoration: underline;
 color: blue;
}

6. Bấm  Lưu mẫu   

7. Để phân trang trong bài viết, khi đăng bài bạn hãy chuyển sang chế độ soạn thảo bằngHTML để dán vào đoạn code sau:

<div id="spaging-container">
    $pageIn
  Nội dung trang 1
    $pageOut
    $pageIn
  Nội dung trang 2
    $pageOut
    $pageIn
  Nội dung trang 3
    $pageOut
 </div> 

Trong đó: 

Thay nội dung trang 1,2,3 thành đoạn văn bản. 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êm 1 trang trong bài viết bạn chỉ cần thêm đoạn code bên dưới vào trước thẻ đóng </div>ở trên.

    $pageIn
  Nội dung trang n
    $pageOut

8. Tiếp theo là vị trí đặt phần phân trang. Thường cuối bài viết. Bạn chọn phần soạn thảo HTML của bài viết và pate đoạn code sau vào:

<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>

9. Bấm Xuất bản bài đăng và xem thành quả nha.

Xem thêm:

• Tạo phân trang cho bảng trên blog
• Tạo phân trang Navigation màu đen cho blogger
• Tạo phân trang dạng số cho blog trên 3000 bài
• Phân trang cuộn đẹp cho Blog trên 3000 bài viết
• Tạo phân trang cuộn đẹp cho blogspot
• Tạo phân trang kiểu google

                                                                                                              Theo : Namkna
                                                                                                              Thu thuat vi tinh