Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[KiNg]_[PiN]-BB

Như các bạn biết thì Abu Farhan
là người viết khác nhiều script phân trang cho blogspot. Tôi đã có
nhiều bài viết giới thiệu một vài kiểu phân trang như vậy. Bạn có thể
tìm ở tag Pagination trên
blog này để tham khảo. Hôm nay xin tiếp tục giới thiệu một kiểu phân
trang khác của Abu Farhan, tuy nhiên ở đây tôi có chút điều chỉnh để tạo
dáng vẻ khác một chút cho kiểu phân trang này để cộng đồng Blogger Việt
tham khảo.

Trước tiên bạn hãy xem hình minh họa bên dưới.




Để có dáng vẻ như vậy thì chúng ta cần tạo code CSS như bên dưới.

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 ]]>.
Code:


#blog-pager{padding:4px 0;text-align:center;}
[color=blue]/* Số trang */[/color]
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
[color=blue]/* Trang x trong y */[/color]
.showpageTotal {
margin:0 8px 0 0;
}
[color=blue]/* Trang hiện tại được đánh dấu */[/color]
.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;
text-decoration: none;
}
[color=blue]/* Trang trước – Trang sau */[/color]
.showpagePN a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpagePN a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
[color=blue]/* Liên kết tạo Widget */[/color]
.showpageWidget{
font-size: 10px;
float: right;
margin: 10px 10px 0 300px;
}
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ẻ .
Code:


<script type='text/javascript'>
//<![CDATA[
var [color=red]postperpage=10[/color];
var numshowpage=4;
var total_pag='Page:';
var upPageWord ='« Prev';
var downPageWord ='Next »';
var widget_pag='Set up on your blogspot';
//]]>
</script>
<script src='http://goo.gl/rgegj' type='text/javascript'/>
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 + "?&max-results=10"'

Lưu Template là OK.

Hãy xây dựng diễn đàn cùng [KiNg]_[PiN]-BB bạn nhé !!!


Admin không phải cái gì cũng biết
Admin chỉ mở ra một cộng đồng để những người hiểu biết và mới biết, trao đổi học tập !
Mong Các bạn đừng đánh giá hay nói bất cứ một lời lẽ nào khích tướng OK...

Không Hay Đừng Nói Lời Cay Đắng

[*]Diễn đàn đẹp nhất với trình duyệt web Mozilla Firefox
[*]Còn với mấy loại còn lại chắc là thuộc dang diễn đàn tồi nhất !!!
Xem lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Create your own blog
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải