Thứ Tư, 20 tháng 11, 2013

Phân trang cho Blogspot

Bài viết này, mình sẽ hướng dẫn các bạn phân trang cho Bogspot. Bố cục của trang sẽ đẹp hơn khi chúng ta kết hợp màu sắc phù hợp.























Bước 1: Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước dòng ]]></b:skin>.

#blog-pager {
text-align: center;
text-transform: capitalize;
font: bold 12px arial;
padding: 10px 0;
}
.showpageArea {
font-family: verdana,arial;
color: #000;
font-size: 11px;
margin: 10px;
}
.showpageArea a {
color: #000;
text-shadow: 0 1px 2px #fff;
font-weight: 700;
}
.blog-pager a, .showpageNum a, .showpageNum a:link, .showpageNum a:visited, .showpageNum a:active {
padding: 3px 8px;
margin: 0 2px;
text-decoration: none;
border: 1px solid #999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background: #ddd url(http://goo.gl/O5lZm) 0 -50px repeat-x;
color: #000;
}
.showpageNum a:hover {
border: 1px solid #888;
background: #ccc url(http://goo.gl/EQk7N) 0 -25px repeat-x;
}
.showpageOf {
margin: 0 8px 0 0;
color: #000;
}
.showpagePoint {
color: #fff;
text-shadow: 0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border: 1px solid #999;
background: #666 url(http://goo.gl/cV1YH) 0 0 repeat-x;
text-decoration: none
}


Bạn có thể lấy mã mầu để tùy biến CSS theo ý muốn của mình để có một style khác.
Nếu bạn muốn ẩn liên kết Set up on your blogspot thì thêm display:none vào class showpageWidget.

Bước 2: Đặt đoạn code sau đây vào trước thẻ </body>.

<script type='text/javascript'> 
//<![CDATA[
var home_page="/";
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=5;
var upPageWord ='Prev';
var downPageWord ='Next';
//]]>
</script>
<script src='http://goo.gl/hCKQi' type='text/javascript'></script>

Bạn cần định dạng số bài đăng trên trang chính tương ứng với tham số postperpage=10 ở trên.
Vào Settings >> Formatting >>

Lưu Template.

Bước 3. Chọn Expand Widget Templates. Tìm tất cả các dòng 'data:label.url' rồi thay nó bằng dòng

'data:label.url + &quot;?&amp;max-results=10&quot;'

Lưu Template là OK.