Page navigation đánh số đầy màu sắc cho sự lựa chọn của bạn

Quang cao cua ban ở đây

Xin chao các bloger ! Hôm nay Quockiencoltd xin chia sẽ đến các bạn những mẫu Page navigation đẹp đầy màu sắc mà mình đả sưu tầm được từ trước tới giờ , Tha hồ cho bạn lựa chọn . Xin nhắc lại , những mẫu Page navigation này mình chỉ sưu tầm thôi nhé , và bây giờ chia sẽ , bạn nào không thích thì đừng có chê bai ném đá . Nếu có ném chỉ xin nhận viên sõi nhỏ xứu cho đở đau . Chung ta vào vấn đề với Page navigation nhé !

Page Navigation blogger là lựa chọn thực sự tuyệt vời với phong cách bài viết cũ và liên kết bài mới hơn với các nút số trang hấp dẫn .
Bạn có thể dễ dàng nhận được các trick Page Navigation trong các trang web. Hầu như tất cả các trang web cung cấp các phong cách cùng một số trang. Mình muốn chia sẻ một số thiết kế CSS mà thực sự sẽ thay đổi phong cách của bạn Trang Navigation . Để thêm các phong cách . Chỉ cần thay thế CSS của Page Navigation với CSS có sẵn ở đây . Bạn có thể chọn phong cách mới  xem trước . Phong cách đầy màu sắc mà không có bất kỳ Gradient hình ảnh và có các gờ tròn dồn vào chân trang ,  trong đó cung cấp hiệu quả hơn với các nút mặc định  .

1. /* www.myfancy.org */  
2. .showpageArea {font-weight: bold;margin:5px;}  
3. .showpageArea a {text-decoration:underline;color: #fff;}  
4. .showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
5. margin:0 3px;padding:3px 5px;  
6. background: #9dd53a; /* old browsers */  
7. background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* firefox */  
8. background: -webkit-gradient(linear, left top, left bottom,  
9. color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217),  
10. color-stop(100%,#7cbc0a)); /* webkit */  
11. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',  
12. endColorstr='#7cbc0a',GradientType=0 ); /* ie */  
13. }  
14. .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;  
15. background: #6db3f2; /* old browsers */  
16. background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* firefox */  
17. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2),  
18. color-stop(50%,#54a3ee), color-stop(51%,#3690f0),  
19. color-stop(100%,#1e69de)); /* webkit */  
20. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2',  
21. endColorstr='#1e69de',GradientType=0 ); /* ie */  
22. }  
23. .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
24. margin:0 3px;padding:3px 5px;  
25. background: #e2e2e2; /* old browsers */  
26. background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */  
27. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),  
28. color-stop(100%,#fefefe)); /* webkit */  
29. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',  
30. endColorstr='#fefefe',GradientType=0 ); /* ie */  
31. }  
32. .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}  
33. .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}  

Black Red

view plaincopy to clipboardprint?

1. /* www.myfancy.org */  
2. .showpageArea {font-weight: bold;margin:5px;}  
3. .showpageArea a {text-decoration:underline;color: #fff;}  
4. .showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
5. margin:0 3px;padding:3px 5px;  
6. background: #f85032; /* old browsers */  
7. background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */  
8. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c),  
9. color-stop(51%,#f6290c), color-stop(71%,#f02f17),  
10. color-stop(100%,#e73827)); /* webkit */  
11. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032',  
12. endColorstr='#e73827',GradientType=0 ); /* ie */  
13. }  
14. .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;  
15. background: #aebcbf; /* old browsers */  
16. background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* firefox */  
17. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a),  
18. color-stop(100%,#0a0809)); /* webkit */  
19. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',  
20. endColorstr='#0a0809',GradientType=0 ); /* ie */  
21. }  
22. .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
23. margin:0 3px;padding:3px 5px;  
24. background: #e2e2e2; /* old browsers */  
25. background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */  
26. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),  
27. color-stop(100%,#fefefe)); /* webkit */  
28. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',  
29. endColorstr='#fefefe',GradientType=0 ); /* ie */  
30. }  
31. .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}  
32. .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}  

1. /* www.myfancy.org */  
2. .showpageArea {font-weight: bold;margin:5px;}  
3. .showpageArea a {text-decoration:underline;color: #fff;}  
4. .showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
5. margin:0 3px;padding:3px 5px;  
6. background: #3b679e; /* old browsers */  
7. background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* firefox */  
8. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  
9. color-stop(100%,#7db9e8)); /* webkit */  
10. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e',  
11. endColorstr='#7db9e8',GradientType=0 ); /* ie */  
12. }  
13. .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;  
14. background: #aebcbf; /* old browsers */  
15. background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* firefox */  
16. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a),  
17. color-stop(100%,#0a0809)); /* webkit */  
18. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',  
19. endColorstr='#0a0809',GradientType=0 ); /* ie */  
20. }  
21. .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
22. margin:0 3px;padding:3px 5px;  
23. background: #e2e2e2; /* old browsers */  
24. background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */  
25. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),  
26. color-stop(100%,#fefefe)); /* webkit */  
27. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',  
28. endColorstr='#fefefe',GradientType=0 ); /* ie */  
29. }  
30. .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}  
31. .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}  

Còn dưới đây là một số Page navigation mà mình chưa có thời gian để cập nhật demo : các bạn lấy về thay vào nếu vừa ý thì dùng nhé !

Đây là Page navigation với màu sắc xanh đậm 

1. /* www.myfancy.org */  
2. .showpageArea {font-weight: bold;margin:5px;}  
3. .showpageArea a {text-decoration:underline;color: #fff;}  
4. .showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
5. margin:0 3px;padding:3px 5px;  
6. background: #789EB1; /* old browsers */  
7. background: -moz-linear-gradient(top, #789EB1 0%, #618FA7 100%); /* firefox */  
8. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#789EB1),  
9. color-stop(100%,#618FA7)); /* webkit */  
10. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1',  
11. endColorstr='#618FA7',GradientType=0 ); /* ie */  
12. }  
13. .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;  
14. background: #7d7e7d; /* old browsers */  
15. background: -moz-linear-gradient(top, #7d7e7d 0%, #6B6B6B 100%); /* firefox */  
16. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d),  
17. color-stop(100%,#6B6B6B)); /* webkit */  
18. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d',  
19. endColorstr='#6B6B6B',GradientType=0 ); /* ie */  
20. }  
21. .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
22. margin:0 3px;padding:3px 5px;  
23. background: #e2e2e2; /* old browsers */  
24. background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */  
25. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),  
26. color-stop(100%,#fefefe)); /* webkit */  
27. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',  
28. endColorstr='#fefefe',GradientType=0 ); /* ie */  
29. }  
30. .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}  
31. .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}  

Còn đây là Page navigation màu cam

1. /* www.techirsh.com */  
2. .showpageArea {font-weight: bold;margin:5px;}  
3. .showpageArea a {text-decoration:underline;color: #fff;}  
4. .showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
5. margin:0 3px;padding:3px 5px;  
6. background: #ffb76b; /* old browsers */  
7. background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* firefox */  
8. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00),  
9. color-stop(100%,#ff7f04)); /* webkit */  
10. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b',  
11. endColorstr='#ff7f04',GradientType=0 ); /* ie */  
12. }  
13. .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;  
14. background: #9dd53a; /* old browsers */  
15. background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* firefox */  
16. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217),  
17. color-stop(100%,#7cbc0a)); /* webkit */  
18. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',  
19. endColorstr='#7cbc0a',GradientType=0 ); /* ie */  
20. }  
21. .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
22. margin:0 3px;padding:3px 5px;  
23. background: #e2e2e2; /* old browsers */  
24. background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */  
25. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),  
26. color-stop(100%,#fefefe)); /* webkit */  
27. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',  
28. endColorstr='#fefefe',GradientType=0 ); /* ie */  
29. }  
30. .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}  
31. .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}  

Bạn chỉ cần copy đem về thay vào tem blogspot là dùng thôi , Chúc tất cả các bạn một ngày mạnh khoẽ .