【教學】Blogger 改造「較新的文章」「較舊的文章」：顯示文章標題、位置往前移到文章之後

Customise the "Newer & Older Posts" Links on Blogger

Blogger預設顯示「較舊的文章」和「較新的文章」

要加入顯示標題的功能，首先加入Java Script

後台「版面配置」→「新增小工具」→「HTML/JavaScropt」

加入以下內容：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js?attredirects=0&amp;d=1"></script>

<script type="text/javascript">
$(document).ready(function(){ 

 var olderLink = $("a.blog-pager-older-link").attr("href");
 $(".blog-pager-older-title").load(olderLink+" .post-title:first", function() {
  $(".blog-pager-older-title").text($(this).text());
 });

 var newerLink = $("a.blog-pager-newer-link").attr("href");
 $(".blog-pager-newer-title").load(newerLink+" .post-title:first", function() {
  $(".blog-pager-newer-title").text($(this).text());
 });

});
</script>

然後到後台「主題」→「編輯 HTML」，找到以下段落：

<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>
<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>

修改為

<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'><span class="blog-pager-newer-title"></span></a>
<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'><span class="blog-pager-older-title"></span></a>

如此就能將，「較舊的文章」和「較新的文章」替換成文章標題，可以自由加上「上一篇文章：」或「下一篇文章：」等文字。

如果覺得對「較舊的文章」和「較新的文章」的位置不滿意，想要往前改到文章尾端的話，可以用以下方法。

後台「主題」→「編輯 HTML」，找到以下段落：

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>

在這個段落之前加入

    <!-- 修改下一篇文章位置 -->   
    <b:if cond='data:newerPageUrl'> 
        <a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
       	 下一篇文章&#65306;
    	<span class='blog-pager-newer-title'/>
   	</a>   
    </b:if>  

再加入css美化之後，效果就如本頁下方所示。