Wikiblog: Script phân trang gọn đẹp cho Blogger

Bài viết này sẽ cung cấp cho các bạn các đoạn script phân trang cho Blogger khá gọn và đẹp.

Để sử dụng các đoạn Javascript này, hãy làm theo các bước sau:
1. Đăng nhập vào Blogger
2. Chọn Layout như hình bên dưới:

3. Click Add a Gadget và chọn HTML/Javascript

4. Tùy theo sở thích của mình, hãy copy và 1 trong 5 đoạn code bên dưới vào khung soạn thảo HTML/Javascript

Style 1

<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/AVvXsEhKCrKeW5jLYFRGRrvPyrxGp6sPjDphlHE2g002CKRwp0cSszo5nsNX8MtpUxkq3wcX61JLETa9qhTKTvlbONmf3R9x8sdFs3ZEBJT_LQQTUmL51DYG9ktGjVp6_oYNxsrGFuPSd38fgZM/s1600/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/AVvXsEhKCrKeW5jLYFRGRrvPyrxGp6sPjDphlHE2g002CKRwp0cSszo5nsNX8MtpUxkq3wcX61JLETa9qhTKTvlbONmf3R9x8sdFs3ZEBJT_LQQTUmL51DYG9ktGjVp6_oYNxsrGFuPSd38fgZM/s1600/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/AVvXsEhKCrKeW5jLYFRGRrvPyrxGp6sPjDphlHE2g002CKRwp0cSszo5nsNX8MtpUxkq3wcX61JLETa9qhTKTvlbONmf3R9x8sdFs3ZEBJT_LQQTUmL51DYG9ktGjVp6_oYNxsrGFuPSd38fgZM/s1600/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/AVvXsEhKCrKeW5jLYFRGRrvPyrxGp6sPjDphlHE2g002CKRwp0cSszo5nsNX8MtpUxkq3wcX61JLETa9qhTKTvlbONmf3R9x8sdFs3ZEBJT_LQQTUmL51DYG9ktGjVp6_oYNxsrGFuPSd38fgZM/s1600/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> <a href="http://bloggertrix.com/" target="_blank" title="Free Backlinks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipFyd7k4OFA-uviqRINWkMTF7n7BL6TOwwE4Z05TZ-GGZsPdpUxLxvLcGb3MNPvTUdMtRzfq_vwWScfV2KHGN4TVPXL-cEXEeEYvvfmvVUV9IQh243ogVd1x8qzOG1-FbKKWXPo5zCTy4/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <script style='text/javascript'> var postperpage=5; var numshowpage=3; var upPageWord="Prev"; var downPageWord="Next"; var home_page="/"; var urlactivepage=location.href; </script> <script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 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/AVvXsEgKvr4dV6hPK-AIT9X4GsaD9zsqF_F0TPn8acYIU-8RiBd_DkUUC8f5i1o62JzRCxCFRRSwe86JI5h53hZVI0HlsVU2722YJ4v8eIdbT4yuDlYvtf4gFUdgDavWa28H4l1VZAI15iTHy60/s1600/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/AVvXsEgKvr4dV6hPK-AIT9X4GsaD9zsqF_F0TPn8acYIU-8RiBd_DkUUC8f5i1o62JzRCxCFRRSwe86JI5h53hZVI0HlsVU2722YJ4v8eIdbT4yuDlYvtf4gFUdgDavWa28H4l1VZAI15iTHy60/s1600/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/AVvXsEgKvr4dV6hPK-AIT9X4GsaD9zsqF_F0TPn8acYIU-8RiBd_DkUUC8f5i1o62JzRCxCFRRSwe86JI5h53hZVI0HlsVU2722YJ4v8eIdbT4yuDlYvtf4gFUdgDavWa28H4l1VZAI15iTHy60/s1600/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/AVvXsEgKvr4dV6hPK-AIT9X4GsaD9zsqF_F0TPn8acYIU-8RiBd_DkUUC8f5i1o62JzRCxCFRRSwe86JI5h53hZVI0HlsVU2722YJ4v8eIdbT4yuDlYvtf4gFUdgDavWa28H4l1VZAI15iTHy60/s1600/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>

Style 3

<style type="text/css"> #blog-pager{padding:5px 0 !important;} .showpageArea {font-weight: bold;margin:5px;}/* 24work.blogspot.com */ .showpageArea a {text-decoration:underline;color: #fff;}/* 24work.blogspot.com */ .showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); }/* 24work.blogspot.com */ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }/* 24work.blogspot.com */ .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* 24work.blogspot.com */ .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* 24work.blogspot.com */ .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* 24work.blogspot.com */ </style> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://bloggertrix.googlecode.com/files/bloggertrix.js' type='text/javascript'></script>

Style 4

<style type="text/css"> #blog-pager{padding:5px 0 !important;} .showpageArea {font-weight: bold;margin:5px;}/* 24work.blogspot.com */ .showpageArea a {text-decoration:underline;color: #fff;}/* 24work.blogspot.com */ .showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* 24work.blogspot.com */ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /*24work.blogspot.com */ .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* 24work.blogspot.com */ .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* 24work.blogspot.com */ .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* 24work.blogspot.com */ </style> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://bloggertrix.googlecode.com/files/bloggertrix.js' type='text/javascript'></script>

Style 5

#blog-pager{padding:5px 0 !important;} .showpageArea {font-weight: bold;margin:5px;}/* 24work.blogspot.com */ .showpageArea a {text-decoration:underline;color: #fff;}/* 24work.blogspot.com */ .showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #f85032; background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); }/* 24work.blogspot.com */ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }/* 24work.blogspot.com */ .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* 24work.blogspot.com */ .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* 24work.blogspot.com */ .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* 24work.blogspot.com */ </style> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://bloggertrix.googlecode.com/files/bloggertrix.js' type='text/javascript'></script>

Style 6

<style type="text/css"> #blog-pager{padding:5px 0 !important;} .showpageArea {font-weight: bold;margin:5px;}/* 24work.blogspot.com */ .showpageArea a {text-decoration:underline;color: #fff;}/* 24work.blogspot.com */ .showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #ffb76b; background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); }/* 24work.blogspot.com */ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* 24work.blogspot.com */ .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* 24work.blogspot.com */ .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* 24work.blogspot.com */ .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* 24work.blogspot.com */ </style> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=3; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://bloggertrix.googlecode.com/files/bloggertrix.js' type='text/javascript'></script>

5. Thay đổi thông số theo ý muốn

var postperpage=5;
=> Thay 5 bằng số post mà bạn muốn hiển thị trên một trang

var numshowpage=3;
=> Thay 3 bằng số lượng trang mà bạn muốn hiển thị trên thanh page navigation này

6. Save lại và xem kết quả

Wikiblog

Pages

Script phân trang gọn đẹp cho Blogger