Hướng dẫn thêm phân trang đánh số thứ tự

Phân trang (Page Navigation) là một tiện ích được nhiều Blog áp dụng nhằm tăng tính chuyên nghiệp cho trang Blog của mình thay thế cho kiểu phân trang truyền thống của Blogspot. Dưới đây mình sẽ hướng dẫn các bạn cách phân trang cho Blogspot

Bước 1: Thêm link js tạo phân trang đánh số thứ tự

Đăng nhập Blog > Chủ đề > Chỉnh sửa HTML. Thêm đoạn code sau vào trước thẻ </body>

Copy


<b:if cond='data:view.isMultipleItems'>

<script>

//<![CDATA[

var perPage = 15;

var numPages = 3;

var firstText = '<span class="firstText"></span>';

var lastText = '<span class="lastText"></span>';

var prevText = '<span class="prevText"></span>';

var nextText = '<span class="nextText"></span>';

var urlactivepage = location.href;

var home_page = "/";

//]]>

</script>

<script src='https://cdn.rawgit.com/ns24h/js/master/blog-paper.js'/>

</b:if>

Thiết lập:

var perPage = 15; // Số bài đăng hiển thị trong một trang
var numPages = 3; // Số phân trang hiển thị

Bước 2. Thêm css trong <b:skin> tạo style cho phân trang

Copy


#blog-pager .displaypageNum a,#blog-pager .pagecurrent,#blog-pager .showpage a{color: #333;font: 14px Roboto,sans-serif;margin-right: 5px;padding: 8px 12px;background: #fff;border: 1px solid #ddd;border-radius: 2px;}

#blog-pager.displaypageNum a:hover,#blog-pager .showpage a:hover{color:#fff;background:#005791;border:1px solid #005791}

#blog-pager .pagecurrent{font-weight:bold;color:#fff;background:#005791;border:1px solid #005791}

#blog-pager .showpageOf{float:right;display:none!important}

#blog-pager span.firstText:after,#blog-pager span.lastText:after,#blog-pager span.prevText:after,#blog-pager span.nextText:after{font-family:fontawesome;font-size:18px;vertical-align:text-bottom}

#blog-pager span.firstText:after{content:'\f100'}

#blog-pager span.lastText:after{content:'\f101'}

#blog-pager span.prevText:after{content:'\f104'}

#blog-pager span.nextText:after{content:'\f105'}

Kiểm tra xem template đã có thư viện font-awesome chưa nếu chưa có chèn link bên dưới trong thẻ <head>

Copy


<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Lưu ý:

- Vào Cài đặt > Bài đăng nhận xét và chia sẻ > chọn Hiển thị tối đa bằng số bài đăng được thiết lập trong js ví dụ perPage = 15; thì cài đặt hiển thị tối đa 15 bài.

- Thêm ?&max-results=số trang ví dụ ?&max-results=15 đằng sau link Label ví dụ:

+ Khi tạo menu có dạng

<li><a href="/search/label/mien-trung" title="Miền Trung">Miền Trung</a></li>

Sửa thành

<li><a href="/search/label/mien-trung?&max-results=15" title="Miền Trung">Miền Trung</a></li>

+ Với trường hợp link Label có dạng

<a expr:href='data:label.url' expr:title='data:label.name' ><data:label.name/></a>

Sửa thành

<a expr:href='data:label.url + "?&max-results=15"' expr:title='data:label.name' ><data:label.name/></a>

Chấm hết bài!!!

Nội dung chính