Hoang Lan : PHÂN TRANG KIỂU CHO BLOG

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.

Để có phân trang đẹp cho blog các bạn tiến hành theo các bước dưới đây:
1- Đăng nhập Blog
2- Chọn thêm tiện ích
3- Chọn 1 trong các mẫu dưới đây cùng với code tương ứng
4- Dán code vô khung tiện ích và click lưu lại
Chú ý nên để tiện ích này ngay dưới khung chỉnh sửa bài viết trong phần bố cục

Mẫu 1

<style type="text/css">#blog-pager{clear:both;margin:20px 0 20px;font-size: 12px;padding:10px 0;}#blog-pager-newer-link{float: left;}#blog-pager-older-link{float: right;}.Profile img{border:3px solid;float:left;margin:5px 10px 5px 0;padding:2;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.profile-data{color:#999999;font:bold 20px/1.6em Arial,Helvetica,Tahoma,sans-serif;font-variant:small-caps;margin:0;text-transform:capitalize;}.profile-datablock{margin:0.5em 0;}.profile-textblock{line-height:1.6em;margin:0.5em 0;}a.profile-link{clear:both;display:block;font:80% monospace;padding:10px 0;text-align:center;text-transform:capitalize;}h2.date-header, .PageList h2{display:none;}#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link,.showpageNum a,.showpage a{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYmX6qEdt3y1KVU29DR7z5wqeqqQjAGiKSCck__iBns1HW9_0kQR4Tv_Yohk5w_k8GCWr_F5yEbYuchljQVA6bMFGh3ZtvBo047gOEeQojv7BTB_kJZU1Mru5pby8mM03tgp_uoas8SiY/s26/nav.jpg) repeat-x;border:1px solid #ae4402;color:#fff;margin:2px;padding:6px 10px 5px;text-decoration:none;text-shadow: 1px 0 1px #000;}#blog-pager-older-link a:hover,#blog-pager-newer-link a:hover,a.home-link:hover,.showpageOf,.showpagePoint,.showpageNum a:hover,.showpage a:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhh19TgAdui9wZhGBSCO2Ot3pCXASF6r4IhTW0TgEN-n43ioT6C6UCwTHtp_LStpYVXpXEEAR8wEG8VwKUP4KmNx0KTOuLATcOVoOpkhSlu99yFI0FayWZgFo26muWG1qpv-XddMlSlhQ/s26/nava2.jpg) repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;} </style> 

<script style='text/javascript'>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='https://krdautocrazyblog.googlecode.com/files/PhanTrangKieu2.js'></script>

Mẫu 2

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWz6nnekckV8VqPCRmY4BxnV_dWzJ_DQSolA5wtRtFPITCDVZppDRE3Zk82ywutDcpWGHFSxf4tzD7p3QaZvpe9sEWmRko7DAQYVvZeOX14SgAPgFuSmxG-vncitcB-O3ejhn4PZVzBI/s90/lite.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; 
margin:0px 1px 0 1px;padding:3px 10px;color:#222;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWz6nnekckV8VqPCRmY4BxnV_dWzJ_DQSolA5wtRtFPITCDVZppDRE3Zk82ywutDcpWGHFSxf4tzD7p3QaZvpe9sEWmRko7DAQYVvZeOX14SgAPgFuSmxG-vncitcB-O3ejhn4PZVzBI/s90/lite.png) repeat-x;background-position:0px -30px; 
border:2px solid #555;-webkit-border-radius:3px; 
-moz-border-radius:3px;border-radius:3px;color:#111;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWz6nnekckV8VqPCRmY4BxnV_dWzJ_DQSolA5wtRtFPITCDVZppDRE3Zk82ywutDcpWGHFSxf4tzD7p3QaZvpe9sEWmRko7DAQYVvZeOX14SgAPgFuSmxG-vncitcB-O3ejhn4PZVzBI/s90/lite.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;line-height:30px;padding:3px 10px;color:#222;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWz6nnekckV8VqPCRmY4BxnV_dWzJ_DQSolA5wtRtFPITCDVZppDRE3Zk82ywutDcpWGHFSxf4tzD7p3QaZvpe9sEWmRko7DAQYVvZeOX14SgAPgFuSmxG-vncitcB-O3ejhn4PZVzBI/s90/lite.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #111;-webkit-border-radius:3px; -moz-border-radius:3px;border-radius:3px;color:#777;text-decoration:underline;font-weight:bold; 
 </style> 

<script style='text/javascript'>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='https://krdautocrazyblog.googlecode.com/files/PhanTrangKieu2.js'></script>

Mẫu 3

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjbD1hZxJAf9MqwNtk6VOjj9U4OFurkEW4ZrGNtUJqEMmUhOKbjP0dIgAUptHAcLYpJKgqna3Qw_0f5wDi57cjQVxy_UTi5ql2aY0sAYiD8BmcFxXn9R0GPgeMTGBLi4Dt587fRyug6Cs/s197/transpdark.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px; 
margin:0px 1px 0 1px;padding:3px 10px;color:#eee;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjbD1hZxJAf9MqwNtk6VOjj9U4OFurkEW4ZrGNtUJqEMmUhOKbjP0dIgAUptHAcLYpJKgqna3Qw_0f5wDi57cjQVxy_UTi5ql2aY0sAYiD8BmcFxXn9R0GPgeMTGBLi4Dt587fRyug6Cs/s197/transpdark.png) repeat-x;background-position:0px -15px; 
border:2px solid #555;-webkit-border-radius:3px; 
-moz-border-radius:3px;border-radius:3px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjbD1hZxJAf9MqwNtk6VOjj9U4OFurkEW4ZrGNtUJqEMmUhOKbjP0dIgAUptHAcLYpJKgqna3Qw_0f5wDi57cjQVxy_UTi5ql2aY0sAYiD8BmcFxXn9R0GPgeMTGBLi4Dt587fRyug6Cs/s197/transpdark.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;line-height:30px;padding:3px 10px;color:#eee;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjbD1hZxJAf9MqwNtk6VOjj9U4OFurkEW4ZrGNtUJqEMmUhOKbjP0dIgAUptHAcLYpJKgqna3Qw_0f5wDi57cjQVxy_UTi5ql2aY0sAYiD8BmcFxXn9R0GPgeMTGBLi4Dt587fRyug6Cs/s197/transpdark.png) repeat-x;background-position:0px -15px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #aaa;-webkit-border-radius:3px; -moz-border-radius:3px;border-radius:3px;color:#eee;text-decoration:underline;font-weight:bold; 
 </style> 

<script style='text/javascript'>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='https://krdautocrazyblog.googlecode.com/files/PhanTrangKieu2.js'></script>

Mẫu 4

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a { 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGayMVtia-57pZQj175kXniUFgFFOkCuS-AvpocUe3gULj3YBj8IwjVEbqE6tlMtX5XPoHRB_QII_Ah72JN8CEQGUBz2_DnrRTzR0LU-gPQGmPWZrYcYTwEYh3VWrAg-v3XLItb8aLMpc/s32/darkblue.png) repeat-x; 
border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px; 
margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap; 
}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGayMVtia-57pZQj175kXniUFgFFOkCuS-AvpocUe3gULj3YBj8IwjVEbqE6tlMtX5XPoHRB_QII_Ah72JN8CEQGUBz2_DnrRTzR0LU-gPQGmPWZrYcYTwEYh3VWrAg-v3XLItb8aLMpc/s32/darkblue.png) repeat-x; 
border:2px solid #5C8CFB;-webkit-border-radius:7px; 
-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none; 
}.showpageOf{ 
margin:0 8px 0 0; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGayMVtia-57pZQj175kXniUFgFFOkCuS-AvpocUe3gULj3YBj8IwjVEbqE6tlMtX5XPoHRB_QII_Ah72JN8CEQGUBz2_DnrRTzR0LU-gPQGmPWZrYcYTwEYh3VWrAg-v3XLItb8aLMpc/s32/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px; 
line-height:30px;padding:3px 10px;color:#FFF; 
}.showpagePoint { 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGayMVtia-57pZQj175kXniUFgFFOkCuS-AvpocUe3gULj3YBj8IwjVEbqE6tlMtX5XPoHRB_QII_Ah72JN8CEQGUBz2_DnrRTzR0LU-gPQGmPWZrYcYTwEYh3VWrAg-v3XLItb8aLMpc/s32/darkblue.png) repeat-x; 
margin:0 3px 0 3px;padding:3px 10px; 
line-height:30px;cursor:pointer;white-space:nowrap; 
border:2px solid #5C8CFF;-webkit-border-radius:7px; 
-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold; 
} </style> 

<script style='text/javascript'>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='https://krdautocrazyblog.googlecode.com/files/PhanTrangKieu2.js'></script>

Mẫu 5

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwRnWLJb_q1MgsMpZsTFDbSCpHQYCxyyP3d3VjOrpO9RQI-baF0TiKuFuRpofNYCH3eFE2F1pdalgYOgdf_jlXE81CxpjFpLbU2e6SWKL8LH2LcW7fDTpyLQcb_qrru0-CwsNupkgUUY/s90/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px; 
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwRnWLJb_q1MgsMpZsTFDbSCpHQYCxyyP3d3VjOrpO9RQI-baF0TiKuFuRpofNYCH3eFE2F1pdalgYOgdf_jlXE81CxpjFpLbU2e6SWKL8LH2LcW7fDTpyLQcb_qrru0-CwsNupkgUUY/s90/yellow-butt.png) repeat-x;background-position:-10px -43px; 
border:1px solid #FB5106;-webkit-border-radius:7px; 
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwRnWLJb_q1MgsMpZsTFDbSCpHQYCxyyP3d3VjOrpO9RQI-baF0TiKuFuRpofNYCH3eFE2F1pdalgYOgdf_jlXE81CxpjFpLbU2e6SWKL8LH2LcW7fDTpyLQcb_qrru0-CwsNupkgUUY/s90/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwRnWLJb_q1MgsMpZsTFDbSCpHQYCxyyP3d3VjOrpO9RQI-baF0TiKuFuRpofNYCH3eFE2F1pdalgYOgdf_jlXE81CxpjFpLbU2e6SWKL8LH2LcW7fDTpyLQcb_qrru0-CwsNupkgUUY/s90/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px; -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style> 

<script style='text/javascript'>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='https://krdautocrazyblog.googlecode.com/files/PhanTrangKieu2.js'></script>

Mẫu 6

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKxDqkzZ_89Yo9oCr8al_MtIvRqHeBypoS8TnJK4sExjap6FM9fRruo7gfyEr_WSkTA-dvJZUNE5UCExUp11YN0kPI8FJ2DXSNhG9aWKETbmWmUzoyCJAcZR7fzm-jx00pUkbpKUhYgI/s146/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKxDqkzZ_89Yo9oCr8al_MtIvRqHeBypoS8TnJK4sExjap6FM9fRruo7gfyEr_WSkTA-dvJZUNE5UCExUp11YN0kPI8FJ2DXSNhG9aWKETbmWmUzoyCJAcZR7fzm-jx00pUkbpKUhYgI/s146/greendiamond.png) repeat-x;background-position:0px -30px; 
border:2px solid #006666;-webkit-border-radius:20px; 
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKxDqkzZ_89Yo9oCr8al_MtIvRqHeBypoS8TnJK4sExjap6FM9fRruo7gfyEr_WSkTA-dvJZUNE5UCExUp11YN0kPI8FJ2DXSNhG9aWKETbmWmUzoyCJAcZR7fzm-jx00pUkbpKUhYgI/s146/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKxDqkzZ_89Yo9oCr8al_MtIvRqHeBypoS8TnJK4sExjap6FM9fRruo7gfyEr_WSkTA-dvJZUNE5UCExUp11YN0kPI8FJ2DXSNhG9aWKETbmWmUzoyCJAcZR7fzm-jx00pUkbpKUhYgI/s146/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px; -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style> 

<script style='text/javascript'>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='https://krdautocrazyblog.googlecode.com/files/PhanTrangKieu2.js'></script>

Mẫu 7

<style type="text/css">#blog-pager{height: 28px; 
padding: 10px 0 0; 
overflow:hidden; 
text-align:center; 
}.showpageArea a {text-decoration:underline; 
font-size: 16px; 
text-align: center;}.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}.showpage a:hover {text-decoration:none;background: #cccccc;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;} 
 </style> 

<script style='text/javascript'>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='https://krdautocrazyblog.googlecode.com/files/PhanTrangKieu2.js'></script>