Cài đặt Next Post và Previous Post cho blogspot

Khi lướt xem một số blog được xây dựng trên nền tảng Wordpress, kéo xuống đáy trang hẳn bạn sẽ thấy các liên kết Next Post, Previous Post lần lượt hiển thị tiêu đề bài viết kế tiếp và bài viết trước (ví dụ ở trang Mothuthuat.com). Đặc điểm này rất cần thiết song đối với blogspot thì dường như chưa phổ biến. Liệu blogspot có thể làm được điều này chăng?

Gần đây, mình được biết trang Bloggersentral.com đã có thủ thuật thay thế các liên kết Newer Posts, Older Posts bằng tiêu đề bài viết, sử dụng jQuery tùy biến từ một thủ thuật tương tự của trang Etblue. Tuy nhiên thủ thuật ở 2 trang nói trên đều áp dụng cho tất cả các kiểu trang (gồm trang chủ, trang nhãn, trang lưu trữ và trang item). Điều chúng ta quan tâm là chỉ áp dụng tính năng này cho riêng các trang item (là các trang bài viết), còn các trang index (trang chủ, trang nhãn và trang lưu trữ) thì giữ nguyên kiểu phân trang thông thường.

Mình nhận thấy thật cần thiết phải có tính năng này cho blogspot để áp dụng rộng rãi hơn và đã thử nghiệm thành công trên Thủ thuật Blogger như bạn có thể thấy ở phần đáy trang vậy. Ở đây mình chia ra 2 trường hợp: đối với blogspot tiếng Việt và đối với blogspot tiếng Anh (do đối với blogspot mình có thể sử dụng thêm cách dùng Javascript mà không dùng jQuery).



Để cài đặt tính năng này, bạn hãy Đă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>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

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

Trường hợp 1: Đối với blogspot tiếng Việt.

Bước 1: 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:newerPageUrl'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='prev_next'>

<p class='next'>

<span>Next post:</span> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl'>

<data:newerPageTitle/>

</a></p>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

var newerLink = $("a.blog-pager-newer-link").attr("href");

$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {

var newerLinkTitle = $("a.blog-pager-newer-link").text();

$("a.blog-pager-newer-link").text(newerLinkTitle);

});

});

//]]>

</script>

</div>

<b:else/>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Về trang trước'>&#171; Prev</a>
</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>

<b:if cond='data:olderPageUrl'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='prev_next'>

<p class='previous'>

<span>Previous post:</span> <a class='blog-pager-older-link' expr:href='data:olderPageUrl'>

<data:olderPageTitle/>

</a></p>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function(){

var olderLink = $("a.blog-pager-older-link").attr("href");

$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {

var olderLinkTitle = $("a.blog-pager-older-link").text();

$("a.blog-pager-older-link").text(olderLinkTitle);

});

});

//]]>

</script>

</div>

<b:else/>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Đến trang sau'>Next &#187;</a>
</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 ]]></b:skin>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#blog-pager {margin:0px;padding:10px 0 20px;float: left;}
.prev_next p {float:left;text-align:left}
.prev_next span {font-size:12px;text-transform: uppercase;}
.prev_next a{text-decoration: none;color: #069;}
</style>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#blog-pager {display:none}
</style>
<b:else/>
<style>

Đặt code CSS vừa bị cắt vào đây nha

</style>
</b:if></b:if>

Lưu Template là xong.

Trường hợp 2: Đối với blogspot tiếng Anh.

Riêng đối với blogspot tiếng Anh, ngoài phương pháp ở trên, có thể sử dụng thêm một phương pháp khác. Mình có thể sử dụng javascript để chuyển hóa URL bài viết thành tiêu đề bài viết, áp dụng theo các bước sau đây:

Bước 1. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
function writeTitle(navURL) {
var parts = navURL.split(&#39;/&#39;);
auxiliar=parts[parts.length-1]
auxiliar = auxiliar.replace(/-/g,&quot; &quot;);
namePagi = auxiliar.replace(&quot;.html&quot;,&quot;&quot;);

var firstLetter = namePagi.substring(0, 1).toUpperCase();
var theRest = namePagi.substring(1, namePagi.length).toLowerCase();
namePagi = firstLetter + theRest;

document.write(namePagi);
}
</script>

Bước 2. Thay đoạn code phân trang bằng đoạn code bên dưới:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>

<b:if cond='data:blog.pageType == "item"'>

<div class='prev_next'>

<p class='next'>

<span>Next post:</span> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl'>

<data:newerPageTitle/>

<script language='javascript'>

var navURL = &quot;<data:newerPageUrl/>&quot;;

writeTitle(navURL)

</script>

</a></p>

</div>

<b:else/>

<a class='blog-pager-newer-link'
expr:href='data:newerPageUrl'
expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>

<b:if cond='data:olderPageUrl'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='prev_next'>

<p class='previous'>

<span>Previous post:</span> <a class='blog-pager-older-link' expr:href='data:olderPageUrl'>

<data:olderPageTitle/>

<script language='javascript'>

var navURL = &quot;<data:olderPageUrl/>&quot;;

writeTitle(navURL)

</script>

</a></p>

</div>

<b:else/>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Back to Previous Page'>&#171; Prev</a>
</b:if></b:if>

</div>

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