朋友 tinna 的「沒什麼，就是跟著結子愛作夢」widget
朋友 Ivan 的「Ivan?詩人頻道」widget
雖然先前在下有跟各位介紹過 Yahoo! Widget Engine（以下簡稱 YWE）的 Widget 工具製作方法，但可能寫的有點硬，且畢竟不是每個人都對 JavaScript 或 XML 熟，但的確很多人對 widget 的製作有興趣，所以再寫一篇比較簡單的介紹，希望大家都可以很容易地來製作 Widget 工具。
相信現在有很多網友都有自己的部落格，因此這次在下提供簡單的罐頭 JavaScript 檔與 .kon 檔案，您只需先準備好下列素材，便可製作出如上圖專屬於您部落格的 YWE widget：
- 您的部落格 RSS 或 Atom Feed 的網址
- Widget 的底圖設計圖檔（.png 圖形檔案）
有了上述素材，再配合可以製作圖形與編輯 .js 與 .kon 檔的工具軟體，然後再下載在下提供、可以使用於部落格系統所發佈的新聞剪輯 RSS 或 Atom Feed 的罐頭 JavaScript 與 .kon 檔並根據您的外觀設計與網址修改後，便可以製作出專屬的部落格 widget 哦！
以這個 widget 範例程式碼做出來的 YWE Widget 可以提供您下列功能：
- 顯示您製作的 widget 當背景
- 顯示您部落格的文章標題與發表日期
- 當使用者將滑鼠游標在文章標題或日期之上時，會變色標示；當按下滑鼠按鍵時，會連結到該文章的網頁
請先下載上面這個範例的 .zip 壓縮檔，解壓縮後便會看到一個名為「部落格瀏覽器 widget 範例」的檔案夾，打開後應該會看到如左圖的畫面。
這個檔案夾中應該包含下列檔案：
- 部落格瀏覽器 widget 範例
- MyRSS.js
- MyRSS.kon
- Resources
- nktalk-skin.png
- reload-small-down.png
- reload-small-up.png
好，下載完成後，各位就可以照著下列幾個步驟來製作您自己的 YWE widget。
現在許多部落格系統，包括各大入口網站的部落格，像 Yahoo! 奇摩部落格 BETA、蕃薯籐樂多日誌、MSN Spaces、無名小站、Blogge等，都有支援 RSS 或是 Atom Feed 文章發佈的格式，但有些部落格系統的 RSS/Atom 是另外要開啟的功能，所以在開始前您先要把您的部落格 RSS 或 Atom 文章發佈的功能打開才行。
在打開 RSS 或 Atom 文章發佈功能後，通常您的部落格內會出現  或  的標誌，您可以將該圖案所連結的網址拷貝起來，便是您的 RSS 或 Atom Feed 的網址。
現在您可以利用 Photoshop 等軟體來設計您的 widget 背景（或說 widget 視窗的外觀）。以下是以 tinna 的 widget 來作設計範例，說明您必須記錄還有將哪些元素考慮進去 widget 視窗外觀：
在這個範例中，您必須將下列的座標或長度、高度記錄下來：
- 文章列表左上角的座標及其長度與高度（不包含捲視軸）
- 重新載入的按鈕座標
- 捲視軸的座標（其寬度是固定的 16 像素），通常其 Y 座標與文章列表的 Y 座標是一樣的
在製作時，在下建議使用參考線來定位，這樣可以比較準確的標示各重要座標。
在您設計完外觀並記錄好所有需要的座標後，請將按鈕、捲視軸等物件移除，僅剩例如下圖的東西來當作 widget 的視窗背景，然後存成 PNG-24 格式的 .png 圖形檔案（請注意，務必將透明度也儲存起來，這樣 widget 視窗便可以是不規則形狀），存在 Resources 檔案夾中。
接下來我們要修改 MyRSS.kon 檔，以剛剛記錄下來的座標值還有檔名代入相對應的地方。請先利用 NotePad++ 等文字編輯器將此檔打開，然後看著每個註記的解說來填入應該填的數值。
| 1 |
請在這個地方填入您要給這個 widget 的標題 |
| 2 |
將此處的檔名替換成您剛剛儲存的 .png 檔名 |
| 3 |
請在第 10 行填入文章列表的 X 座標，在第 11 行填入文章列表的 Y 座標 |
| 4 |
請在第 12 行填入文章列表的寬度，在第 13 行填入文章列表的高度 |
| 5 |
請在第 18 行填入捲視軸的 X 座標，在第 19 行填入捲視軸的 Y 座標 |
| 6 |
將此處的內容替換成捲視軸的高度 |
| 7 |
這是捲視軸捲視區域（Thumb）的色彩碼，可以不改（#dddddd 為淺灰色）。您也可以更改這個值來改變其色彩，以便配合您的 widget 設計風格。 |
| 8 |
請在第 27 行填入重新載入按鈕的 X 座標，在第 28 行填入重新載入按鈕的 Y 座標 |
在完成上述修改後，請把 MyRSS.kon 儲存起來。
接下來進行修改工作的最後一步驟 － 修改 MyRSS.js 檔。請用 NotePad++ 等文字編輯器將 MyRSS.js 檔案打開，然後請著下列解說來進行修改：
| 1 |
請在這個地方填入您部落格的 RSS 或 Atom Feed 網址 |
| 2 |
請填入您想使用的一般文字顏色，為 HTML RGB 色彩十六進位代碼（如 "#000000" 代表黑色），通常您可以利用 Photoshop 等繪圖軟體將您要的顏色選出後，再取得其 HTML 的色彩編碼。 |
| 3 |
請填入您想使用的文字醒目提示的顏色，為 HTML RGB 色彩十六進位代碼 |
好了，這樣便可以進行 widget 測試了。請您直接打開 MyRSS.kon 檔案，此時 Yahoo! Widget Engine 會被執行（如果您還沒啟動它的話），並出現一個視窗：
此時請按「使用 widget」按鈕便可繼續。之後您便會看到您的 widget 視窗會被打開，並且還有一個 debug 視窗會被打開。
您可以看看是否所有的東西都出現您想讓它出現的地方。如果沒有，您可以回到前面幾個步驟繼續修改座標值、還有其他設定、甚至圖形等，然後按 debug 視窗中的「Reload」按鈕來重新載入 widget 資料並觀看是否 OK，讓整個 widget 改到您滿意為止。如果文章列表沒有東西，可能您抓的 RSS 或 Atom 網只有問題，請再用試著改用其他可能的網址。
如果一切滿意，請繼續下一步。
接下來把方便我們測試用的 debug 視窗關閉。請使用 NotePad++ 等文字編輯器打開 MyRSS.kon 檔，並把原本 <debug>on</debug> 的地方改成 <debug>off</debug>。
請在改完後，將 MyRSS.kon 儲存起來。
終於到了這步！接下來您只要將檔案利用 Widget Converter 把所有 widget 檔案打包成 .widget 檔即可。
首先您必須先下載 Widget Converter，然後將所有不必要的檔案移到檔案夾之外（如您在設計用的 .psd 檔或是原來範例附的 nktalk-skin.png 檔案），並將檔案夾命名成您要的 widget 名稱，最後將整個檔案夾拖到 Widget Converter 的視窗，並按下「convert」按鈕：
最後會出現如下畫面，按下「OK」按鈕後，就會製作出獨一無二、專屬於您部落格的 widget 囉！
恭喜您，接下來您只要直接打開這個轉好的 .widget 檔便可以觀賞您的大作！您也可以將這個 .widget 寄給您的親朋好友，或放在您的部落格供您的部落格讀者來下載使用！
本範例中竹內結子小姐的照片之引用係純供無營利技術交流之用，特此聲明。 |
下載部落格瀏覽器 widget 範例檔案