Ứng Dụng Next Post và Previous Post theo phong cách Wordpress

nguồn bài viết

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ếtNewer 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:

<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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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>

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

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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&amp;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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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>