2013年10月28日

[教學]Blogger 較新/較舊文章按鈕改造__(一)顯示文章標題

[教學]Blogger 較新/較舊文章按鈕改造__(一)顯示文章標題

Wayne Fu 0 A+
在這個「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 搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


如果對效果不滿意想修改程式碼參數,請繼續往下看。



三、修改參數


首先聲明一下,為了讓大多數使用者安裝方便,將 CSS 也寫入了程式碼之中,這樣可以少幾個安裝步驟,因為對於 Blogger 範本不熟的使用者,只要多一個步驟,就是多了一分安裝失敗的可能性。而看得懂原始碼的資深讀者,可以自行修改 CSS 樣式,或是將 CSS 搬到 </head> 之前的位置。

以下說明可以修改的參數,請對照程式碼行號──

F:請根據自己的版面寬度,調整文章標題區塊的寬度,例如想要加寬可以嘗試 "300px" 等數值。

G:較新/較舊文章按鈕中間夾著一個首頁按鈕,預設值 "N" 會將首頁按鈕隱藏,若想顯示首頁按鈕請改為 "Y"。

另外,若想將首頁按鈕改為圖案,可參考「Blogger 範本__(三)文章及留言區塊的程式碼」→「一、上下頁區塊」,將代表「首頁」的字串改為圖檔的 HTML 碼即可。

H、I:這兩行的圖案網址,可置換為自訂圖案網址;如果不想出現圖案,將網址字串清空,留下兩個雙引號 "" 即可。

另外,如果要使用預設圖案,網址字串的 "s50" 可經由調整數值,更改圖案大小,例如改為 "s40" 就變的比較小、改為 "s60" 就變的比較大,其原理可參考「Blogger 熱門文章+任意尺寸縮圖」→「一、PICASA 圖片規則」。



四、小結


開頭所提的「Blogger社群討論串」,+Pan Kuan 提供了其他部落格會使用的浮動按鈕樣式資訊,可將「較新/較舊文章按鈕」改為左、右箭頭的浮動按鈕。有了本文從文章 feed 取得文章標題的技巧後,下一篇將會修改這兩個按鈕,讓其功能更為實用。

2014.8.5 補充:這篇「Blogger行動版加入 上一篇/下一篇 文章標題」,使用本文的程式碼修改後,在行動版呈現類似效果,有需要的讀者可以參考。


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

17 則留言:

  1. 喔耶!感謝Wayne,我改成功了,我當時還一篇篇慢慢手動加入是在加心酸的嗎?哈哈!

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

    謝謝wayne先~~~

    回覆刪除
  2. 你好~成功加入這段程式碼了,謝謝你!
    還想請教兩個問題,第一是因為文章標題較長會分成兩行,文字對齊預設是置中,這個有辦法修改嗎?第二是前一篇後一篇中間的圓點點要怎麼修改刪除呢?
    再次感謝~

    回覆刪除
  3. 版大您好:
    我成功將您的這個hack裝在blogger行動版範本,想寫一篇心得文
    可以在文章中引用您的文章嗎?
    主要引用原始程式碼部分,文字不會引用
    我會註明來源與並附上連結

    回覆刪除
  4. 回報一個問題,安裝後在行動版上會出現重疊問題,該功能可以不在行動版顯示嗎??

    回覆刪除
  5. 有看到阿!不過我的意思是希望將這篇裡面的功能不在行動版裡面顯示喔!

    回覆刪除
  6. <1882594485024708812>(以上內容請勿刪除,從括號之後開始留言)不好意思您誤會我的意思了!!我目前只安裝您這篇文章的功能,但是在行動版上也會顯示,並且有出現跟原本按鈕重疊的問題,請問可以不在行動版上顯示您這篇文章裡的功能嗎??感謝您的耐心回覆!!http://mentor14901.blogspot.tw/2014/07/blog-post_30.html?m=1
    這是我行動版上出現的錯誤網址,麻煩你喔!!

    回覆刪除
  7. 您好:我直接跳二嵌入變成以下這樣:
    http://1491311.blogspot.tw/2014/07/blog-post.html
    (較新較舊按鈕在底部)
    他的"名稱"怪怪的都是同樣的,
    我是直接貼程式碼上去 步驟都沒錯
    請問我從程式碼裡面修改可以修改成功嗎?
    (我是為初學者,只能看懂模組並簡單增減)
    感謝您創這麼好的部落格出來!!:)

    回覆刪除
  8. 這個網站真是太棒了,想請問下站長,可以調整字的大小嗎?

    回覆刪除
  9. <2807496134125458950>(以上內容請勿刪除,從括號之後開始留言)Wayne大你好:上次問你的問題#7後來發現是因為我在行動版範本使用自訂的關係,後來我參考你的"Blogger 行動版範本初探__修改技巧整理"第四點讓網頁版的內容不要出現在行動版,已順利解決,再次感謝你的分享,謝謝

    回覆刪除
  10. 嗨,Wayne大大你好,因為在找如何安裝上下一篇按鈕+標題,所以來到貴寶地。按文索驥,先搜尋/body....結果找不到這個指令!想請問,我現在應要怎麼做比較好呢?><

    我的網址:http://traveliseverything.blogspot.com

    回覆刪除
  11. 你好, 請問除了文章標題外如何加入文章縮圖呢? 謝謝!

    回覆刪除
  12. https://jimchangmaster.blogspot.tw/2010/07/4_27.html
    加入後
    會跑到最下面頁末的地方
    一點都不明顯
    如何設定能在文末出現呢?
    感謝

    回覆刪除
  13. 感謝版大的分享!已成功安裝了。想另外請教兩個問題,研究好久找不到方法>_<
    1.目前顯示的上下一篇是按照發文日期出現。是否能修改成同標籤的上下一篇?
    2.上下一篇的箭頭圖示,會被版面蓋到而缺角,不知道該在哪邊修改?謝謝。
    http://boleroearth.blogspot.com/

    回覆刪除
  14. 謝謝版大長久以來blogger的工具及技巧分享…
    慢慢摸著摸著也看得懂一咪咪了~覺得還滿有趣的!
    看您架置的blog,就知道是高手。

    上下頁連結改標題名稱真的太實用了!成功了!
    但卻變得無法修改pager區域的文字顏色?

    另請問,「留言下方到pager區域」中間,有一大塊空白,
    要如何調整那塊空白的大小?
    我試著修改幾個地方的程式碼,但還是摸不到…
    (不能貼圖…不知這樣描述是否了解?)

    回覆刪除
    回覆
    1. 謝謝版主的回答!
      過去有學習過些許的html,也學過些許的軟體開發撰寫,但都學藝不精XD
      年過多時,也忘得差不多了。
      用開發人員工具找到位置了,但仍未找到修改的方法,我會繼續續努力的!
      愈摸愈覺得有趣,哈。

      刪除
  15. Wayne您好,我的頁面語法置入後沒有改變,是不是因為版本的問題?謝謝唷
    https://caicaico.blogspot.com/2018/05/partheno.html

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP