Hướng dẫn thiết kế web và SEO T1: Phân trang, đánh số trang cho blog

Hướng dẫn phân trang, đánh số trang cho blog

- Một bài viết quá dài ta sẽ sử dụng ngắt trang (break). Khi đó nó sẽ hiển thị thêm dòng readmore
- Điều chỉnh số post hiển thị trên trang chủ ta vào
+ Setting> post and comment
+ Hoặc cũng có thể ta vào layout đặt lại số trên đó
- Đánh số trang

Trong Blogspot, ta có thể thiết lập số bài hiển thị cho mỗi trang bằng cách vào Settings - Posts and comments rồi chọn số thích hợp. Khi số bài của blog vượt quá con số đó, ta sẽ thấy blog hiển thị chữOlder Post để duyệt qua bài cũ. Cách này khiến bạn phải duyệt qua từng trang một mà không thể chủ động vị trí. Blog không hỗ trợ bất kì ứng dụng nào cho việc đánh số trang, giúp người đọc di chuyển nhanh gọn, bookmark tiện lợi hoặc biết chính xác số bài viết trong mục liên quan hoặc tổng thể.

Sau một hồi lang thang thử nghiệm, HD Việt đã lựa chọn một bài rất hay của helplogger để thực hành, với 7 kiểu cách trình bày đẹp mắt cho bạn lựa chọn,

Để thêm dòng đánh số trang cho toàn bộ blog, kể cả các trang Label, cần thực hiện 3 bước:

Thêm CSS để tạo style cho ứng dụng
Thêm JavaScript để xử lý đánh số trang
Chỉnh sửa cho Label

1. Thêm CSS để tạo style cho ứng dụng

Vào Dashboard > Template > Edit HTML

Nhấn chuột vào ô soạn thảo code và tổ hợp Ctrl + F để tìm đến đoạn sau:

]]></b:skin>
Chọn một style ưa thích rồi dán đoạn CSS lên ngay trên dòng ]]></b:skin>

Style 1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}

Style 2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 5

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Nếu muốn ẩn chữ Last/Fisrt thì bạn thêm dòng sau vào dưới đoạn CSS vừa chọn

.firstpage, .lastpage {display: none;}

HD Việt đã chọn style 3 cho blog này, bạn có thể xem ví dụ.

2. Thêm Script để đánh số trang

Tìm đến đoạn sau: </body> (cuối body bài)
Dán đoạn code sau ngay dòng phía trên con trỏ vừa tìm đến

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

/*<![CDATA[*/

var perPage=15;

var numPages=8;

var firstText ='First';

var lastText ='Last';

var prevText ='« Previous';

var nextText ='Next »';

var urlactivepage=location.href;

var home_page="/";

/*]]>*/

</script>

</b:if>

Thay số màu đỏ và xanh bằng số/kí tự thích hợp cho blog của bạn
Đến đây bạn có thể Save template lại và kiểm tra kết quả. (có thể phải Ctrl + F5 để update blog)
Nếu đoạn java scrip trục trặc ta thay bằng: http://helplogger.googlecode.com/svn/trunk/page-navigation2.js

3. Chỉnh sửa cho Label

Mặc định mỗi trang Label sẽ hiển thị 20 bài. Nếu bạn chỉnh đến phần trên rồi thì blog đã đánh số trang được rồi, nhưng mục Label vẫn chưa có gì thay đổi.
Cần tác động vào con số mặc định của Label để đánh số trang.
Tìm đến các đoạn sau: expr:href='data:label.url' (có thể có 3 đoạn như vậy)
Thay tất cả bằng expr:href='data:label.url + "?&max-results=15"'
Save template rồi refresh blog để xem kết quả.

4. Chú ý:

Bài viết đã được HD Việt trực tiếp thử nghiệm và kiểm tra.
Nếu đoạn js bị trục trặc, bạn có thể sử dụng code này (backup) hoặc đây hoặc thay bằng https://googledrive.com/host/0B3s-Lt6371k3VEJRdzcteFZud0E
Chúc các bạn thành công.

Phân trang, đánh số trang cho blog