改造 ~ 博客的文章翻頁導覽列

   給較新和較舊文章的翻頁導覽列，加上、標題和圖片

雖然、瀏覽日誌不用像看小說那樣，需要逐頁翻頁閱讀、不過加減有人會用到吧 ?!，現在就讓我們來幫他打扮一下，使它更加有吸睛的效果。

假如、你使用的是新主題範本，沒有這翻頁功能 ~ 請看之前寫的這篇文章 : 新的 Blogger 佈景主題
 注意、這篇所使用的較新和較舊文章連結 class-name，newerPlink 和本文 blog-pager-newer-link 不一樣...

進入 >> 後台管理 >> 版面配置 >> 新增一個「HTML/JavaScript」小工具

複製以下的 HTML、樣式、程式碼，填入內容裡 >> 最後按下儲存 ~ OK


請檢查範本或其他小工具裡，看看是否已有安裝過 jQuery 程式庫，如果沒有安裝過請多加入以下，這行程式碼。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

在下面的文字框內點一下，複製 程式碼：
<ul id="page_con"> <li class="newer-li cx1"><img src="https://pic.pimg.tw/e717/1610276405-1236476109-g.jpg" /></li> <li class="newer-li cx2"><a>上一篇 較新文章<br /><h3></h3></a></li> <li class="older-li cx1"><a>下一篇 較舊文章<br /><h3></h3></a></li> <li class="older-li cx2"><img src="https://pic.pimg.tw/e717/1610276405-1236476109-g.jpg" /></li> </ul> <!-- 樣式表 --> <style type="text/css"><!-- #page_con{display:none; overflow:hidden; align-items: center; margin:5px 0; border:1px solid #999; padding:0px; width:100%; flex-wrap:wrap } #page_con li { text-align: center; list-style-type:none; } .newer-li.cx1, .older-li.cx2{flex:0 0 110px;} .newer-li.cx2, .older-li.cx1{flex:1 0 30%;} @media screen and (max-width:600px){ .newer-li.cx2, .older-li.cx1{flex:1 0 70%;}} #page_con li h3{color:#f6e; transition:.6s; margin-top: 10px;} #page_con li a{display:block; padding: 8px;} #page_con li:hover a{color:#6829fa; background:#22222220;} #page_con li:active a{background:#22666620; transition:.3s;} #page_con li img{height:110px; width:110px; padding:2px;} --></style> <script type="text/javascript"> jQuery(function(){ if(document.getElementById('comments')){ var newerLink = $("#blog-pager .blog-pager-newer-link").attr("href"); var olderLink = $("#blog-pager .blog-pager-older-link").attr("href"); if(olderLink == newerLink){return;} $('#page_con').css('display','flex'); $('#blog-pager').html($('#page_con')); if(newerLink){ $.ajax({ url: '/feeds/posts/default?alt=json-in-script&path='+ newerLink, type: 'get', dataType: 'jsonp', success: function(da) { if(da.feed.entry[0].content.$t.match(/<img\S*.[^>]*>/)){ $("#page_con .newer-li.cx1").html(da.feed.entry[0].content.$t.match(/<img\S*.[^>]*>/)); } $('#page_con .newer-li h3').text(da.feed.entry[0].title.$t); $("#page_con .newer-li a").attr("href",newerLink); } }); } else{$("#page_con .newer-li").css('visibility','hidden');} if(olderLink){ $.ajax({ url: '/feeds/posts/default?alt=json-in-script&path='+ olderLink, type: 'get', dataType: 'jsonp', success: function(ax) { if(ax.feed.entry[0].content.$t.match(/<img\S*.[^>]*>/)){ $("#page_con .older-li.cx2").html(ax.feed.entry[0].content.$t.match(/<img\S*.[^>]*>/)); } $('#page_con .older-li h3').text(ax.feed.entry[0].title.$t); } }); $("#page_con .older-li a").attr("href",olderLink); } else{$("#page_con .older-li").css('visibility','hidden');} } }); </script> 不懂語法的格友請按  >>  

  假如你會 CSS 可以自行修改樣式唷!!

還有、 網站資訊提供 ~ 允許網誌動態消息 》 ( 要設定成 ) 》完整