Thủ Thuật Công Nghệ: Tạo Phân Trang Đẹp Nhất Cho Blogger

Phân trang thì có rất nhiều kiểu loại mẫu mã.Nhiều cách bố trí cài đặt ví dụ như áp dụng theo cách chỉnh sửa HTML trong template hay là thêm một tiện ích.Để đơn giản cho việc cài đặt cũng như dỡ bỏ khi cần thiết ở đây ta chỉ cần thêm một tiện ích và dán code vào là xong.
Trong ảnh có tất cả 10 mẫu phân trang có đánh số thứ tự bên cạnh bạn thích loại nào thì lấy code tương ứng ở bên dưới

Mẫu 1

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}
.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:bold}
.showpageNum a{color:#000;padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#f8b5a4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhipl7EsJ-hPbldcB4sS9MGJ6wQdjL1jOgF1_xB6Sc-L-vRbWmRL_B6MdO9ikNhHK6I2GtTo7rU-_iy_tPNk_vgntZcUIwufqhXf1MN6q8e88J8GJpS29VUJwXxc0ZINcyR8sJDOqUavxMD/s90/pagenav1.png) 0 -60px repeat-x}
.showpageNum a:hover{border:1px solid #888;background:#f7cac9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhipl7EsJ-hPbldcB4sS9MGJ6wQdjL1jOgF1_xB6Sc-L-vRbWmRL_B6MdO9ikNhHK6I2GtTo7rU-_iy_tPNk_vgntZcUIwufqhXf1MN6q8e88J8GJpS29VUJwXxc0ZINcyR8sJDOqUavxMD/s90/pagenav1.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}
.showpagePoint{color:#666;padding:3px 8px;margin:2px;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#f2f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhipl7EsJ-hPbldcB4sS9MGJ6wQdjL1jOgF1_xB6Sc-L-vRbWmRL_B6MdO9ikNhHK6I2GtTo7rU-_iy_tPNk_vgntZcUIwufqhXf1MN6q8e88J8GJpS29VUJwXxc0ZINcyR8sJDOqUavxMD/s90/pagenav1.png) 0 -5px repeat-x;text-decoration:none}" 
</style>
<script type='text/javascript'>
var postperpage=5;//Số bài viết mỗi lần phân trang
var numshowpage=5;//Số nút phân trang
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script type='text/javascript' src='https://googledrive.com/host/0B7dsLzZ8KnJmWDFyelBrOTJfa0U/'></script>

Mẫu 2

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#b1a7c3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ukuB9Pfnj4jAELzCLfxPQB5ofeGsd3UMDHhomyhtKV8DvtpODY3vIEpsGGJ04RDEAORw_BA0mctnwZa34fnKBo0QYWFSBbR_LZ1zj4t5zKxmj_7oalOu6ggaKHXuPIhRNsqclk7baVQJ/s90/pagenav2.png) 0 -60px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#f7b36a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ukuB9Pfnj4jAELzCLfxPQB5ofeGsd3UMDHhomyhtKV8DvtpODY3vIEpsGGJ04RDEAORw_BA0mctnwZa34fnKBo0QYWFSBbR_LZ1zj4t5zKxmj_7oalOu6ggaKHXuPIhRNsqclk7baVQJ/s90/pagenav2.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#444;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:#f7d5b0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ukuB9Pfnj4jAELzCLfxPQB5ofeGsd3UMDHhomyhtKV8DvtpODY3vIEpsGGJ04RDEAORw_BA0mctnwZa34fnKBo0QYWFSBbR_LZ1zj4t5zKxmj_7oalOu6ggaKHXuPIhRNsqclk7baVQJ/s90/pagenav2.png) 0 0 repeat-x;text-decoration:none} 
</style>
<script>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script src="https://googledrive.com/host/0B7dsLzZ8KnJmWDFyelBrOTJfa0U/"></script>

Mẫu 3

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border-bottom:3px solid #fe9a2e;background:#f7f8e0}.showpageNum a:hover{border-bottom:3px solid #df01d7;background:#f6cee3}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#333;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;border-bottom:3px solid #fe9a2e;background:#f8e0f7;text-decoration:none}
</style>
<script>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script src="https://googledrive.com/host/0B7dsLzZ8KnJmWDFyelBrOTJfa0U/"></script>

Mẫu 4

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:2px 8px;margin:0 4px;text-decoration:none;border-bottom:2px solid #5fb404;border-top:2px solid #5fb404;background:#effbf5}.showpageNum a:hover{border-bottom:2px solid #df01d7;background:#a9f5f2;border-top:2px solid #df01d7}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:2px 8px;margin:2px;font-weight:700;border-bottom:2px solid #5e610b;border-top:2px solid #5e610b;background:#5e610b;text-decoration:none}
</style>
<script>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script src="https://googledrive.com/host/0B7dsLzZ8KnJmWDFyelBrOTJfa0U/"></script>

Mẫu 5

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.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 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-ZlJ7wyryg_0akiVhO_LJzM63IoBJytwk6pmNiGaeh1jJ8AS4oY7GjquC26Ude4Or4Z9lSSL3zwJCACnDHxzQEqOPOizGE0h67kaz-5i9z9fN_641cxxYn3a5mT0YL02PoOAdlClRaNm/s75/wp1.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-ZlJ7wyryg_0akiVhO_LJzM63IoBJytwk6pmNiGaeh1jJ8AS4oY7GjquC26Ude4Or4Z9lSSL3zwJCACnDHxzQEqOPOizGE0h67kaz-5i9z9fN_641cxxYn3a5mT0YL02PoOAdlClRaNm/s75/wp1.jpg) 0 -25px repeat-x}.showpageOf{margin:0 4px 0 0}.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-ZlJ7wyryg_0akiVhO_LJzM63IoBJytwk6pmNiGaeh1jJ8AS4oY7GjquC26Ude4Or4Z9lSSL3zwJCACnDHxzQEqOPOizGE0h67kaz-5i9z9fN_641cxxYn3a5mT0YL02PoOAdlClRaNm/s75/wp1.jpg) 0 0 repeat-x;text-decoration:none}
</style>
<script>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script src="https://googledrive.com/host/0B7dsLzZ8KnJmWDFyelBrOTJfa0U/"></script>

Mẫu 6

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #919106;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIU3U-Hi05rQe79OIwtl-6ri2uPdoQKt3CK4xylBKQyJox7pWsInpxC-WFu7rWzx3OQ0sc8PRLYYBA2RTuVqxkUH1nqfAh_qdIexZCtROhKptf-ok-7uA7irjRo0YRbF4BkdkEsDn9Bu2d/s75/wp2.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #aeae0a;background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIU3U-Hi05rQe79OIwtl-6ri2uPdoQKt3CK4xylBKQyJox7pWsInpxC-WFu7rWzx3OQ0sc8PRLYYBA2RTuVqxkUH1nqfAh_qdIexZCtROhKptf-ok-7uA7irjRo0YRbF4BkdkEsDn9Bu2d/s75/wp2.jpg) 0 -25px repeat-x}.showpageOf{margin:0 5px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #919106;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIU3U-Hi05rQe79OIwtl-6ri2uPdoQKt3CK4xylBKQyJox7pWsInpxC-WFu7rWzx3OQ0sc8PRLYYBA2RTuVqxkUH1nqfAh_qdIexZCtROhKptf-ok-7uA7irjRo0YRbF4BkdkEsDn9Bu2d/s75/wp2.jpg) 0 0 repeat-x;text-decoration:none}
</style>
<script>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script src="https://googledrive.com/host/0B7dsLzZ8KnJmWDFyelBrOTJfa0U/"></script>

Mẫu 7

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnYq-Y-nqS7HQp1b5fTtQIADdiN8eRQOVe10axQ3qnOpHwmVpq1onCrveQkXtTjh952VxgA1jUgpphJQGbL22EpNZWcEYy6UhdIwXwD1aNcfBjbASlU4IZRMOhDeaG49RJagtQDqZOP74t/s75/wp3.jpg) 0 -25px repeat-x}.showpageNum a:hover{background:#044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnYq-Y-nqS7HQp1b5fTtQIADdiN8eRQOVe10axQ3qnOpHwmVpq1onCrveQkXtTjh952VxgA1jUgpphJQGbL22EpNZWcEYy6UhdIwXwD1aNcfBjbASlU4IZRMOhDeaG49RJagtQDqZOP74t/s75/wp3.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnYq-Y-nqS7HQp1b5fTtQIADdiN8eRQOVe10axQ3qnOpHwmVpq1onCrveQkXtTjh952VxgA1jUgpphJQGbL22EpNZWcEYy6UhdIwXwD1aNcfBjbASlU4IZRMOhDeaG49RJagtQDqZOP74t/s75/wp3.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</style>
<script>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script src="https://googledrive.com/host/0B7dsLzZ8KnJmWDFyelBrOTJfa0U/"></script>

Mẫu 8

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguvxA_nGMWKT3yExOPxebK-L07jquu-NP_pVptK89XM_kY71UDeI99sTY3rd954HSsv0fUtX-rAxUF2DrNGiy_SgyujCfopABSf9OjDkIuDBS2bigwO7tRKXbv6uq5CcxFWeJlBb9WmS3e/s75/wp4.jpg) 0 -25px repeat-x}.showpageNum a:hover{border-top:1px solid #999;border-left:1px solid #999;border-right:1px solid #999;border-bottom:2px solid #999;background:#999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguvxA_nGMWKT3yExOPxebK-L07jquu-NP_pVptK89XM_kY71UDeI99sTY3rd954HSsv0fUtX-rAxUF2DrNGiy_SgyujCfopABSf9OjDkIuDBS2bigwO7tRKXbv6uq5CcxFWeJlBb9WmS3e/s75/wp4.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguvxA_nGMWKT3yExOPxebK-L07jquu-NP_pVptK89XM_kY71UDeI99sTY3rd954HSsv0fUtX-rAxUF2DrNGiy_SgyujCfopABSf9OjDkIuDBS2bigwO7tRKXbv6uq5CcxFWeJlBb9WmS3e/s75/wp4.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</style>
<script>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script src="https://googledrive.com/host/0B7dsLzZ8KnJmWDFyelBrOTJfa0U/"></script>

Mẫu 9

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx00qNNFQlhPfP3E9pSQiewWjwbaphE8upN5RLWZSqMDIYD-iEx3r1nOQjh-Uz8FprpGiaGoxfi4g9l_slEVmKaA0C9i78nGrdmY3-BTdAch9Nf_oq6OSczLhmbsg8DwwlAncC0QOYDQp1/s75/wp5.jpg) 0 -50px repeat-x}.showpageNum a:hover{background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx00qNNFQlhPfP3E9pSQiewWjwbaphE8upN5RLWZSqMDIYD-iEx3r1nOQjh-Uz8FprpGiaGoxfi4g9l_slEVmKaA0C9i78nGrdmY3-BTdAch9Nf_oq6OSczLhmbsg8DwwlAncC0QOYDQp1/s75/wp5.jpg) 0 -25px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx00qNNFQlhPfP3E9pSQiewWjwbaphE8upN5RLWZSqMDIYD-iEx3r1nOQjh-Uz8FprpGiaGoxfi4g9l_slEVmKaA0C9i78nGrdmY3-BTdAch9Nf_oq6OSczLhmbsg8DwwlAncC0QOYDQp1/s75/wp5.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</style>
<script>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script src="https://googledrive.com/host/0B7dsLzZ8KnJmWDFyelBrOTJfa0U/"></script>

Mẫu 10

<style type='text/css'>
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#fff;font-size:11px;margin:10px;padding:8px 20px;background:#333}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#666}.showpageNum a:hover{background:#aeb404}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#da6100;text-decoration:none}.showpageOf{margin:0 5px 0 0}
</style>
<script>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script src="https://googledrive.com/host/0B7dsLzZ8KnJmWDFyelBrOTJfa0U/"></script>

Lưu ý
Để tiện ích phân trang chạy mượt mà không những tại trang chủ mà khi vào trang nhãn không bị hiện tượng liệt kê 1 dãy bài(20 bài)và có khi còn không thấy tiện ích phân trang đâu nữa.Các bạn cần làm thêm công việc sau:
Các bạn vào chỉnh sửa mẫu tìm tới những đoạn code có dạng:
expr:href='data:label.url'
Và sửa nó thành:
expr:href='data:label.url + "?&max-results=5"'
Tiếp đến bạn đặt đoạn javascript dưới đây vào ngay sau thẻ <head>

<script type='text/javascript'>
//<![CDATA[
/*---- ©:DautoCrazy.Blog-----*/
if(!location.href.match('max-results=')){if(location.href.match('/search/label/')){location.href = location.href + '?&max-results=5' ;}}
//]]>
</script>

Ở đây ta thống nhất mỗi lần phân trang trên mỗi trang hiển thị 5 bài và cài đặt số bài ở trang chủ cũng là 5 và số nút phân trang(numshowpage) hiển thị cũng là 5 số nút này tùy thuộc vào độ rộng của khung post bài mà bạn có thể thay đổi cho hợp lý.

October 14, 2014

Tạo Phân Trang Đẹp Nhất Cho Blogger