Phân trang trong bài viết cho blogspot

Phân trang trong bài viết cho blogspot
Phân trang trong bài viết thường dùng cho các blogspot có bài viết với nội dung quá dài như trang truyện tranh hay bài viết giới thiệu về ảnh...
Tiện ích này áp dụng vào blogspot theo cách thủ công khi viết bài nên cũng không được thuận tiện lắm.Nhưng dù sao nó vẫn hữu ích với một số blogspot viết về chủ đề truyện tranh...
Việc áp dụng tiện ích phân trang trong bài viết dùng cho blogspot có bài với nội dung dài cũng không có gì quá phức tạp,vấn đề là cần lưu tâm khi viết bài.

Demo

Sau đây là các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa HTML

Bước 1: Thêm đoạn css 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;
}
Bước 2: Chèn đọan code sau vào trước dòng code </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
 CreateItems();
 $(".spage183:first").css("display", "block");
 $(".sitem183:first a").addClass("current183");
 $(".snumber-container a").click(function () {
  var showPage = $(this).attr("href");
  showPage = parseInt(showPage) - 1;
  $(".spage183").hide();
  $(".sitem183 a").removeClass("current183");
  $("#spaging-container > div.spage183:eq(" + showPage + ")").fadeIn();
  $(this).addClass("current183");
  return false
 })
});
function CreateItems() {
 var a = document.getElementById('spaging-container');
 nd = a.innerHTML.replace(/\$pageIn/gi, '<div class="spage183">');
 nd = nd.replace(/\$pageOut/gi, '</div><div class="clear"></div>');
 a.innerHTML = nd
}
function NumberedPage(num, name, sep) {
 document.write('<div class="snumber-container" id="snumber-container"></div>');
 var i = 1;
 var txt = "";
 while (i <= num) {
  if (num - i != 0) {
   txt += "<span class='sitem183'><a href=\"" + i + "\">" + name + " " + i + "</a></span> " + sep + " "
  } else {
   txt += "<span class='sitem183'><a href=\"" + i + "\">" + name + " " + i + "</a></span> "
  }
  i++
 }
 $("#snumber-container").html(txt)
}
//]]> </script>
Nếu blog có thư viện jquery rồi thì bỏ đi đoạn màu vàng.

Lưu mẫu

Bước 3:
Khi viết bài ta sử dụng code sau ở bên soạn thảo HTML
<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
    $pageIn
  Nội dung trang 4
    $pageOut
    $pageIn
  Nội dung trang 5
    $pageOut
    $pageIn
  Nội dung trang 6
    $pageOut
 </div>
Trong đó:
Thay nội dung trang 1,2,3,4,5,6 thành đoạn văn bản.
Để 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>
$pageIn
  Nội dung trang n
    $pageOut
Bước 4:
Thêm javascript sau vào cuối bài viết
<script type="text/javascript">
 NumberedPage(
  numPage = 6, // Số trang 
  title =  "Trang", 
  separator = "|"      
 );   
 </script>

Lưu ý
Số trang bạn muốn phân tương ứng với numPage =n (dòng màu hồng)


Nhận xét

Không có nhận xét nào :