Blogspot - thay thế các liên kết Newer Posts, Older Posts bằng tiêu đề bài viết

Có 2 thủ thuật tương tự tại blog nước ngoài:

Tuy nhiên thủ thuật này á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).

Một thủ thuật tương tự được giới thiệu trên Thủ thuật Blogger áp dụng thủ thuật này chỉ trên trang bài viết và thay jQuery bằng javasctipt Mời các bạn tham khảo:

Tìm đoạn

<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>
<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 == "item"'>
<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 + "_blog-pager-newer-link"' title='Về trang trước'>« Prev</a>
</b:if></b:if>
<b:if cond='data:blog.pageType == "index"'>
<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 == "item"'>
<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 + "_blog-pager-older-link"' title='Đến trang sau'>Next »</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 == "item"'>
<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 == "static_page"'>
<style>
#blog-pager {display:none}
</style>
<b:else/>
<style>
Đặt code CSS vừa bị cắt vào đây
</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('/');
auxiliar=parts[parts.length-1]
auxiliar = auxiliar.replace(/-/g," ");
namePagi = auxiliar.replace(".html","");
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 = "<data:newerPageUrl/>";
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 == "index"'>
<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 == "item"'>
<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 = "<data:olderPageUrl/>";
writeTitle(navURL)
</script>
</a></p>
</div>
<b:else/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' title='Back to Previous Page'>« Prev</a>
</b:if></b:if>
</div>
<div class='clear'/>
</b:includable>

Thanks huynh-nhat-ha!