Blogger- Replace Older Post, Newer Post to post title

Đây là bài viết của DUYPHAM, hướng dẫn cách thay đổi dòng chữ mặc định "Bài đăng cũ hơn" & "Bài đăng mới hơn" thành tiêu đề bài viết tướng ứng với bài cũ bài mới đó. Theo DUYPHAM thì đây là cách tối ưu & nhanh chóng hơn cách cách đã có tại thời điểm 2012.
Bước 1:
Tìm thẻ <b:includable id='post' var='post'>...</b:includable> và thêm vào sau nó đoạn mã dưới đây:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javaScript'>var newer='';older='';timestampISO='<data:post.timestampISO8601/>';timestampISO=timestampISO.replace(/\+/g,'%2B');</script>
</b:if>

Bước 2:
Tìm thẻ <b:include name='nextprev'/> và thay thế nó bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:olderPageUrl'>
<p>
<data:olderPageTitle/>: <a expr:href='data:olderPageUrl' id='Blog1_blog-pager-older-link' rel='prev'><script type='text/javaScript'>older='y';</script></a>
</p>
</b:if>
<b:if cond='data:newerPageUrl'>
<p>
<data:newerPageTitle/>: <a expr:href='data:newerPageUrl' id='Blog1_blog-pager-newer-link' rel='next'><script type='text/javaScript'>newer='y';</script></a>
</p>
</b:if>
<script type='text/javaScript'>
//<![CDATA[
function links(json){var newer_link='';older_link='';total_posts=json.feed.openSearch$totalResults.$t;start_index=json.feed.openSearch$startIndex.$t;items_perpage=json.feed.openSearch$itemsPerPage.$t;if(items_perpage==1){older_link=json.feed.entry[0].title.$t}else{newer_link=json.feed.entry[0].title.$t;if((total_posts-start_index)>1){older_link=json.feed.entry[2].title.$t}}if(older=='y'){document.getElementById('Blog1_blog-pager-older-link').innerHTML=older_link}if(newer=='y'){document.getElementById('Blog1_blog-pager-newer-link').innerHTML=newer_link}}function link_total_posts(json){var link_total_posts=json.feed.openSearch$totalResults.$t;if(link_total_posts!=1){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+(link_total_posts-1)+'&max-results=3&callback=links\"><\/script>')}else{document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=links\"><\/script>')}}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&published-min='+timestampISO+'&max-results=0&callback=link_total_posts\"><\/script>');
//]]>
</script>
</div>
<div class='clear'/>
<b:else/>
<b:include name='nextprev'/>
</b:if>

Kết quả sẽ được như hình.

---

Tuy nhiên một số trường hợp có bạn không muốn hiển thị tiêu đề bài viết cái dài cái ngắn. Nên mình thêm một chút css vào code của DUYPHAM. Để khi di chuột vào"Replace Older Post/Newer Post" nó sẽ hiện ra tiêu đề bài viết tương ứng. Tại bước 2 ta thêm đoạn code này:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.navi {position: absolute;}
.left {left: 10px;}
.right {right:10px}
.navi span {display:none;}
.navi:hover span{display:block;z-index:99;padding:10px;background:#E8E8FF;position: absolute;bottom:20px;}
</style>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:olderPageUrl'>
<div class="navi left">
<data:olderPageTitle/><span><a expr:href='data:olderPageUrl' id='Blog1_blog-pager-older-link' rel='prev'><script type='text/javaScript'>older=&#39;y&#39;;</script></a></span>
</div>
</b:if>
<b:if cond='data:newerPageUrl'>
<div class="navi right">
<data:newerPageTitle/><span><a expr:href='data:newerPageUrl' id='Blog1_blog-pager-newer-link' rel='next'><script type='text/javaScript'>newer=&#39;y&#39;;</script></a></span>
</div>
</b:if>
<script type='text/javaScript'>
//<![CDATA[
function links(json){var newer_link='';older_link='';total_posts=json.feed.openSearch$totalResults.$t;start_index=json.feed.openSearch$startIndex.$t;items_perpage=json.feed.openSearch$itemsPerPage.$t;if(items_perpage==1){older_link=json.feed.entry[0].title.$t}else{newer_link=json.feed.entry[0].title.$t;if((total_posts-start_index)>1){older_link=json.feed.entry[2].title.$t}}if(older=='y'){document.getElementById('Blog1_blog-pager-older-link').innerHTML=older_link}if(newer=='y'){document.getElementById('Blog1_blog-pager-newer-link').innerHTML=newer_link}}function link_total_posts(json){var link_total_posts=json.feed.openSearch$totalResults.$t;if(link_total_posts!=1){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+(link_total_posts-1)+'&max-results=3&callback=links\"><\/script>')}else{document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=links\"><\/script>')}}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&published-min='+timestampISO+'&max-results=0&callback=link_total_posts\"><\/script>');
//]]>
</script>
</div>
<div class='clear'/>
<b:else/>
<b:include name='nextprev'/>
</b:if>

Kết quả như hình: (bạn tự CSS để phù hợp hơn)

Tham khảo từ duypham.info

1. Thay Older Post, Newer Post bằng tiêu đề bài viết