Plurk 的 Widget ，就是可以讓你貼在 Blog 或 HP 裡，隨時更新並顯示你的 Plurk 留言狀態的。大概是長成下面這種樣子。
不過可能會有人覺得官方預設的樣式，寬度窄了點，文字小了點，背景色看了不爽之類的，所以會想要「改一改」吧，這篇就是要來介紹該怎麼修改的。（註：上圖超連結會跑出白底應該是這個部落格的樣式影響的）
準備工具
這裡要準備的工具，是為了那些想全程都有「參與感」的人而準備的，只是想看怎麼改的可以跳過這章節。
- Firefox -- Mozilla Firefox 、 Pigfoot Firefox ，反正重點是在有「檢視選取範圍原始碼」這功能的瀏覽器。
- JSView -- Fx 的擴充套件，檢查網頁載入了什麼 JavsScript 跟 CSS 檔案時挺方便的。也有其它類似功能的，不過我懶得找了。
- Auto Context -- Fx 的擴充套件，在你選取網頁內容時，自動跳出滑鼠右鍵選單（快捷選單）。純粹在這廣告一下，不裝也無妨。 :P
- Stylish -- Fx 的擴充套件，方便你馬上檢視修改好的 CSS 規格，當然還是要自己手刻啦。覺得要等 Blog 服務商刷新你的修改結果很慢的人，裝這個會方便很多。(詳細說明請見 MozTW Wiki)
- MadEdit -- 純文字編輯器，挑自己喜歡的就好，不一定要這款。準備這東西主要是因為 JSView 可以用外部編輯器開啟 JS 跟 CSS 檔案，所以挑選自己習慣的編輯器會方便點。
檢視原始碼
這章節也是準備階段的，可以略過無妨。以我 Blog 上的 Plurk Widget 為例，你從 Widget 上方的「總之順便在這丟 Widget 實驗看看好了。」這段字開始選取，按住滑鼠左鍵往下拉拉拉，停在「張貼者： wini 位於」這行附近，按滑鼠右鍵選「檢視選取範圍原始碼」來看，應該會看到「總之順便～」這行字後面有出現一段「<div style="visibility: visible;" class="plurk-widget plurk-widget-regular">」這種東西，那一大段就是今天要改的 Widget 樣式，所需要參考的的 HTML 資訊。
總之這裡先以修改寬度為例，先隨便找找官方樣式的 .plurk-widget 寫了啥吧。從 Fx 選單工具列的「檢視」裡找到 JS/CSS 的項目(通常會在最下面)，裡面可以看到 widget.css 這檔案（當然要在有 Widget 的頁面才會出現），各位進去搜尋一下 .plurk-widget 這選擇子裡面寫了啥跟 width 有關的東西吧。（下面開始會扯一些 HTML/CSS 的東西，還不清楚的先看看站內文章「二十個不到的 HTML 元素及屬性」試試。）
總之這樣就找到跟寬度有關的樣式規則了，會 CSS 的應該馬上就可以動手改了吧，所以下面可以不必看了。 \^o^/
個人推薦可以修改看看的樣式
總之要自訂你的 Plurk Widget 樣式，只要在插入 Widget 前面的地方，放置一段 CSS 宣告區域，剩下的就是填樣式規則進去而已。（另外 Widget 右上那小圖我懶得改了，畢竟要自己另外製圖等的很麻煩呀。）
<style type="text/css"> <!-- /* 樣式規則寫在這行下面就好，畢竟這行是註解文。 */ --> </style>
寬高、位置
.plurk-widget { max-width: 300px !important }-- 改 300 這數字的部分，就可以自訂寬度了。.plurk-timeline { height: 300px !important }-- 改 300 這數字的部分，就可以自訂高度了。.plurk-widget { margin:auto !important }-- 把 Widget 置中。
字體、配色
.plurk-widget { font-size: 14px !important }-- 改 14 這數字的部分，就可以自訂字體大小了。.plurk-timeline a { color: black !important ; background: transparent !important }-- 改 black 跟 transparent 的部分， timeline 的文字顏色跟底色就會變化了。（顏色規則請看下面找找）.plurk-meta { font-size: 10px !important }-- 改 10 這數字的部分，每則留言底下的回應數跟時間的資訊，字體大小就會變化。.call-action , .call-action a { color: black !important ; background: transparent !important }-- 改 black 跟 transparent 的部分， Widget 底下那欄中的文字顏色跟底色就會變化了。（顏色規則請看下面找找）
底色、底圖
.plurk-widget { background: black !important }-- 改 black 這裡就可以調整顏色了。（填 white 之類的顏色英文，或是 #09f 或 #09abcf 這種感覺的十六進位值就好。）.plurk-widget { background: url(" 圖片網址 ") !important }-- 改 圖片網址 這裡，可以替換你喜歡的底圖進去。.plurk-timeline { background: #e9f7f6 !important }-- 改 #e9f7f6 這裡，可以替換 timeline 的底色。（顏色規則請往上找前面的說明）
成品
大概會長這樣子，總之有什麼問題請利用回文功能發問吧。然後上圖的樣式規則可以精簡成下面這樣。
.plurk-widget {
max-width: 360px !important
;
margin:auto !important
;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOchyphenhyphen_-HffJR6AVBJsl9VOK2cqfjFg0eJbq2K6ibaj8tSpQQxL3jMp17Tl3d8_7AQC9_RJsLzySoVX9NB-6fiO-JjqNlMdkSwcWlM_snK2XSxcBM3irgUJsAyUkRNb0regdDl/s1600/plurk_bgimg_pattern_036.gif") !important
;
font-size: 14px !important
}
.plurk-timeline {
height: 400px !important
;
background: #e9f7f6 !important
}
.plurk-widget .plurk-timeline a , .plurk-widget .plurk-timeline a:link {
color: black !important
;
background: transparent !important
}
.plurk-meta {
font-size: 10px !important
}
.call-action , .plurk-widget .call-action a , .plurk-widget .call-action a:link {
color: black !important
;
background: transparent !important
}
其它（有關 JavaScript）
有在學 JavaScript（不是 JAVA）的，應該會發現官方給的 Widget 語法還可以自己調整些功能吧，下面稍微來說明一下。
首先打開 Plurk 官方的 widget.js 檔案，上面就有寫些說明了，你只要把你的 Widget 語法修一下就好。
比如說 <script type="text/javascript" src="[中略]&no_css=true"></script> 就可以關掉官方塞的 CSS 樣式，重點就在於該把 &no_css=true 這類的指令給塞進哪裡而已。
&no_css=true-- 關閉官方給的 CSS 樣式&interval=0-- 關閉 Widget 的自動更新功能、這樣別人看你的網頁時比較不會忽然頓住（註：官方給的 JS 程式碼已經有這項了，把原本的數字改掉就好。）&small=true-- 改成小型版本的 Widget（註：實際測試後會發現有點問題，所以不建議使用。）
