1. การจัดรูปแบบการแบ่งหน้า
ก่อนอื่นเราจะเพิ่มสไตล์ให้กับ CSS โดยไปที่เทมเพลต > แก้ไข HTML แล้วค้นหา ]]></b:skin> หากคุณมีปัญหาในการค้นหา ให้ตรวจสอบบทช่วยสอนนี้
เหนือแท็ก ]]></b:skin> ให้วางข้อความต่อไปนี้
/* Start XOmisse Pagination - Custom CSS */
#blog-pager, .blog-pager {
display:block;
padding:5px 0;
}
.showpage a, .pagenumber a, .totalpages, .current {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 2px;
background: #ffffff;
color: #333;
border: 1px solid #f2f2f2;
font-size: 12px;
border-radius: 2px;
transition: all .3s;
}
.showpage a:hover, .pagenumber a:hover, .current {
background: #333333;
color: #ffffff;
text-decoration:none;
}
/* End XOmisse Pagination */คุณสามารถแก้ไข CSS ด้านบนเพื่อปรับแต่งรูปลักษณ์ของการแบ่งหน้าและทำให้เหมาะกับการออกแบบบล็อกของคุณ คุณสามารถจัดรูปแบบได้ตามต้องการ แต่คำแนะนำของฉันคือเปลี่ยนสี ปรับพื้นที่ว่างและเพิ่มแบบอักษรของคุณเอง
2. เพิ่มฟังก์ชันการแบ่งหน้า
ตอนนี้เราสามารถเพิ่ม JavaScript เพื่อเปลี่ยนการนำทางเริ่มต้นที่เก่ากว่า/ใหม่กว่าให้เป็นเลขหน้าตัวเลขในหน้าดัชนี
ไปที่เทมเพลต > แก้ไข HTML อีกครั้ง ค้นหาแท็กปิด body </body> ซึ่งจะอยู่ใกล้กับจุดสิ้นสุดของเทมเพลตของคุณ
เหนือแท็กปิดเนื้อหาให้วางสิ่งต่อไปนี้
<b:if cond='data:blog.pageType == "index"'>
<!-- Start XOmisse Pagination -->
<script type='text/javascript'> //<![CDATA[ /** WRITTEN BY XOMISSE.COM **/
var postperpage=3; var numshowpage=4; var prevpage ='Previous'; var nextpage ='Next'; var urlactivepage=location.href; var home_page="/";
//]]> </script>
<script src='https://cdn.rawgit.com/xomisse/ac8ccfa4b8fb2c26d5cf76270db92201/raw/f957494b1691cce3d5a8cb92e5b4ed57cded9729/pagination.js' type='text/javascript'/>
<!-- End XOmisse Pagination -->
</b:if>อย่างที่คุณเห็น เรากำลังใช้คำสั่งเงื่อนไขเพื่อกำหนดเป้าหมายเฉพาะหน้าดัชนี โดยการนำโพสต์ล่าสุดอยู่ในหน้าแรก และที่เก่ากว่าอยู่ในหน้าอื่นๆ ถัดไป
3. การตั้งค่า
- เปลี่ยนค่า postperpage เป็นจำนวนโพสต์ที่จะปรากฏในแต่ละหน้า ซึ่งควรตรงกับหมายเลขที่คุณเลือกในการตั้งค่า > โพสต์ ความคิดเห็น และการตั้งค่าการแบ่งปัน > โพสต์ > แสดงมากที่สุด
- เปลี่ยนค่า numshowpage เป็นจำนวนหน้าที่คุณต้องการให้แสดงในการนำทางหน้าที่มีลำดับเลข
- เปลี่ยนค่าของ nextpage และ prevpage เป็นข้อความที่คุณต้องการให้แสดง
ที่มา : How to Add Numbered Pagination to Blogger (xomisse.com)