ba-post 文章 [HTML9]

2018-01-20

超級簡單!十分鐘就能學會的部落格文章輪播小工具安裝教學

在部落格側欄或底部擺放文章輪播是讓訪客閱讀更多文章的最好方法,但好用又免費的相關輪播組件卻不容易找到。最近試用了一款自訂性很高的文章輪播小工具,免費版就能使用全部功能,安裝非常簡單(只需要一行代碼),而且載入速度很快不會拖慢網頁(所以不太會影響 SEO),推薦給正在尋找輪播小工具的格主們!

超簡易部落格文章輪播小工具安裝教學

範例展示



想要做出上面這樣的輪播效果嗎?可以用在最新文章、隨機推送、或者指定關鍵字喔,請看以下教學!

建立小工具


首先,進入小工具網站 feedwind,你可以先在左下方填入你的 RSS Feed 試試看它的輪播效果。Blogger 的 RSS feed 一般是:http://你的首頁網址/feeds/posts/default。

超簡易部落格文章輪播小工具安裝教學

請直接點擊右上角 sign up 註冊帳號。可以選擇 email 註冊,或直接用 Google 或 Facebook 帳號登入。

超簡易部落格文章輪播小工具安裝教學

接著就會跳出選項,請選擇 RSS Feed。如果沒有看到選項,請點擊右上角的 create widget 就會跳出選項了。(想要製作 Facebook 動態或 Twitter 動態小工具的話也可以在此選擇)

超簡易部落格文章輪播小工具安裝教學

左側有一連串選項提供設定,讓你把輪播小工具做成想要的樣子。

超簡易部落格文章輪播小工具安裝教學

細部設定


該怎麼設定呢?下面是細項說明,建議每個都試試看(右側可以即時看到改變)。若看不到細項,請點選灰色的 Advanced settings 即可。

Feed URL
  • 填入你的 RSS feed 即可,如果想要在一個小工具輪播好幾個 feed,可以按 + 添加。

General
  • Width:可指定寬度,或直接使用自適應設計(建議,尤其是行動版網頁)
  • Height:可指定高度,或根據輪播文章的數量決定
  • Scroll:選擇是否輪播,以及輪播效果(直或橫)
    1. Scroll bar:滑鼠指到時是否出現上一篇/下一篇按鈕或捲軸
    2. Auto scroll:是否自動輪播(可選擇一篇一篇或持續捲動)
    3. Scroll speed:輪播速度
    4. Scroll direction:輪播方向
  • Style:選擇風格為 Text 純文字 或 Thumbnail 含圖片 或 HTML 整篇文章
    1. Thumbnail resizing:縮圖裁切(建議)或維持原圖比例。
    2. Scroll:選擇是否輪播,以及輪播效果(直或橫)
    3. Thumbnail position:縮圖位置
    4. Thumbnail selection:縮圖使用哪一張,建議選擇文章的第一張(first image)
    5. Use HTTPS as thumbnail URLs:有開 https(綠色鎖頭)的網站建議打開
  • Powered by feedwind:是否顯示小工具的製作公司。雖然可以關起來,但免費版用戶只能關閉 7 天,之後仍會自動打開
  • Open links:點擊後直接開啟/另開視窗/在小工具裡開啟
  • Font style:字型,中文部落格選擇 Default browser font 即可
  • Text alignment:文字對齊(靠左、靠右、置中、分散)
  • Remove duplicate feed items:如果你同時輪播不只一個 RSS feed,打開這個選項可以避免重複的文章出現
  • Keyword filters
    1. Include:只輪播包含某些關鍵字的文章(關鍵字之間用半形的「;」隔開)
    2. Exclude:排除掉包含某些關鍵字的文章(關鍵字之間用半形的「;」隔開)
  • Corner:選擇小工具邊框是圓角(Rounded)或是直角(Square)
  • Border:小工具是否有邊框
  • Custom CSS link:如果你有外連的 CSS style sheet 可以把連接貼在這裡(一般用不到)

Feed Title
  • Custom:如果要自己設定輪播的大標題(網站)名稱,請打開
    1. Main title:大標題(網站)名稱
    2. Main title link:大標題(網站)的連結(一般是你的網站首頁)
  • Font size:大標題(網站)的文字尺寸
  • Bold:是否粗體
  • Colors
    1. Background color:背景顏色
    2. Font color:文字顏色
  • Background image:背景圖片的連結

Feed Content
  • Display content:展示哪些內容(全部/只有標題/只有摘要)
  • Display link to original content:是否顯示網站連結
  • Maximum number of characters:顯示字數(自行調整以配合版面)
    1. Title:標題字數
    2. Content :內容字數
  • Size
    1. Item title:文章標題尺寸
    2. Bold:是否粗體
    3. Content:摘要文字尺寸
  • Colors
    1. Title font:文章標題顏色(建議配合你的網站主題)
    2. Content font:摘要文字顏色(建議配合你的網站主題)
    3. Background:輪播文章背景顏色
    4. Background image:輪播文章背景圖片連結
  • Background:輪播文章背景顏色
  • Display:輪播幾篇文章
  • Sort order:是否自訂輪播順序(最新在前/最舊在前/隨機)
  • Separation 文章之間是否有分隔線
  • Time/Date:是否顯示日期時間
    1. Format:日期時間格式
    2. Date format:日期格式
    3. Time format:時間格式
    4. Timezone:是否顯示時區
  • Podcast/YouTube:是否顯示 Podcast 或 YouTube(一般用不到,除非你是播客或 youtuber)

設定完成了嗎?請點擊右上角的 Save & Get code!把跳出視窗中的語法複製起來(按 Copy Code),貼到你要展示輪播的地方就可以囉!超容易的啊~最後記得按 Done 表示設定完成。


之後如果想做任何調整,直接登入 feedwind 修改就好,完全不需要動到放進範本或小工具裡的代碼,是不是很方便!

其他提醒

  • 免費版可以建立最多五個小工具,你可以另外再做幾個,分別放在行動版或側欄或文末。
  • 管理頁面可幫已經建立的輪播小工具命名,方便區分(如果你建立一個以上的話)。

不騙你,裝好真的只要十分鐘吼!但這篇我寫了兩小時,覺得有幫助的話,快用下面按鈕分享出去吧 😄