在這個「Blogger社群討論串」討論的主題為 "Blogger 較新的文章與較舊的文章之連結"，也就是 "上一篇/下一篇文章" 的功能(不是指首頁或搜尋頁面的 "上一頁/下一頁" 分頁功能)。在文章頁面時，這兩個 Blogger 在頁面下方所設計的按鈕，說實在一直以來認為是個滿雞肋的擺設。試想，時間有限的情況下訪客多半是性急的，豈能奢望訪客有閒情逸致像玩刮刮樂般，來點點看「較新的文章/較舊的文章」會出現什麼寶藏？或許在十年前部落格剛興起的時候，網站數量還不多，在當時的時空背景，訪客的確有可能如此逛網站。但在資訊爆炸的今天，沒有先把牛肉搬出來，是不會有人買單的。想讓訪客點擊「較新的文章/較舊的文章」，唯有先把文章標題秀出來，這才是一個正確的網頁設計。
<< 請注意！本篇文章含會員限定內容 >>
不過在 Blogger 要做到這件事不太容易，以下大致先說明一下原理，想直接安裝「改造較新/較舊文章按鈕」，請直接跳「二、安裝程式碼」，安裝完的效果大致像下圖這樣──
2014.8.10 提醒：網路上可找到一些「較新/較舊文章按鈕改造」的程式，或是很多非官方範本都有內建這個功能，但除了本文以外的程式，都會對 Blogger 流量造成誤判、虛漲，詳情請參考這篇「為何瀏覽數會爆增？揭開 Blogger 快樂流量的真面目」。
一、取得文章標題的原理
從「Blogger 範本__(三)文章及留言區塊的程式碼」→「一、上下頁區塊」，可找到較新/較舊文章按鈕的程式碼。很可惜的是我們線索很少，只能從「較新/較舊文章的連結」來想辦法找到對應的文章標題。
從「Blogger 最新文章」→「一、從 Json 資料找縮圖」，我們可以瞭解一些 Json 的概念。從 Json 中能找到縮圖資料，自然也能找到文章標題。但我們不可能為了找到某篇文章的標題，而讀取整個網站的 feed，當文章很多時，載入速度會是個悲劇。
所幸 Blogger API 提供了一個參數「path」，可以經由文章網址來撈 feed 資料，利如這篇「使用 PICASA 的三大好處」網址為：
http://wayne-fu.blogspot.com/2013/10/google-drive-picasa-photo-space.html那麼在網址輸入以下字串可得到該篇文章的 feed(json格式)：
http://wayne-fu.blogspot.com/feeds/posts/summary?alt=json-in-script&path=/2013/10/google-drive-picasa-photo-space.html在得到的 json 格式資料裡面，文章標題字串的位置就在 json.feed.entry[0].title.$t。如果曾研究過「最新文章」或「最新回應」的程式碼，相信這樣的解說足以知道如何操作了。
二、安裝程式碼
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋
如果對效果不滿意想修改程式碼參數，請繼續往下看。
三、修改參數
首先聲明一下，為了讓大多數使用者安裝方便，將 CSS 也寫入了程式碼之中，這樣可以少幾個安裝步驟，因為對於 Blogger 範本不熟的使用者，只要多一個步驟，就是多了一分安裝失敗的可能性。而看得懂原始碼的資深讀者，可以自行修改 CSS 樣式，或是將 CSS 搬到
以下說明可以修改的參數，請對照程式碼行號──
F：請根據自己的版面寬度，調整文章標題區塊的寬度，例如想要加寬可以嘗試 "300px" 等數值。
G：較新/較舊文章按鈕中間夾著一個首頁按鈕，預設值 "N" 會將首頁按鈕隱藏，若想顯示首頁按鈕請改為 "Y"。
另外，若想將首頁按鈕改為圖案，可參考「Blogger 範本__(三)文章及留言區塊的程式碼」→「一、上下頁區塊」，將代表「首頁」的字串改為圖檔的 HTML 碼即可。
H、I：這兩行的圖案網址，可置換為自訂圖案網址；如果不想出現圖案，將網址字串清空，留下兩個雙引號 "" 即可。
另外，如果要使用預設圖案，網址字串的 "s50" 可經由調整數值，更改圖案大小，例如改為 "s40" 就變的比較小、改為 "s60" 就變的比較大，其原理可參考「Blogger 熱門文章＋任意尺寸縮圖」→「一、PICASA 圖片規則」。
四、小結
開頭所提的「Blogger社群討論串」，+Pan Kuan 提供了其他部落格會使用的浮動按鈕樣式資訊，可將「較新/較舊文章按鈕」改為左、右箭頭的浮動按鈕。有了本文從文章 feed 取得文章標題的技巧後，下一篇將會修改這兩個按鈕，讓其功能更為實用。
2014.8.5 補充：這篇「Blogger行動版加入 上一篇/下一篇 文章標題」，使用本文的程式碼修改後，在行動版呈現類似效果，有需要的讀者可以參考。
更多實用工具：
喔耶！感謝Wayne，我改成功了，我當時還一篇篇慢慢手動加入是在加心酸的嗎？哈哈！
回覆刪除不過若在整個文章分類下閱讀好像就不能帶入分類下一篇，只能抓到全blogger裡的上一篇下一篇是吧？！所以我手動加連結還是有用處在的啦！
謝謝wayne先~~~
<5999191715577743276>(以上內容請勿刪除,從括號之後開始留言)不客氣～沒看到你手動加內容的文章畫面，不過有相關文章還是要手動加比較好啊，畢竟會捲到頁面底部的機率較低。
回覆刪除你是指「指首頁或搜尋頁面的 "上一頁/下一頁" 分頁功能」嗎？開頭有說只針對「上一篇/下一篇文章」功能來修改，如果想改「上一頁/下一頁」的樣式，直接修改範本就行了～另外也謝謝你之前提供的相關資訊 :)
你好～成功加入這段程式碼了，謝謝你！
回覆刪除還想請教兩個問題，第一是因為文章標題較長會分成兩行，文字對齊預設是置中，這個有辦法修改嗎？第二是前一篇後一篇中間的圓點點要怎麼修改刪除呢？
再次感謝～
<8241865071731132787>(以上內容請勿刪除,從括號之後開始留言)你好！下次記得附網址喔～
回覆刪除[quote]文章標題較長會分成兩行，文字對齊預設是置中，這個有辦法修改嗎？[/quote]
可在範本中 </head> 的前一行插入以下程式碼：
<style>
#Blog1_blog-pager-newer-link {...}
#Blog1_blog-pager-older-link {...}
</style>
以上 {...} 的區間，可填入自訂的 CSS，例如 text-align: left; 就是靠左，text-align: right; 就是靠右
[quote]前一篇後一篇中間的圓點點要怎麼修改刪除呢？[/quote]
看了你的範本，並非官方範本，你可以詢問該範本的作者，或是參考這篇「諮詢服務」→「5. 其他類諮詢」
版大您好:
回覆刪除我成功將您的這個hack裝在blogger行動版範本，想寫一篇心得文
可以在文章中引用您的文章嗎?
主要引用原始程式碼部分，文字不會引用
我會註明來源與並附上連結
<9140064934440394884>(以上內容請勿刪除,從括號之後開始留言)Joseph 你好，沒有問題，請參照網站下方「CC BY-NC-SA 3.0 TW」連結的原則即可~ ^^
回覆刪除感謝分享!!安裝成功!!
回覆刪除回報一個問題,安裝後在行動版上會出現重疊問題,該功能可以不在行動版顯示嗎??
回覆刪除<6466661276441795587>(以上內容請勿刪除,從括號之後開始留言)呵呵～行動版的顯示，社群昨天才有成員分享心得，相信你也有看到，直接參考他的內容吧 ^^
回覆刪除有看到阿！不過我的意思是希望將這篇裡面的功能不在行動版裡面顯示喔！
刪除<6281634845854146858>(以上內容請勿刪除,從括號之後開始留言)根據他的文章內容，行動版的顯示跟網頁版的顯示是要分開處理的。既然他已經有研究行動版這一塊了，具備了這部份的知識，建議你直接請教他這件事了，這樣我就不必重新研究他已經研究過的事 ^^
回覆刪除<1882594485024708812>(以上內容請勿刪除,從括號之後開始留言)不好意思您誤會我的意思了!!我目前只安裝您這篇文章的功能,但是在行動版上也會顯示,並且有出現跟原本按鈕重疊的問題,請問可以不在行動版上顯示您這篇文章裡的功能嗎??感謝您的耐心回覆!!http://mentor14901.blogspot.tw/2014/07/blog-post_30.html?m=1
回覆刪除這是我行動版上出現的錯誤網址,麻煩你喔!!
<7546374988666296625>(以上內容請勿刪除,從括號之後開始留言)看了你的網頁，我不清楚你的狀況是怎麼來的，因為我看我的行動版畫面，的確沒有出現重疊的情形。你看看是否曾安裝了他的程式碼，然後沒有清除乾淨。你可以全部清掉、一步一步重新安裝，看能否恢復正常。
回覆刪除您好：我直接跳二嵌入變成以下這樣：
回覆刪除http://1491311.blogspot.tw/2014/07/blog-post.html
（較新較舊按鈕在底部）
他的"名稱"怪怪的都是同樣的，
我是直接貼程式碼上去 步驟都沒錯
請問我從程式碼裡面修改可以修改成功嗎？
（我是為初學者，只能看懂模組並簡單增減）
感謝您創這麼好的部落格出來!!:)
<6518390911212540907>(以上內容請勿刪除,從括號之後開始留言)你好，基本上你的步驟都對，只有一個地方錯了而已，程式碼要裝在 </body> 前一行，不過你裝到 <body> 前一行了喔！
回覆刪除這個網站真是太棒了，想請問下站長，可以調整字的大小嗎？
回覆刪除<1131728819654430567>(以上內容請勿刪除,從括號之後開始留言)改字的大小跟這個小工具沒關係喔，如果你會調整原本「較新/較舊文章」這幾個字的大小，那麼用同樣方法舊可以改了。調整版面 CSS 的方法可參考「Chrome 開發人員工具__調整部落格版面實作」。
回覆刪除<2807496134125458950>(以上內容請勿刪除,從括號之後開始留言)Wayne大你好:上次問你的問題#7後來發現是因為我在行動版範本使用自訂的關係,後來我參考你的"Blogger 行動版範本初探__修改技巧整理"第四點讓網頁版的內容不要出現在行動版,已順利解決,再次感謝你的分享,謝謝
回覆刪除嗨，Wayne大大你好，因為在找如何安裝上下一篇按鈕+標題，所以來到貴寶地。按文索驥，先搜尋/body....結果找不到這個指令！想請問，我現在應要怎麼做比較好呢？><
回覆刪除我的網址：http://traveliseverything.blogspot.com
<8881651594443099808>(以上內容請勿刪除,從括號之後開始留言)你好，根據描述，我想應該只是操作上的問題。
回覆刪除你應該是在瀏覽器直接按 Ctrl-F，這樣就會搜尋不到。
請游標點進範本區塊，再按 Ctrl-F 搜尋，這樣就沒問題了。
你好, 請問除了文章標題外如何加入文章縮圖呢? 謝謝!
回覆刪除https://jimchangmaster.blogspot.tw/2010/07/4_27.html
回覆刪除加入後
會跑到最下面頁末的地方
一點都不明顯
如何設定能在文末出現呢？
感謝
因為原本「較新/較舊文章」的按鈕，就是出現在那個地方啊
刪除如果要改成文末出現，程式要另外寫，得當作客製案子囉~
感謝版大的分享！已成功安裝了。想另外請教兩個問題，研究好久找不到方法>_<
回覆刪除1.目前顯示的上下一篇是按照發文日期出現。是否能修改成同標籤的上下一篇？
2.上下一篇的箭頭圖示，會被版面蓋到而缺角，不知道該在哪邊修改？謝謝。
http://boleroearth.blogspot.com/
1. 建議你找找本站「相關文章」的相關工具來裝，會比較快
刪除2. 請見留言注意事項，CSS 問題請自己想辦法處理喔，不然就是自行調整圖片尺寸來符合版面效果
謝謝版大長久以來blogger的工具及技巧分享…
回覆刪除慢慢摸著摸著也看得懂一咪咪了~覺得還滿有趣的！
看您架置的blog，就知道是高手。
上下頁連結改標題名稱真的太實用了！成功了！
但卻變得無法修改pager區域的文字顏色？
另請問，「留言下方到pager區域」中間，有一大塊空白，
要如何調整那塊空白的大小？
我試著修改幾個地方的程式碼，但還是摸不到…
(不能貼圖…不知這樣描述是否了解？)
hi 你好, 歡迎進入 blogger 的世界。不過要隨心所欲修改版面的話，至少需要瞭解 html/css 的基本概念。
刪除由於提問屬於 CSS 問題，麻煩看一下留言注意事項「若詢問 CSS ...，請參考...」這方面只能請你學習使用 chrome 開發人員工具 http://www.wfublog.com/2012/10/chrome-developer-tool.html 以及瞭解 CSS 相關語法後，就知道如何修改。
謝謝版主的回答！
刪除過去有學習過些許的html，也學過些許的軟體開發撰寫，但都學藝不精XD
年過多時，也忘得差不多了。
用開發人員工具找到位置了，但仍未找到修改的方法，我會繼續續努力的！
愈摸愈覺得有趣，哈。
對了，"留言下方到pager區域中間，有一大塊空白" → 有一部份是官方留言框的 iframe 區塊，外部無法改 iframe 內的 css，你能調整的，只有 iframe 以外的 css。
刪除Wayne您好,我的頁面語法置入後沒有改變，是不是因為版本的問題？謝謝唷
回覆刪除https://caicaico.blogspot.com/2018/05/partheno.html
你好~ 看了網址 發現是使用官方 RWD 範本 https://www.wfublog.com/2017/03/blogger-rwd-official-template.html
刪除因為本篇的工具不是針對官方 RWD 範本而設計 所以建議使用「官方 "非" RWD 範本」時 再安裝本篇工具喔