Phân trang cho blog

Phân trang cho blog

Phân trang cho blog có rất nhiều kiểu và mẫu mã khác nhau.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.Nếu các bạn muốn add vào mã nguồn blog thì cũng không khó lắm,chỉ mất chút thời gian thôi.(Hướng dẫn luôn các bạn cách này,đó là phần code trong thẻ <style>...</style> các bạn dán vào trên đoạn code ]]></b:skin> trong mã nguồn. Phần còn lại các bạn dán vào trên thẻ </body> hoặc vị trí tương ứng,vậy là ok).

(*) Có nhiều mẫu nên mình sẽ update dần các mẫu đẹp nhất cho các bạn.

Mẫu 1: Khá đẹp mắt và mình đang dùng:

<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://lh4.googleusercontent.com/-1wuhDWcQiDk/UU8dhj9cRgI/AAAAAAAAT0k/_7g6VhAI3Ns/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://lh3.googleusercontent.com/-SPOGNwpFqmE/UU8dhpKjpzI/AAAAAAAAT0o/Ka7AM9Syc-s/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: Cũng khá đẹp:

<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>

(*) Các mẫu khác sẽ cập nhật thêm nên các bạn quan tâm hãy review để update nhé.

Chúc các bạn chọn được style phân trang cho blog của mình !

Nguồn: Phần mềm máy tính