Làm thế nào để phân trang bằng số trong blogger? | How to Add Numbered Pagination in Blogger?

Bài viết này tôi sẽ hướng dẫn cách phân trang blogger bằng số, với thủ thuật này sẽ giúp người dùng xem trang Blogger của bạn rất thuận tiện

Numbered Pagination là gì?

Bạn có thể hiểu đơn giản nó là số trang của một trang sách, và trang sách này là trang điện tử bạn muốn xem trang nào thì cức click chọn vào đó.

Bài viết này tôi sẽ hướng dẫn add mẫu phân trang Blogger như hình bên dưới.

Các bước cần thực hiện:

Tính dùng trang blog hiện tại của mình để trình bày luôn, nhưng do trong đó chỉnh sửa từa lưa quá giờ chỉnh lại là đuối luôn nên lấy đại blog cũ ra xài tạm ^^! Như bạn thấy trong hình dưới vùng phân trang mặc định của blogger chỉ có 3 thông số "Newer Post", "Older Post" và  "Home ", với ba thông số này sẽ làm người đọc nhàm chán khi muốn duyệt qua trang web của bạn.

Để thay đổi thanh công cụ phân trang mặc định của blogger bạn hày vào trang quản lý blog truy cập vào mục "Template" và chọn "Edit HTML".

Trong màn hình chỉnh sửa HTML của blogger bạn chọn ô văn bản(Text Area) rồi nhấn phím tắt "Crtl + F" một trình tìm kiếm sẽ được hiển thị ở góc phải màn hình, hãy gõ vào dòng chữ "]]></b:skin>" và hình enter, sau khi kiếm thấy dòng này thì bạn copy đoạn mã CSS bên dưới vào trước dòng vừa tìm thấy.

.showpageNum a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
float: left;
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}

Đây là phần bạn có thể sử dụng để thiết kết giao diện cho công cụ phân trang bằng số, bạn lưu ý mỗi một mẫu(template) blogger sẽ có các thiết kết khác nhau, vì vậy để có được một mẫu hợp với blog của mình thì bạn nên chịu khó thiết kế lại cho phù hợp, chỉ cần biết căn bản về CSS và chịu khó mò mẫm một xíu và được.

Ngoài ra mãu này khi kết hợp với một số mẫu blogger có thể bị lệnh về kích thước, nếu thấy lệnh bạn hãy tùy chỉnh lại mã CSS trên.

Click để xem hình lớn.

Sau khi làm xong bước trên, bạn tiếp tục nhấn "Ctrl + F", gõ vào dòng chữ "</body>", sau khi tìm thấy dòng </body> bạn điền doạn mã script và blog bên dưới vào trước dòng đó.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

Click để xem hình lớn.

Cuối cùng bạn chỉ việc nhấn vào nút "Save Template" và quay lại trang blog của mình để kiểm tra kết quả. Do dùng trang blog cũ và cũng làm viết design lại quá nên kết quả không được đẹp lắm ^^!.

Tôi sẽ sưu tầm và viết lại một số bài về Blogger Pagination cũng như các mẫu Number Pagination khác trong các bài viết sau, rất mong nhận được sự theo dõi của các bạn.



Source: MyBloggerLab