公告版位

在這個「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。如果曾研究過「最新文章」或「最新回應」的程式碼,相信這樣的解說足以知道如何操作了。

全文已移往WFU BLOG 主站,請點:「Blogger 較新/較舊文章按鈕改造__(一)顯示文章標題

創作者介紹

WFU BLOG

Wayne Fu 發表在 痞客邦 PIXNET 留言(18) 人氣()


留言列表 (18)

發表留言
  • Pan Kuan
  • 喔耶!感謝Wayne,我改成功了,我當時還一篇篇慢慢手動加入是在加心酸的嗎?哈哈!

    不過若在整個文章分類下閱讀好像就不能帶入分類下一篇,只能抓到全blogger裡的上一篇下一篇是吧?!所以我手動加連結還是有用處在的啦!

    謝謝wayne先~~~
  • Wayne Fu
  • <5999191715577743276>(以上內容請勿刪除,從括號之後開始留言)不客氣~沒看到你手動加內容的文章畫面,不過有相關文章還是要手動加比較好啊,畢竟會捲到頁面底部的機率較低。

    你是指「指首頁或搜尋頁面的 "上一頁/下一頁" 分頁功能」嗎?開頭有說只針對「上一篇/下一篇文章」功能來修改,如果想改「上一頁/下一頁」的樣式,直接修改範本就行了~另外也謝謝你之前提供的相關資訊 :)
  • 黃暄暄
  • 你好~成功加入這段程式碼了,謝謝你!
    還想請教兩個問題,第一是因為文章標題較長會分成兩行,文字對齊預設是置中,這個有辦法修改嗎?第二是前一篇後一篇中間的圓點點要怎麼修改刪除呢?
    再次感謝~
  • Wayne Fu
  • <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]
    看了你的範本,並非官方範本,你可以詢問該範本的作者,或是參考這篇「<a href="http://wayne-fu.blogspot.com/2013/06/service-suggest-cooperation.html" rel="nofollow">諮詢服務</a>」→「5. 其他類諮詢」
  • Joseph Chang
  • 版大您好:
    我成功將您的這個hack裝在blogger行動版範本,想寫一篇心得文
    可以在文章中引用您的文章嗎?
    主要引用原始程式碼部分,文字不會引用
    我會註明來源與並附上連結
  • Wayne Fu
  • <9140064934440394884>(以上內容請勿刪除,從括號之後開始留言)Joseph 你好,沒有問題,請參照網站下方「CC BY-NC-SA 3.0 TW」連結的原則即可~ ^^
  • Ken CHEN
  • 感謝分享!!安裝成功!!
  • Ken CHEN
  • 回報一個問題,安裝後在行動版上會出現重疊問題,該功能可以不在行動版顯示嗎??
  • Wayne Fu
  • <6466661276441795587>(以上內容請勿刪除,從括號之後開始留言)呵呵~行動版的顯示,社群昨天才有成員分享心得,相信你也有看到,直接參考他的內容吧 ^^
  • Ken CHEN
  • 有看到阿!不過我的意思是希望將這篇裡面的功能不在行動版裡面顯示喔!
  • Wayne Fu
  • <6281634845854146858>(以上內容請勿刪除,從括號之後開始留言)根據他的文章內容,行動版的顯示跟網頁版的顯示是要分開處理的。既然他已經有研究行動版這一塊了,具備了這部份的知識,建議你直接請教他這件事了,這樣我就不必重新研究他已經研究過的事 ^^
  • Ken CHEN
  • <1882594485024708812>(以上內容請勿刪除,從括號之後開始留言)不好意思您誤會我的意思了!!我目前只安裝您這篇文章的功能,但是在行動版上也會顯示,並且有出現跟原本按鈕重疊的問題,請問可以不在行動版上顯示您這篇文章裡的功能嗎??感謝您的耐心回覆!!http://mentor14901.blogspot.tw/2014/07/blog-post_30.html?m=1
    這是我行動版上出現的錯誤網址,麻煩你喔!!
  • Wayne Fu
  • <7546374988666296625>(以上內容請勿刪除,從括號之後開始留言)看了你的網頁,我不清楚你的狀況是怎麼來的,因為我看我的行動版畫面,的確沒有出現重疊的情形。你看看是否曾安裝了他的程式碼,然後沒有清除乾淨。你可以全部清掉、一步一步重新安裝,看能否恢復正常。
  • 包仔
  • 您好:我直接跳二嵌入變成以下這樣:
    http://1491311.blogspot.tw/2014/07/blog-post.html
    (較新較舊按鈕在底部)
    他的"名稱"怪怪的都是同樣的,
    我是直接貼程式碼上去 步驟都沒錯
    請問我從程式碼裡面修改可以修改成功嗎?
    (我是為初學者,只能看懂模組並簡單增減)
    感謝您創這麼好的部落格出來!!:)
  • Wayne Fu
  • <6518390911212540907>(以上內容請勿刪除,從括號之後開始留言)你好,基本上你的步驟都對,只有一個地方錯了而已,程式碼要裝在 </body> 前一行,不過你裝到 <body> 前一行了喔!
  • HLM
  • 這個網站真是太棒了,想請問下站長,可以調整字的大小嗎?
  • Wayne Fu
  • <1131728819654430567>(以上內容請勿刪除,從括號之後開始留言)改字的大小跟這個小工具沒關係喔,如果你會調整原本「較新/較舊文章」這幾個字的大小,那麼用同樣方法舊可以改了。調整版面 CSS 的方法可參考「<a href="http://www.wfublog.com/2012/10/chrome-developer-tool.html" rel="nofollow">Chrome 開發人員工具__調整部落格版面實作</a>」。
  • Ken CHEN
  • <2807496134125458950>(以上內容請勿刪除,從括號之後開始留言)Wayne大你好:上次問你的問題#7後來發現是因為我在行動版範本使用自訂的關係,後來我參考你的"Blogger 行動版範本初探__修改技巧整理"第四點讓網頁版的內容不要出現在行動版,已順利解決,再次感謝你的分享,謝謝
找更多相關文章與討論