Đánh số trang kiểu cuộn - Scroll Page Navigation cho blogger

Tôi đã thực hiện theo bài viết dưới đây (theo vnblognet.com) ,để tạo Page Navigation cho blog của tôi và đã làm thành công.

Page Navigation là thủ thuật đánh số trang cho blog và có rất nhiều kiểu dáng được các Coder thiết kế cung cấp cho bạn, trong đó kiểu đánh số trang di chuyển bằng thanh cuộn (scroll) là một thiết kế lạ và đẹp mắt.
Ngoài ra, một số thủ thuật đánh số trang chỉ hỗ trợ đánh số tới 500 thì kiểu đánh số trang di chuyển bằng thanh cuộn (scroll) này đã hỗ trợ hơn 500 page.
Thủ thuật này được abu-farhan thiết kế dựa trên “New Pugin from WP Paginator” được gọi là Paginator 3000 với ý tưởng của ecto (ecto.ru) và code bởi karaboz (karaboz.ru)
Mời bạn xem bản Demo kiểu phân trang/đánh số trang đẹp mắt này.
Thực hiện thủ thuật này bằng 3 bước sau:
Bước 1: Áp dụng kiểu mẫu.

1. Truy cập vào Blogger Dashboard > Layout > Edit Html
2. Không click vào checkbox ‘Expand Widget Templates’
3. Tìm đoạn mã code:

]]></b:skin>

và thay thế chúng bằng đoạn code sau:

.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}

.fullsize .scroll_thumb {
display:none;
}

.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
]]></b:skin>

Bước 2: Áp dụng Javascript

Tìm đoạn mã code:

</body>

Và thay thế chúng bằng đoạn code:

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</body>

Bạn có thể thay đổi các thông số:

var postperpage=7;

var numshowpage=6;

Trong đó:

Postperpage : Số bài hiển thị trên mỗi trang

numshowpage : Số trang hiển thị trên Page Navigation

Bước 3: Điều chỉnh Label

Vào Edit HTML và click vào checkbox ‘Expand Widget Templates’ rồi tìm (Ctrl-F) đoạn code:

'data:label.url'

Thay thế chúng bằng đoạn code sau:

'data:label.url + "?&max-results=7"'

Thay đổi số  7 (số bài viết hiển thị trên mỗi trang)

Như vậy bạn đã thực hiện xong các bước để tạo cho blog một phân trang đẹp với kiểu dáng mới lạ và đẹp mắt.

VnBlognet: theo thủ thuật của abu-farhan