Blogger 的新範本－❤️灰鴿❤️

找回走失的綿羊，改造 Blogger 翻頁區塊的樣式

如果您使用的是新的Blogger響應式佈景主題 ( Soho，Contempo，Notable和Emporio ) 您可能已經注意到，在新主題中，沒有Home，Next和Previous 連結，也沒有留言筆數，不知道為什麼 Blogger 要刪除。

在本文，我們將討論要如何在新的自適應Blogger主題中，找回走失的綿羊，顯示Blogger的上一個文章和下一個文章連結。

每次在進行更改範本之前，必須要先備份好當前的Blogger模板(範本)，以防失敗後可以復原。

顯示 ~ 留言總數

步驟 1 : 進入 ~ 主題 >> 1按、自訂旁的3角型 >> 2 備份 (範本) >> 3 編輯HTML >> 進入編輯範本

步驟 2 : 編輯範本，將游標點按在範本編輯器內，同時按下 Ctrl + F ，輸入 id='commentPicker' ，按下 Enter 鍵，搜尋到這行標籤之後，貼上以下代碼行

<b:if cond='data:post.numberOfComments > 0'><p style='margin:0 20px 6px'>留言 ( <data:post.numberOfComments/> )</p></b:if>

顯示上下篇文章

步驟 1 : 編輯HTML >> 進入編輯範本模式，同時按下 Ctrl + F ，輸入 blog1 ，按下 Enter 鍵，搜尋到這行標籤

/tmp/phpbuUNk6

在</b:includable> 之前添加這行代碼 <b:include cond='data:view.isSingleItem' name='postPagination'/>

步驟 2 : 同時按下 Ctrl + F ，輸入 postPagination ，按下 Enter 鍵，搜尋到這行標籤
/tmp/phpcWX6lt

在<b:includable id ='postPagination'>與</b:includable> 之間，用以下代碼，更換原來的代碼

更換之後，現在看起來像這樣：

<b:includable id='postPagination'>
<div class='blog-pager container' id='blog-pager'>
<b:if cond='data:newerPageUrl'><a expr:href='data:newerPageUrl' class='newerPlink'>⭐ 上一頁</a></b:if>
<b:include cond='data:view.url != data:blog.homepageUrl' name='super.homePageLink'/>
<b:if cond='data:olderPageUrl'><a expr:href='data:olderPageUrl' class='olderPlink'>下一頁 ⭐</a></b:if>
</div>
</b:includable>

步驟 3 : 同時按 Ctrl + F ，輸入 #blog-pager a，按下 Enter 鍵，找到之後

幫連結加上前後空間 ~ margin:0 30px;

#blog-pager a{
cursor:pointer;
margin:0 30px;
}

儲存後離開

完成後的樣式 /tmp/phpvekUli

每一種模板(範本)的位置，可能都會有落差，請自行調整 ~

-----------------------

浮貼在兩側的 CSS 碼

#blog-pager{ margin-top:1em;}

#blog-pager a{margin:0 30px;}
#blog-pager a:hover{color:#f38}

body.item-view #blog-pager a{
color:black;
font-size:18px;
cursor:pointer;
padding:20px 10px 8px;
clip-path: polygon(0 20%, 50% 0, 100% 20%, 100% 100%, 0 100%);
background:rgba(20,20,20,0.3);
border-radius: 8px;
position: fixed;
top:48%;
width:100px;
}
body.item-view #blog-pager a.newerPlink{transform: rotate(-90deg); left:-30px;}
body.item-view #blog-pager a.olderPlink{transform: rotate(90deg); right:-30px;}

貼在文章裙襬，上、下一個文章連結 +圖片+標題的程式碼

<li style="flex:0 100px"><img src="https://pic.pimg.tw/e717/1610276405-1236476109-g.jpg" /></li>
<li style="flex:1 30%">🔺上一篇較新文章<br /><a><h3></h3></a></li>
<li style="flex:1 30%">🔻下一篇較舊文章<br /><a><h3></h3></a></li>
<li style="flex:0 100px"><img src="https://pic.pimg.tw/e717/1610276405-1236476109-g.jpg" /></li>
</ul>

<style type="text/css"><!--

#page_con li {
text-align: center;
list-style-type:none;
}

#page_con li h3{color:#f6e; transition:.6s; margin-top: 10px;}
#page_con li a:hover h3{color:#6829fa;}

#page_con li img{max-height:110px; max-width:110px !important; padding:3px;}

--></style>

<script type="text/javascript">

jQuery(function(){

var newerLink = $("#blog-pager a.newerP-link").attr("href");
var olderLink = $("#blog-pager a.olderP-link").attr("href");

if(newerLink == olderLink){ $('#page_con').css('display','none');}

else{ $('.post-footer').append($('#page_con'));

if(newerLink){
$("#page_con li:eq(0)").load(newerLink+" img:eq(0)", function(y) {
$('#page_con li:eq(1) h3').text($('h3.post-title.entry-title' , y).text());
$("#page_con li:eq(1) a").attr("href",newerLink);
}); }
else{ $("#page_con li:eq(0),#page_con li:eq(1)").css('visibility','hidden');}

if(olderLink){
$("#page_con li:eq(3)").load(olderLink+' img:eq(0)', function(x) {
$('#page_con li:eq(2) h3').text($('h3.post-title.entry-title' , x).text());
$("#page_con li:eq(2) a").attr("href",olderLink);
}); }
else{ $("#page_con li:eq(2),#page_con li:eq(3)").css('visibility','hidden');}

}

});

</script>

這個小工具，沒有判讀，網頁類型 pageType「index」，所以、適用我修改的新範本

每一種佈景主題的圖片、 IMG 可能不會是放在第一個，因此、須自行測試，圖片 img:eq(0)，0為第一張，img:eq(1)，1為第2張; ，以此類推 ...

完成後的樣式 /tmp/phpZvbaQe