Chào các bạn!
Để cho blogspost của mình chuyên nghiệp hơn các blogger thường tạo phân trang cho các bài viết của mình. Sau đây mình JM xin giới thiệu với các bạn một kiểu phân trang khá là dễ làm và đây cũng là kiểu mình đang sử dụng. Hình demo như sau
Bước đầu tiên bạn đăng nhập vào trang quản trị blog của mình và chọn vào mục layout>Edit HTML (nếu bạn dùng giao diện cũ) hoặc template ->Edit HTML->Proccess (nếu bạn dùng giao diện draft)
nhớ là không chọn vào mục ‘Expand Widget Templates’
]]>b:skin>
và đặt trên nó bằng đoạn mã phía dưới
/*Viettin24h.com page navigation skin start*/
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
/*Viettin24h.com page navigation skin end*/
Tiếp đến bạn tìm dòng sau:
body>
và thay thế nó bằng :
/*Viettin24h.com page navigation end*/
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><script type='text/javascript'>var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; script><script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>b:if>b:if>
body>
/*Viettin24h.com page navigation end*/
bạn để ý các tham số sau
var pageCount=5;
dòng trên thể hiện số bài sẽ hiện lên mỗi phân trang (ở đây hiện là 5)
var displayPageNum=5;
Dòng trên thể hiện số trước và sau trang hiện tạiBạn có thể thay đổi những giá trị này để phù hợp với blog của bạn .
Ở bài sau mình sẽ giới thiệu với các bạn về phân trang các label(nhãn)
Chúc bạn thành công !!!
{ 0 nhận xét... read them below or add one }
Đăng nhận xét