2/6/13

Code phân trang đẹp cho blogspot - Thủ thuật

Làm thế nào để phân trang cho blogger?
Code phân trang cho blogger có khá nhiều, những mẫu khác nhau. Ở bài viết hướng dẫn thủ thuật blogger này mình giới thiệu tới các bạn code phân trang đẹp và ổn định cho blogspot.
Beautiful Page Navigation Widget For Bolgger
CÁCH LÀM THỦ THUẬT:
1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/javascript (Chú ý, tiện ích nên thêm ở dưới Post - xem hình dưới)
Widget blogspot
2. Dán đoạn Code dưới đây vào tiện ích vừa thêm
CODE:

<style>#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/AVvXsEgZ2S6FrEY7uAC6R_GeuIyVLYDB8SwpxulqEiCzCuvxurFKXtDUUncY3V8GINNDMqoRCKUvhZ38nKBFLmV8rjH7Ko1GAb907nn8M2R0QGYzgac5uk5XlWXuENny46jVChJ6xLtJIcPLNqo/s1600/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/AVvXsEimkmoPQRO1wdgyyjKSiKSXKx_d2rxwFgC03DAZbRmByImb-by0catRvLC53GJNWmp2TPJfIMLji5Nyg2YG4pvvWIJvXUnsesqmgy7w4su5wHfRjL2O3WEd2G-tnQgk4CKbjR4siBZjvhQ/s1600/nava.jpg) repeat-x;border:1px solid #000000;color:#fff;margin:2px;padding:6px 10px 5px;text-shadow: 1px 0 1px #000;}</style><script type='text/javascript'>var postperpage=10;var numshowpage=5;var upPageWord="Prev.";var downPageWord="Next";var urlactivepage=location.href;var home_page="/"</script><script src='http://itviet360.googlecode.com/files/itviet360-page-navi.js' type='text/javascript'></script>

Trong đó có các tùy chỉnh cần lưu ý:
var postperpage=10: Số bài viết trên mỗi trang (nên trùng với cài đặt trong bài đặt của Blogger)
var numshowpage=5: Số trang hiển thị (Ví dụ 1 2 3 4 5)
var upPageWord="Prev.": Chữ để trở về trang trước (Ở đây là Prev)
var downPageWord="Next": Chữ để về trang sau (Ở đây là Next)



Chúc các bạn vui vẻ !

0 nhận xét:

Post a Comment