2015年10月21日

Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS

A+
blogger-recent-post-v2-Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS之前寫的舊版工具「最新文章」已經很久沒有更新,由於前陣子「BLOGGER 支援 HTTPS」之後,很多 Blogger 工具都需要修改才能相容於 HTTPS 模式,因此藉這個機會來改版,除了加強縮圖的呈現方式,也新增不少功能。

以下先介紹更新的功能列表,想直接安裝請跳至「二、安裝程式碼」。



(圖片出處: pixabay.com)


一、功能更新及修正


1. 新增功能

blogger-recent-post-custom-thumbnail-Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS

首先看一下上圖為新版本的效果圖,新增的功能有:
  • 支援 HTTPS
  • 整合上下頁導航及摘要全部開合按鈕:按鈕區域變大,操作更方便。
  • 新增摘要功能:含摘要預覽、顯示全部摘要切換。
  • 自訂 CSS:可自行調整全部的版面配置。


2. 修正功能
  • 縮圖尺寸:舊版本的縮圖只能固定寬度、無法調整寬高比例,新版本可設定縮圖自動裁切為指定尺寸,整體版面較為美觀
  • 調整了版面配置:更為友善的使用者體驗。



二、安裝程式碼


如果安裝過舊版本的話,先刪除原本的小工具,按以下步驟重新新增一個「HTML/JavaScript」小工具即可。

如果沒有安裝過的話,請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼:


如果都使用預設值的話,直接存檔就可開始使用。

如果要修改參數請參照以上程式碼行號:

A:可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。

F:可設定從第幾篇最新文章開始顯示

G:一頁顯示幾篇文章

H:設定文章縮圖的寬度 (px)

I:設定文章縮圖的高度 (px)

J:藍色圖片網址,請自行置換為文章無縮圖時的預設顯示圖片。為了相容於 HTTPS 模式,網址開頭請勿使用 "http:" 字串

K:設定是否顯示文章摘要

L~M:分別設定預覽文章摘要、及所有文章摘要的字元數。

N:設定是否顯示網站總文章數

O~R:可修改為自訂的圖示字元,請參考「copypastecharacter.com」或「特殊符號字元一覽表」。但不少字元在行動裝置、或較舊的瀏覽器版本可能無法正常顯示,請用行動裝置自行測試看看。如果想改用圖片顯示的話,請參考「四、常見 FAQ」→ Q1 的詳細說明。

S~U:可自訂顯示的字串

AA~EI:如果熟悉 CSS 的話,可修改這裡的參數。



三、使用說明


如果發現這個最新文章小工具無法顯示,請先檢查以下項目:

1. 後台 → 設定 → 基本 → 網誌讀者 → 請檢查是否開放給「任何人」。

2. 後台 → 設定 → 其他 → 允許網誌資訊提供 → 不可以設定為「無」;如果是「自訂」的話,請檢查「網誌文章資訊提供」,不可以設定為「無」,最新文章才能顯示摘要內容

3. 文章標題的連結,在文章編輯器 → 文章設定 → 連結 → 這裡請勿使用「標題連結」,否則會發生留言 #5 的狀況。

如果還有其他問題,請看看「四、常見 FAQ」有沒有同樣案例可參考。若還是有問題請留言提出,會再補充到「四、常見 FAQ」。



四、常見 FAQ


Q1: openLogo 和 closeLogo 參數,能夠改用圖片嗎?

Ans: 如果要使用圖片的話,請將字串改為以下格式:

openLogo: "<img src='//2.bp.blogspot.com/-M8w-I9JbTLE/VXPsl-omIAI/AAAAAAAAL3Y/DtpaY-xjFY0/s14/right.png'/>",

藍色字串改為自訂圖片網址即可,closeLogo 的改法以此類推。

而使用圖片時,「上一頁/下一頁」按鈕,無論有無作用,顏色都會一樣,那麼可在 CSS 最後一行插入以下語法:

#rp2_switchPage span {
opacity: 0.5;
}

如此可讓無作用的按鈕,圖案的顏色較淡,以示區別。


Q2: 用Flickr嵌入圖片好像就無法顯示縮圖了,不知道要怎麼修改呢?

Ans: 這個工具並不支援 Flickr 圖床,抓取縮圖的原理請參考「舊版最新文章」→「一、從 Json 資料找縮圖」,從 Blogger 後台上傳的圖片,才能被儲存為 feed 之中的縮圖網址格式,讓這個小工具讀取。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」,每篇文章的第一張圖,從 Blogger 後台上傳,即可讓此工具顯示文章縮圖。

目前這個工具的設計是讀取 feed 的摘要內容,執行速度會比較快,若要支援 Flickr,那麼必須改為讀取 feed 的完整內容,會拖累讀取時間,因此暫時沒考慮這麼做。如果需求很多的話,那麼改版時再納入此點。


更多 Blogger 工具:

17 則留言:

  1. 其實改之前,應該在社群問下大家,這樣可以增加活躍度。 例如上一篇,下一篇,最好能不能調用文章的標題出來?

    回覆刪除
    回覆
    1. >> 增加活躍度
      什麼意思呢?是增加曝光嗎,謝謝您的關心。

      >> 改之前,應該在社群問下大家
      要問什麼呢?問問程式怎麼寫嗎?我做了超過上百個工具,應該不用每個都上社群問吧,呵呵~

      >> 上一篇,下一篇,最好能不能調用文章的標題出來?
      不懂意思,麻煩描述清楚一些.

      刪除
  2. 您好,用Flickr嵌入圖片好像就無法顯示縮圖了,不知道要怎麼修改呢?是否可以給些提示?謝謝!

    回覆刪除
    回覆
    1. hi Hudson, 有裝過舊版嗎?如果有的話,Flickr 縮圖一樣是無法顯示的,建議你文章中的第一張圖片,從 Blogger 後台上傳即可。詳細說明請參考「四、常見 FAQ」→ Q2

      刪除
    2. 謝謝WFU,舊版還真的沒裝過,奇怪怎麼以為FAQ看過卻還是漏了,抱歉!

      刪除
    3. FAQ 的 Q2 是新增的啊,不覺得就是你的提問嗎~~XD
      通常 FAQ 會整理常見的提問內容。

      刪除
  3. 回覆
    1. 我看不出你有裝本篇的最新文章程式碼喔~

      刪除
    2. 作者已經移除這則留言。

      刪除
    3. hi ms. Hsu, 這件事是可以在其他地方發問,看有沒有人可幫忙。

      請參考 http://www.wfublog.com/2013/06/service-suggest-cooperation.html → 「3. 網站維護/優化/其他類諮詢」,由於你安裝的不是官方範本,因此不好意思,就不特別看是什麼問題了。

      刪除
  4. 站長您好
    裝了您寫的最新文章程式碼,運行了幾個月都沒問題,但這兩天忽然都無法顯示了,

    我並沒有改我的範本,不知道是不是我的設定有哪裡出了問題呢?

    http://ciuigi.blogspot.tw/

    這是我的網誌,麻煩您了謝謝~


    謝謝!

    回覆刪除
    回覆
    1. 看了你的網頁,由於不是官方範本,也不清楚你裝了什麼外掛可能會衝到,既然你之前都沒問題,如果有備份的話,可以還原回之前的狀態,就能解決了。

      刪除
    2. 我回復了之前的備份的版本也是無法運行,但我另一個使用官方模板的網誌是可以的,所以我猜應該是官方進行了甚麼改版導致衝突(?)

      但還是謝謝您的回覆

      刪除
    3. 您好 我發現是因為文章自訂標題連結和搜尋說明所致,刪除就好了。

      刪除
    4. 謝謝回報,使用「標題連結」的確會讓程式當掉,已補充在「三、使用說明」。

      不過這件事跟「搜尋說明」沒關係,請正常使用「搜尋說明」功能,這是重要的 SEO 功能,請參考 http://www.wfublog.com/2016/04/blogger-seo-step-by-step.html

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。