Trước đây, mình đã từng hướng dẫn bạn cài đặt Next Post và Previous Post cho blogspot, theo đó giúp bạn thay đổi các liên kết Newer Posts, Older Posts
ở các trang item thành các tiêu đề bài viết như phong cách ở các trang
Wordpress. Thủ thuật này có sử dụng thư viện jQuery. Hôm nay mình sẽ
giúp bạn thực hiện một thủ thuật có chức năng tương tự song chỉ sử dụng
đến Javascript.

Xem DEMO.



Để cài đặt tính năng này bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn
Expand Widget Templates. Dùng từ khóa blog-pager tìm đến đoạn code liên
quan đến thuật phân trang như bên dưới:

Code:

<blockquote><b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId +
"_blog-pager-newer-link"'
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId +
"_blog-pager-older-link"'
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable></blockquote>

Thay đoạn code ở trên bằng đoạn code bên dưới:

Code:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// Next Post and Previous Post Script by www.thuthuatblogger.info
function search(json,urlsearch) {

max_post=500;

txt_next='Next Post';
txt_previous='Previous Post';
var prev_posturl='';
var prev_posttitle='';
var next_posturl='';
var next_posttitle='';
post_found=0;
var i=0;
var j=0;

for (i = 0; i < max_post; i++) {
var post = json.feed.entry[i];
var posttitle = post.title.$t;
var posturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < post.link.length; k++) {
if (post.link[k].rel == 'alternate') {
posturl = post.link[k].href;
break;
}
}

if (posturl == urlsearch) {
j=i;
i=max_post;
post_found=1;
}
else{
next_posturl=posturl;
next_posttitle=posttitle;
}
}

if (post_found == 1) {
j=j+1;
post = json.feed.entry[j];
prev_posttitle = post.title.$t;
for (var k = 0; k < post.link.length; k++) {
if (post.link[k].rel == 'alternate') {
prev_posturl = post.link[k].href;
break;
}
}
}

if (next_posturl != '') {
entry_next_post = '<br /><span id="blog-pager-newer-link">' +
 txt_next + ': <a href="' + next_posturl + '" title="' +
next_posttitle + '" class="blog-pager-newer-link">' + next_posttitle +
 '</a></span>';

document.write(entry_next_post)
}

if (prev_posturl != '') {
entry_prev_post = '<br /><span id="blog-pager-older-link">' +
 txt_previous + ': <a href="' + prev_posturl + '" title="' +
prev_posttitle + '" class="blog-pager-older-link">' + prev_posttitle +
 '</a></span><br />';

document.write(entry_prev_post)
}

}

function searchpost(json) {
url=document.URL;
search(json,url);
}
//]]>
</script>
<script src='/feeds/posts/default?alt=json-in-script&callback=searchpost'>
</script>
<b:else/>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId +
"_blog-pager-newer-link"'
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId +
"_blog-pager-older-link"'
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Bước 2. Dùng từ khóa blog-pager tìm đến code CSS liên quan đến phân trang, cắt hết chúng rồi đặt đoạn code như sau vào sau dòng ]]>.

Code:

<b:if cond='data:blog.pageType == "item"'>
<style>
#blog-pager {margin:0px;padding:10px 0 20px;float: left}
#blog-pager-newer-link, #blog-pager-older-link {float:left;text-align:left}
</style>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<style>
#blog-pager {display:none}
</style>
<b:else/>
<style>
[color=red]Đặt code CSS vừa bị cắt vào đây nha[/color]
</style>
</b:if></b:if>

Lưu Template là xong.