範例展示
想要做出上面這樣的輪播效果嗎?可以用在最新文章、隨機推送、或者指定關鍵字喔,請看以下教學!
建立小工具
首先,進入小工具網站 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:選擇是否輪播,以及輪播效果(直或橫)
- Scroll bar:滑鼠指到時是否出現上一篇/下一篇按鈕或捲軸
- Auto scroll:是否自動輪播(可選擇一篇一篇或持續捲動)
- Scroll speed:輪播速度
- Scroll direction:輪播方向
- Style:選擇風格為 Text 純文字 或 Thumbnail 含圖片 或 HTML 整篇文章
- Thumbnail resizing:縮圖裁切(建議)或維持原圖比例。
- Scroll:選擇是否輪播,以及輪播效果(直或橫)
- Thumbnail position:縮圖位置
- Thumbnail selection:縮圖使用哪一張,建議選擇文章的第一張(first image)
- 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
- Include:只輪播包含某些關鍵字的文章(關鍵字之間用半形的「;」隔開)
- Exclude:排除掉包含某些關鍵字的文章(關鍵字之間用半形的「;」隔開)
- Corner:選擇小工具邊框是圓角(Rounded)或是直角(Square)
- Border:小工具是否有邊框
- Custom CSS link:如果你有外連的 CSS style sheet 可以把連接貼在這裡(一般用不到)
Feed Title
- Custom:如果要自己設定輪播的大標題(網站)名稱,請打開
- Main title:大標題(網站)名稱
- Main title link:大標題(網站)的連結(一般是你的網站首頁)
- Font size:大標題(網站)的文字尺寸
- Bold:是否粗體
- Colors
- Background color:背景顏色
- Font color:文字顏色
- Background image:背景圖片的連結
Feed Content
- Display content:展示哪些內容(全部/只有標題/只有摘要)
- Display link to original content:是否顯示網站連結
- Maximum number of characters:顯示字數(自行調整以配合版面)
- Title:標題字數
- Content :內容字數
- Size
- Item title:文章標題尺寸
- Bold:是否粗體
- Content:摘要文字尺寸
- Colors
- Title font:文章標題顏色(建議配合你的網站主題)
- Content font:摘要文字顏色(建議配合你的網站主題)
- Background:輪播文章背景顏色
- Background image:輪播文章背景圖片連結
- Background:輪播文章背景顏色
- Display:輪播幾篇文章
- Sort order:是否自訂輪播順序(最新在前/最舊在前/隨機)
- Separation 文章之間是否有分隔線
- Time/Date:是否顯示日期時間
- Format:日期時間格式
- Date format:日期格式
- Time format:時間格式
- Timezone:是否顯示時區
- Podcast/YouTube:是否顯示 Podcast 或 YouTube(一般用不到,除非你是播客或 youtuber)
設定完成了嗎?請點擊右上角的 Save & Get code!把跳出視窗中的語法複製起來(按 Copy Code),貼到你要展示輪播的地方就可以囉!超容易的啊~最後記得按 Done 表示設定完成。
之後如果想做任何調整,直接登入 feedwind 修改就好,完全不需要動到放進範本或小工具裡的代碼,是不是很方便!
其他提醒
- 免費版可以建立最多五個小工具,你可以另外再做幾個,分別放在行動版或側欄或文末。
- 管理頁面可幫已經建立的輪播小工具命名,方便區分(如果你建立一個以上的話)。
不騙你,裝好真的只要十分鐘吼!但這篇我寫了兩小時,覺得有幫助的話,快用下面按鈕分享出去吧 😄