Phân trang cho bài viết blog có nội dung dài

Với 1 trang nội dung tương đối dài thì việc phân nội dung thành các trang nhỏ thì sẽ hợp lý hơn, và trang nội dung trông sẽ gọn gàng hơn. 


Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sử code HTML
3. Chèn đọan code này vào trước dòng code </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(h).M(c(){s();$(".6:r").z("I","L");$(".5:r a").p("g");$(".7-3 a").C(c(){9 b=$(t).y("k");b=B(b)-1;$(".6").G();$(".5 a").H("g");$("#l-3 > 2.6:R("+b+")").P();$(t).p("g");u v})});c s(){9 a=h.w(\'l-3\');d=a.o.m(/\\$A/n,\'<2 4="6">\');d=d.m(/\\$D/n,\'</2><2 4="E"></2>\');a.o=d}c F(j,f,q){h.J(\'<2 4="7-3" K="7-3"></2>\');9 i=1;9 8="";N(i<=j){O(j-i!=0){8+="<e 4=\'5\'><a k=\\""+i+"\\">"+f+" "+i+"</a></e> "+q+" "}Q{8+="<e 4=\'5\'><a k=\\""+i+"\\">"+f+" "+i+"</a></e> "}i++}$("#7-3").x(8)}',54,54,'||div|container|class|sitem183|spage183|snumber|txt|var||showPage|function|nd|span|name|current183|document||num|href|spaging|replace|gi|innerHTML|addClass|sep|first|CreateItems|this|return|false|getElementById|html|attr|css|pageIn|parseInt|click|pageOut|clear|NumberedPage|hide|removeClass|display|write|id|block|ready|while|if|fadeIn|else|eq'.split('|'),0,{}))
//]]> </script>

4. 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;
}

5. Bấm  Lưu mẫu   

6. Để 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
7. 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>
8. Bấm Xuất bản bài đăng và xem thành quả.

post-edit

2 nhận xét:

- Không chèn liên kết Spam quảng cáo. có thể xem ở đây Liên Kết Bạn Bè
- Nội dung nên liên quan tới bài viết.
- Hãy đóng góp ý kiến của bạn để Blogger Việt hoàn thiện hơn.
  1. ok bạn. mình làm được rồi. cảm ơn nhé

    Trả lờiXóa
  2. cái video (html5) không chạy được bạn ơi. Có cách nào khắc phục không?

    Trả lờiXóa