nguồn vietwebguide.com
Đối với những bạn đã học qua ngôn ngữ lập trình web động như PHP, ASP, JAVA,... thì chắc không lạ lẫm gì với thuật ngữ Pager (hay Paging, tiếng Việt là "phân trang"). Nhưng nếu bạn mới làm quen với blogger, thì có lẽ nó còn khá mới mẻ, mặc dù bạn đã từng thấy nó (có thể quan sát ngay trênn blog của mình).
Ví dụ thế này cho dễ, khi bạn tìm kiếm với 1 từ khóa nào đó trong Google chẳng hạn, tìm được 20000 kết quả, Google sẽ hiện chỉ 10 kết quả đầu tiên và số còn lại chúng ta sẽ truy cập theo các con số Page 1,2,3,4,5,6,7,8,9,10,..... bên dưới bottom của trang. Việc chia như thế sẽ giúp ta truy vào các trang ấy nhanh chóng thay vì chỉ có mỗi nút Next Page và Prev Page, rất tiện lợi, ta có thể truy cập vào trang số 10 mà không cần phải bấm Next Page 10 lần. Đoạn mã chia các con số 1,2,3... đó chính là mã phân trang (Pager).
Blogger Blog*Spot cho đến thời điển hiện tại (July 2008) vẫn chưa hỗ trợ code phân trang tự động. Điều đó làm cho các blog có nhiều bài viết trở nên khó khăn khi duyệt đối với người xem, và việc truy cập vào các bài viết cũ diễn ra rất lâu và khó khăn bởi ta phải bấm quá nhiều lần Next hoặc Prev.
Thấy được sự cần thiết phải có Pager của blog, tôi cũng cố gắng hoàn thành nó cho tôi và cũng như cho các bạn, để blog của chúng ta trở nên chuyên nghiệp hơn và tiện lợi hơn.
Tuy việc viết code Pager cho blogger là rất khó khăn nhưng việc cài đặt sử dụng lại rất dễ. Bạn sẽ nhanh chóng có được tiện ích này chỉ qua vài thao tác copy và paste code vào blog. Dưới đây là hướng dẫn:
1. Đối với blogger Layout
- Vào Edit HTML, click chọn Expand Widget Template, sau đó sao lưu một bản Template dự phòng tai nạn.
- Bằng cách nào không biết, bạn phải tìm cho được (không được thì comment bên dưới) dòng code sau:
<!-- navigation -->
<b:include name='nextprev'/>
và chèn đoạn code đỏ ngay bên dưới nó, như sau:
<!-- navigation -->
<b:include name='nextprev'/>
<b:if cond='data:blog.pageType == "index"'>
<!-- Pager v1.0 (C)2008 en.vietwbguide.com-->
<script type='text/javascript'>
var home_page = "http://www.vietwebguide.com/";
var blogID = "1193242412365517650" ;
var pager_max_main = 5;
var pager_num_of_button = 13;
var pager_link_alt_text = "Click to go to page";
var pager_total_text = "Total: ";
var pager_posts_text = " posts, ";
var pager_pages_text = " pages.";
</script>
<script src='http://www33.websamba.com/anhvosite/blogger/js/blogger_pager_script_v10.js' type='text/javascript'></script>
<hr/><div id='blogpagerShowToTal' style='margin:3px 2px 3px 2px; padding:2px; font-weight:bold'></div>
<div id='blogpager' style='margin:3px 2px 3px 2px; padding:2px;
border-bottom:1px #090 dotted; font-weight:bold'>Jump to page: </div>
<script type='text/javascript'>
window.onLoad = createBlogPager();
window.onLoad = pager_showTotal();
</script>
</b:if>
Bạn lưu ý thay các thông số sau của code trên:
- Dòng
var home_page = "http://www.vietwebguide.com/";
có chứa địa chỉ trang chủ, hãy thay nó thành địa chỉ của bạn.
- Dòng
var blogID = "1193242412365517650" ;
có chứa blogID của bạn,
- Dòng
var pager_max_main = 5;
chính là số bài viết mà bạn đã setting cho trang chủ. Đường dẫn của việc setting này là:
Settings - Formatting - Show ? Posts on the main page (chọn theo post, ko chọn theo ngày).
- Dòng
var pager_num_of_button = 13;
yêu cầu bạn khai báo số nút mà bạn muốn hiện. Ví dụ, blog của bạn có 100 bài, mỗi trang 10 bài thì sẽ có 10 nút. Nhưng nếu bạn Khi blog bạn lên 150 bài thì số nút không là 15 mà vẫn là 13, kèm theo mà menu xổ xuống của các nút (bạn xem preview ở đây). Nếu ta không giới hạn số nút, thì số nút sẽ tăng lên mãi theo số bài viết, và như thế là không đẹp nữa. Tùy theo bề rộng của cột của bạn mà chọn con số cho hợp lí. Của tôi là 13.
Bạn lưu ý thay các thông số sau của code trên:
- Dòng
var home_page = "http://www.vietwebguide.com/";
có chứa địa chỉ trang chủ, hãy thay nó thành địa chỉ của bạn.
- Dòng
var blogID = "1193242412365517650" ;
có chứa blogID của bạn, nếu bạn vẫn chưa biết cách lấy ID của blog mình, hãy tham khảo ở đây.
- Dòng
var pager_max_main = 5;
chính là số bài viết mà bạn đã setting cho trang chủ. Đường dẫn của việc setting này là:
Settings - Formatting - Show ? Posts on the main page (chọn theo post, ko chọn theo ngày).
- Dòng
var pager_num_of_button = 13;
yêu cầu bạn khai báo số nút mà bạn muốn hiện. Ví dụ, blog của bạn có 100 bài, mỗi trang 10 bài thì sẽ có 10 nút. Nhưng nếu bạn Khi blog bạn lên 150 bài thì số nút không là 15 mà vẫn là 13, kèm theo mà menu xổ xuống của các nút (bạn xem preview ở đây). Nếu ta không giới hạn số nút, thì số nút sẽ tăng lên mãi theo số bài viết, và như thế là không đẹp nữa. Tùy theo bề rộng của cột của bạn mà chọn con số cho hợp lí. Của tôi là 13.
Bạn lưu ý thay các thông số sau của code trên:
- Dòng
var home_page = "http://www.vietwebguide.com/";
có chứa địa chỉ trang chủ, hãy thay nó thành địa chỉ của bạn.
- Dòng
var blogID = "1193242412365517650" ;
có chứa blogID của bạn, nếu bạn vẫn chưa biết cách lấy ID của blog mình, hãy tham khảo ở đây.
- Dòng
var pager_max_main = 5;
chính là số bài viết mà bạn đã setting cho trang chủ. Đường dẫn của việc setting này là:
Settings - Formatting - Show ? Posts on the main page (chọn theo post, ko chọn theo ngày).
- Dòng
var pager_num_of_button = 13;
yêu cầu bạn khai báo số nút mà bạn muốn hiện. Ví dụ, blog của bạn có 100 bài, mỗi trang 10 bài thì sẽ có 10 nút. Nhưng nếu bạn Khi blog bạn lên 150 bài thì số nút không là 15 mà vẫn là 13, kèm theo mà menu xổ xuống của các nút (bạn xem preview ở đây). Nếu ta không giới hạn số nút, thì số nút sẽ tăng lên mãi theo số bài viết, và như thế là không đẹp nữa. Tùy theo bề rộng của cột của bạn mà chọn con số cho hợp lí. Của tôi là 13.
2. Đối với blogger Classic
Bạn chỉ việc chèn đoạn code sau vào ngay sau thẻ đóng . Trường hợp blog của bạn đã qua nhiều lần chèn các code hack khác thì bạn có thể không chèn ở vị trí đấy, nói chung tùy nơi nào mà bạn cảm thấy hợp lý là được.
<MainPage>
<!-- Pager v1.0 (C)2008 en.vietwbguide.com-->
<script type='text/javascript'>
var home_page = "http://www.vietwebguide.com/";
var blogID = "1193242412365517650" ;
var pager_max_main = 5;
var pager_num_of_button = 13;
var pager_link_alt_text = "Click to go to page";
var pager_total_text = "Total: ";
var pager_posts_text = " posts, ";
var pager_pages_text = " pages.";
</script>
<script src='http://www33.websamba.com/anhvosite/blogger/js/blogger_pager_script_v10.js'
type='text/javascript'></script>
<hr/><div id='blogpagerShowToTal' style='margin:3px 2px 3px 2px; padding:2px; font-weight:bold'></div>
<div id='blogpager' style='margin:3px 2px 3px 2px; padding:2px;
border-bottom:1px #090 dotted; font-weight:bold'>Jump to page: </div>
<script type='text/javascript'>
window.onLoad = createBlogPager();
window.onLoad = pager_showTotal();
</script>
</MainPage>
<MainPage>
<!-- Pager v1.0 (C)2008 en.vietwbguide.com-->
<script type='text/javascript'>
var home_page = "http://www.vietwebguide.com/";
var blogID = "1193242412365517650" ;
var pager_max_main = 5;
var pager_num_of_button = 13;
var pager_link_alt_text = "Click to go to page";
var pager_total_text = "Total: ";
var pager_posts_text = " posts, ";
var pager_pages_text = " pages.";
</script>
<script src='http://www33.websamba.com/anhvosite/blogger/js/blogger_pager_script_v10.js'
type='text/javascript'></script>
<hr/><div id='blogpagerShowToTal' style='margin:3px 2px 3px 2px; padding:2px; font-weight:bold'></div>
<div id='blogpager' style='margin:3px 2px 3px 2px; padding:2px;
border-bottom:1px #090 dotted; font-weight:bold'>Jump to page: </div>
<script type='text/javascript'>
window.onLoad = createBlogPager();
window.onLoad = pager_showTotal();
</script>
</MainPage>
Các thông số cũng phải được setting như mục 1.
