前陣子和電資工會的夥伴一起發想了工會吉祥物——電資貓的貼圖，結果好像意外打開什麼開關，各種靈感源源不絕，於是拿平常在 blog 使用的 ET 自畫像畫了草稿，然後在好友們的鞭打（X）鼓勵（O）下做成 LINE 跟 Telegram 的貼圖。目前進度：第一組上架完成 XD
2019年4月17日 星期三
2018年8月10日 星期五
Web Front-End 菜鳥筆記：如何讓瀏覽器記住 form input field 的值（p.s. Chrome 的不合群行為還沒解開）
人生中第一份前端工程的全職滿三個月了～公司還沒倒（灑花）
這幾天解一個看起來簡單的小 issue，就是讓 browser 可以 autofill / autocomplete 登入表單中的欄位，結果意外的卡了超久 XDrz
目前在 Firefox / Safari 可以正常運作，但在 Chrome 則是時靈時不靈。先簡單筆記一下給將來的自己參考，順便看看有沒有過路神明會開示一下。
有兩種方式
1. 由使用者自行利用瀏覽器內建的 autofill 功能
2. 由開發者撰寫會觸發 form submit 事件的 html elements
參考：Autofill: What web devs should know, but don’t - Cloud Four
這幾天解一個看起來簡單的小 issue，就是讓 browser 可以 autofill / autocomplete 登入表單中的欄位，結果意外的卡了超久 XDrz
目前在 Firefox / Safari 可以正常運作，但在 Chrome 則是時靈時不靈。先簡單筆記一下給將來的自己參考
如何讓瀏覽器記住 input field 的值
有兩種方式
1. 由使用者自行利用瀏覽器內建的 autofill 功能
2. 由開發者撰寫會觸發 form submit 事件的 html elements
參考：Autofill: What web devs should know, but don’t - Cloud Four
2017年11月3日 星期五
成果發表： [ 空白模版 ] 專家座談會 - 會議邀請信 checklist
 |
| 草稿在 HackMD 中編輯的樣子。不得不說用 Markdown 寫表格比過去在 Hackpad 方便好多啊！感恩 HackMD 讚嘆 HackMD～ |
上週因為參與 2017.10.27 社福一站式便民服務 - 專家座談會 的緣故，和幾位有類似經驗的朋友討論，發現這類活動的邀請信，有個常見的 user experience 的問題，就是看完信以後，受邀者內心深處的疑問往往無法得到解答。
過去在民間團體的活動，不管是受邀開會或者演講，都沒有發生這種滿腔疑問、又不曉得該不該問的情況，其實也不是因為民間團體的邀請信寫得特別高明，而是邀請方多半循人脈而來，通常都是私下橋好以後，才寄正式信件，此時邀請信本身只是形式上的宣告，並不真的需要達到釐清背景脈絡的功效。
但是政府單位委外舉辦的活動，就很難這樣做了。一方面是規模較大人數較多，另一方面是主辦單位自己通常不認識這些受邀的人，換句話說，要像民間的活動那樣跟受邀對象一個個私下橋，是不可能的。這時候，邀請信的重要性就完全凸顯出來了。
2017年10月31日 星期二
成果發表：簡單 3 步驟，跨界人不再惹惱隊友
出社會後一直在不同領域間漂泊，結果樣樣通樣樣鬆，唯一擅長的領域，就是跨領域 XD 不過也因為這個緣故，看不同領域的人互動，常常可以同時體會雙方各自的觀點和盲點，別有一番樂趣，尤其是在看人吵架的時候（欸
大概 318 開始，開源碼社群不少人跨出資訊領域，有時也遇到水土不服的現象。去年 ipa 抓我去做 Blupa 量表，探討什麼專案適合 g0v 開源協作模式、什麼專案不適合。一年過去，覺得除了專案適合用什麼模式進行以外，人之間適合用什麼方式互動，好像也是個問題。幾個案例看下來，深深覺得...
我自己就幹了很多次，先在這邊深切地懺悔（南太
如同前篇 探討政府網站發包程序的文章 的概念，大部分蠢事之所以發生，不是不為，而是不能。在別人專業領域講幹話的人，通常不是故意要傷害對方，而是真的不知道自己在講幹話。這幾天剛好聽 Max 老師 提到資訊架構這門專業很沒存在感、以及另一位 口譯大大 被人嘲笑要被機器取代的事情，不禁回想起過去觀察到的各種互相傷害的軼事，仔細想想，接下來的時代幾乎可說是跨領域的時代了，為了人類的和平以及各界專業人士的血壓，不妨來做個防止大家互相傷害的小工具，以後幫別人跨界牽線前，先丟給雙方看，應該可以省下不少搓湯圓的力氣吧 lol
以下內容連同本文以 CC BY 4.0 授權釋出，請直接點圖進入相簿模式觀賞～
大概 318 開始，開源碼社群不少人跨出資訊領域，有時也遇到水土不服的現象。去年 ipa 抓我去做 Blupa 量表，探討什麼專案適合 g0v 開源協作模式、什麼專案不適合。一年過去，覺得除了專案適合用什麼模式進行以外，人之間適合用什麼方式互動，好像也是個問題。幾個案例看下來，深深覺得...
覺得跨領域時代就是互相傷害的時代，畢竟不懂就不知道珍惜，常常看到在 A 領域嗆麻瓜「很簡單你來做」的專家到了 B 領域以後自己也幹出一些會被專家嗆的麻瓜行為。
原推文
我自己就幹了很多次，先在這邊深切地懺悔（南太
如同前篇 探討政府網站發包程序的文章 的概念，大部分蠢事之所以發生，不是不為，而是不能。在別人專業領域講幹話的人，通常不是故意要傷害對方，而是真的不知道自己在講幹話。這幾天剛好聽 Max 老師 提到資訊架構這門專業很沒存在感、以及另一位 口譯大大 被人嘲笑要被機器取代的事情，不禁回想起過去觀察到的各種互相傷害的軼事，仔細想想，接下來的時代幾乎可說是跨領域的時代了，為了人類的和平以及各界專業人士的血壓，不妨來做個防止大家互相傷害的小工具，以後幫別人跨界牽線前，先丟給雙方看，應該可以省下不少搓湯圓的力氣吧 lol
以下內容連同本文以 CC BY 4.0 授權釋出，請直接點圖進入相簿模式觀賞～
 |
| ～簡單 3 步驟～ 跨界人不再惹惱隊友 ETBlue v20171030 CC BY 4.0 |
2017年10月22日 星期日
成果發表：GW2 Tangled Depths 捷運地圖 & 超懶人 Hero Points Run 路線教學影片
 |
| The metro system of Tangled Depths - hero points run |
上個月 Guild Wars 2 第二份資料片 Path of Fire 上線，為了解鎖新職業拿 hero points 的時候，發現 PoF 地圖的 HP 幾乎都要打怪，還是 HoT 的 HP 比較好拿。但 HoT 拿到第三張 Tangled Depths 時很吐血，因為地形實在太變態，不是頂天的山壁，就是蜿蜒的地洞，地洞裡的怪又多又密，走沒幾步就死在半路。雖然我都是看 Dulfy 的攻略照表操課，但還是覺得很難，難到觸發了我的資訊整理強迫症～～～
所以就有上面這張圖啦 www
過去一直對 TD 望之卻步，網路上也一堆人說這張地圖超難逛。但這次仔細研究後才領悟到，正常的路之所以很很難走，其實是在暗示玩家去尋找隱藏捷徑。而且這些清幽的隱藏捷徑，可以輕鬆地串在一起，變成完整的捷運路網。
簡單來說，TD 的交通網就跟台中市區一樣，以 ley-line confluence（類似台中車站）為中心向外輻射，然後輻射線之間以地洞和水道（類似台中的環狀幹道）相連。走正常地面路線的話，從 TD 起點（類似台中都會公園位置）到其他任一個傳點，都要經過非常多波折，但靠水道跟地洞，就可以無痛開完整張地圖的傳點或者拿完 HP。
2017年7月11日 星期二
經驗分享：從 OCF 官網改版看 PM 的工作流程（一）
之前 OCF 官網改版 完，想說既然 所有文件都放上網站 了，以後有人想做類似的案子又不知道從哪下手的話，可以直接丟連結。結果，上個月好友接到任務要改版公司官網，討論幾句後，才發現我想跟她說的事情，竟然都不在文件裡 o_O
仔細想想，網站開發專案的生命週期中，有分析、規劃、實做、維護四個階段，而 OCF 官網的文件，是為了維護階段而設計的，主要用途是讓接手的人知道怎麼在現有的架構下做調整。但今天好友要做的事情，是從零開始推展專案，因此她要參考的就不是維護階段用的文件，而是前面的分析、規劃階段的文件。
為了避免重複作答，本文整理我們的會議內容，用 OCF 官網當例子說明身為網站改版專案的 PM 要做什麼、怎麼開始。這裡的 PM 指的是 product manager + project manager 總之就是萬屎歸宗的坑主，因為主要是講分析跟規劃階段的事情，所以底下提到的 PM 工作內容，會偏向 product manager 比較多。
 |
| OCF 官網的維護用交接文件 |
仔細想想，網站開發專案的生命週期中，有分析、規劃、實做、維護四個階段，而 OCF 官網的文件，是為了維護階段而設計的，主要用途是讓接手的人知道怎麼在現有的架構下做調整。但今天好友要做的事情，是從零開始推展專案，因此她要參考的就不是維護階段用的文件，而是前面的分析、規劃階段的文件。
為了避免重複作答，本文整理我們的會議內容，用 OCF 官網當例子說明身為網站改版專案的 PM 要做什麼、怎麼開始。這裡的 PM 指的是 product manager + project manager 總之就是萬屎歸宗的坑主，因為主要是講分析跟規劃階段的事情，所以底下提到的 PM 工作內容，會偏向 product manager 比較多。
2016年8月16日 星期二
【步驟】如何移除綁架臉書帳號、亂發病毒網址的惡意瀏覽器擴充元件
分類：
HowTo
最近又有朋友中招了，我自己沒親眼見識過，據說是瀏覽器被安裝一個紅色 b 開頭的 extensions 導致。總之，因為臉書的搜尋實在太悲劇，找老半天好不容易挖到這篇教學文，趕快貼來比較好搜尋的 blogger。原始討論串：https://www.facebook.com/ETBlue/posts/10206888986075884
2011年8月27日 星期六
- Step by Step - Illustrated Tutorial: How to Install CoffeeScript in Windows
分類：
HowTo
Step 1
Step 2
Step 3
Step 4
Step 5
Step 6
Step 7
Step 8
Step 9
Step 10
Step 11
Step 12
Step 13 (Final step)
"demo.js" looks like this:
So this is the magic of coffeescript:
Hooray! Now I can use Coffeescript in my ThinkPad X220 Tablet with Windows 7 operating system. Thanks to Geoffrey Grosenbach, @wildcrt, @hSATAC, @tkalu, and many good guys from Sass & Compass Meetup in Taiwan held by Handlino .
Please let me know if there is anything wrong in this post! :-D
Download duncansmart's CoffeeScript compiler for Windows on github.
Go to the project URL: https://github.com/duncansmart/coffeescript-windows and click on the Download button.
Step 2
Unzip the downloaded files.
Select these three files in the unzipped folder, and press Ctrl - C to copy them.
Step 3
Create a bin folder in your user folder.
The default user folder in Windows is located somewhere like C:\Users\ETBlue. For me, I would like to put my files in D drive, so I create a D:\ETBlue\bin\ folder.Step 4
Press Ctrl - v to paste those three files into your bin folder.
Step 5
Go to Windows Control Panel - System Properties - Advanced System Settings.
Select Advanced tab and click on Environment Variables... button.
Step 6
Select Path row in user variables, then click on Edit... button.
Step 7
In Variable value: field, add the bin path into it, and put a ; at the beginning of the path.
In my situation, I just typed ;D:\ETBlue\bin\. Then click ok, and ok, and ok.
Step 8
Log out of Windows and log in again.
Now the "coffee" command works in Windows command prompt.Step 9
Write a cup of coffee.
Here is a simple demo file written by Geoffrey Grosenbach, the boss of Peep Code, who tutored me all these cool stuff. :-D
Step 10
Save the "demo.coffee" file anywhere you want.
In this case, I saved the .coffee file in D:\ETBlue\
Step 11
Open Command Prompt.
It should be at Start - All Programs - Accessories - Command Prompt.
Step 12
In Command prompt, move current location to the folder containing the demo.coffee file.
The default location in Windows command prompt is "C:\Users\ETBlue." Type d: and press enter, going to D drive, then type cd ETBlue and press enter, going to "D:\ETBlue."
Step 13 (Final step)
Use coffee command to compile ".coffee" file into ".js" file.
Type coffee demo.coffee > demo.js and press enter.
Result:
There will be a "demo.js" in the same folder where "demo.coffee" is.
"demo.js" looks like this:
So this is the magic of coffeescript:
Hooray! Now I can use Coffeescript in my ThinkPad X220 Tablet with Windows 7 operating system. Thanks to Geoffrey Grosenbach, @wildcrt, @hSATAC, @tkalu, and many good guys from Sass & Compass Meetup in Taiwan held by Handlino .
Please let me know if there is anything wrong in this post! :-D
2011年8月10日 星期三
-步驟- Seednet 寬頻帳號，在摩斯漢堡用「遠傳 WiFly 」上網
分類：
HowTo
（剪輯自 Google Plus 內容）
【忽然想起 Seednet 用戶可以在摩斯用 WiFi 上網】今天又來 MOS 漢堡，突然想起，我有 Seednet 寬頻的帳號，可以用摩斯漢堡的「遠傳 WiFly 」上網。不需額外付費。
一組帳號、一台電腦：
同一組 Seednet 寬頻帳號，只能登入一台電腦，第二台登入後，第一台會斷線。我有兩組 Seednet 寬頻帳號，跟朋友一起去摩斯時，可以分一組帳號給對方。
遠傳 WiFly 地點：
遠傳 WiFly 在全國的 Starbucks 星巴克、MOS 摩斯漢堡、Burger King 漢堡王、IS COFFEE 都有，對於摩斯愛好者來說，非常方便。這樣就不用為了用中華電信 PWLan 而跑去食物難吃的麥當勞了。XD
Seednet 用戶使用 WiFly 上網方式：
【忽然想起 Seednet 用戶可以在摩斯用 WiFi 上網】今天又來 MOS 漢堡，突然想起，我有 Seednet 寬頻的帳號，可以用摩斯漢堡的「遠傳 WiFly 」上網。不需額外付費。
一組帳號、一台電腦：
同一組 Seednet 寬頻帳號，只能登入一台電腦，第二台登入後，第一台會斷線。我有兩組 Seednet 寬頻帳號，跟朋友一起去摩斯時，可以分一組帳號給對方。
遠傳 WiFly 地點：
遠傳 WiFly 在全國的 Starbucks 星巴克、MOS 摩斯漢堡、Burger King 漢堡王、IS COFFEE 都有，對於摩斯愛好者來說，非常方便。這樣就不用為了用中華電信 PWLan 而跑去食物難吃的麥當勞了。XD
Seednet 用戶使用 WiFly 上網方式：
2011年6月20日 星期一
-步驟-在 Blogger 樣板中，嵌入「 [ metamuse ]羊男實驗の咖啡館 」的 Picasa 相簿，散播公民資訊，還給台灣優良企業 IMEI 義美食品一個公道（握拳）
分類：
Blogger hack,
HowTo
最近幾週，我跟許多國民一樣，開始不敢吃零食，不敢喝飲料，不爽去 7-11 ，不爽吃 Mister Donuts ，從康是美改上屈臣氏，連博客來網站都不開了。爾後聽到台灣碩果僅存的良心企業：義美，竟然要被政府強拆實驗室，實在是很想罵三字經。而強拆義美實驗室的依據，是從幾十年前開始，一步一步擴充公有地、更改河道、將義美廠房「就地非法」的成果。
從人類歷史可以看出，自由、民主、法治、人權，這些東西其實都是昂貴的奢侈品，它們不會從天上掉下來，而是靠廣大人民，對著龐大的政府辛苦的抗爭和堅持而來。身為一個小小公民，我目前能做的，就是明確秉達自己的立場，並且盡量讓重要的資訊散播出去。
今天看到 [ metamuse ]羊男實驗の咖啡館 把義美對整件事的說明投影片，製作成 Picasa 相簿，讓大家內嵌在網誌上，真是太感人了。於是，雖然 Picasa 相簿卡到板型裡很難看，義美的投影片更是醜到爆炸，我還是不顧我的審美觀，硬是把這份相簿內嵌到 Blogger 樣板裡面。
步驟如下：
從人類歷史可以看出，自由、民主、法治、人權，這些東西其實都是昂貴的奢侈品，它們不會從天上掉下來，而是靠廣大人民，對著龐大的政府辛苦的抗爭和堅持而來。身為一個小小公民，我目前能做的，就是明確秉達自己的立場，並且盡量讓重要的資訊散播出去。
今天看到 [ metamuse ]羊男實驗の咖啡館 把義美對整件事的說明投影片，製作成 Picasa 相簿，讓大家內嵌在網誌上，真是太感人了。於是，雖然 Picasa 相簿卡到板型裡很難看，義美的投影片更是醜到爆炸，我還是不顧我的審美觀，硬是把這份相簿內嵌到 Blogger 樣板裡面。
步驟如下：
2011年4月10日 星期日
-步驟-Blogger 在每篇文章下面，安裝 facebook comments box，並且和 Blogger 官方留言系統一起顯示
分類：
Blogger hack,
HowTo
-- 2011-04-29 更新：在步驟 6 插入被 Blogger 自動簡化過後的程式碼之 gist 純文字版
facebook 的 social plugins 中，有一款功能，最近常常看到，那就是 comments box。利用 comments box ，讀者直接用 facebook 帳號在文章底下留言。跟其他的 facebook social plugin 一樣，只要在別的分頁有登入，就不用重新 login 可以馬上使用，十分便利。而且這個留言，擁有 Blogger 留言系統所缺乏的樹狀功能，除了針對本文回應之外，還能夠針對其他讀者的留言回應，在功能上，多了許多彈性。
妙的是留言後，文章連結會跟留言一起出現在塗鴉牆，之後，不管是在文章頁面上、或在塗鴉牆上繼續留言，網頁跟塗鴉牆上的顯示內容，都會完全同步更新。也就是說，讀者可以在自己的牆上跟其他留言讀者一起交流，儼然就是個以本文網頁為中心、將觸角延伸到眾多塗鴉牆上的迷你討論園地。
說到留言，由於 Blogger 自己的系統，是陽春了點，所以，之前我嘗試許多人所稱道的 DISQUS 留言系統，不過最後沒有採用。DISQUS 的留言管理功能的確很強大豐富，介面也非常漂亮。不過，一裝下去，原本的 Blogger 留言系統就會消失，舊的留言必須另外做匯出的動作，才能進到新的 DISQUS 系統中，而 DISQUS 的管理介面，需要花一點時間去適應。如果是專業的網誌，有大量的留言要處理，也許就會適合，我的話，每篇文章的留言很難超過兩隻手的手指頭，對我來說，管理介面反而是越精簡越好，所以最後還是把 DISQUS 給移除了。
還有一個很重要的因素，是品牌信任。我相信留言交給 Blogger ，它一定會保管的非常妥善，將來等到 Blogger 推出新的留言功能，舊的留言也一定可以順利的升級更新。而 DISQUS 畢竟是個陌生的品牌，現在 Web 2.0 的服務此起彼落，萬一哪天它怎麼了，那可頭大得很。
facebook comments box 對我來說，有個重要的好處是，我不需要拿掉原本的 Blogger 留言系統，可以單純的把 facebook comments box 當成輔助的外掛，和 Blogger 的留言兩者併用，就沒有 DISQUS 那種整碗端去的問題。
以下是加入 comments box 的步驟：
facebook 的 social plugins 中，有一款功能，最近常常看到，那就是 comments box。利用 comments box ，讀者直接用 facebook 帳號在文章底下留言。跟其他的 facebook social plugin 一樣，只要在別的分頁有登入，就不用重新 login 可以馬上使用，十分便利。而且這個留言，擁有 Blogger 留言系統所缺乏的樹狀功能，除了針對本文回應之外，還能夠針對其他讀者的留言回應，在功能上，多了許多彈性。
妙的是留言後，文章連結會跟留言一起出現在塗鴉牆，之後，不管是在文章頁面上、或在塗鴉牆上繼續留言，網頁跟塗鴉牆上的顯示內容，都會完全同步更新。也就是說，讀者可以在自己的牆上跟其他留言讀者一起交流，儼然就是個以本文網頁為中心、將觸角延伸到眾多塗鴉牆上的迷你討論園地。
說到留言，由於 Blogger 自己的系統，是陽春了點，所以，之前我嘗試許多人所稱道的 DISQUS 留言系統，不過最後沒有採用。DISQUS 的留言管理功能的確很強大豐富，介面也非常漂亮。不過，一裝下去，原本的 Blogger 留言系統就會消失，舊的留言必須另外做匯出的動作，才能進到新的 DISQUS 系統中，而 DISQUS 的管理介面，需要花一點時間去適應。如果是專業的網誌，有大量的留言要處理，也許就會適合，我的話，每篇文章的留言很難超過兩隻手的手指頭，對我來說，管理介面反而是越精簡越好，所以最後還是把 DISQUS 給移除了。
還有一個很重要的因素，是品牌信任。我相信留言交給 Blogger ，它一定會保管的非常妥善，將來等到 Blogger 推出新的留言功能，舊的留言也一定可以順利的升級更新。而 DISQUS 畢竟是個陌生的品牌，現在 Web 2.0 的服務此起彼落，萬一哪天它怎麼了，那可頭大得很。
facebook comments box 對我來說，有個重要的好處是，我不需要拿掉原本的 Blogger 留言系統，可以單純的把 facebook comments box 當成輔助的外掛，和 Blogger 的留言兩者併用，就沒有 DISQUS 那種整碗端去的問題。
以下是加入 comments box 的步驟：
2011年3月9日 星期三
-步驟-Blogger 文章內，加入中英版本切換的功能
分類：
Blogger hack,
HowTo
English | 正體中文
這是一個簡單的 javascript / jQuery 實作，不僅是在 Blogger 系統，所有的部落格系統、或是一般的網頁，都可以使用。
世界上大多數的人，母語都不是英文，就像我一樣。不過，有些事情是跟各國、各語言的人，都有關係的，比方說本網誌的 Blogger hack 技術文章，根據 Google Analytics 的訪客統計，除了國內 zh-tw 語系的讀者之外，還會有 en-us, en-gb, de, it, fr, es, zh-cn ... 等各種語言的讀者，來參考或取用程式碼。其中，部份讀者會使用 Google Translate 閱讀網頁，但是目前，自動翻譯的效果仍然很糟糕，因此，有些流量比較高的技術文章，我會寫成中英雙語版本，畢竟，英文是多數人的第二語言，也是國際上最通用的語言。
不過，雙語文章有個缺點，讀者其實只需要看其中一種語言就好了，雙語文章的第二語言，在閱讀上，其實是很大的干擾。所以，為了讓讀者可以一次只看到一種語言、又能夠自由的切換版本，就製作了這個按鈕，搭配簡單的 html 標籤設定，就可以完成這個實用的小功能。
原則上，實作這個功能是不需要更動 Blogger 樣板的，不過，如果你需要頻繁使用的話，可以把按鈕的 CSS 寫在樣板內，這樣就不用每次發文章時，要在文章內插入落落長的樣式設定程式碼。
世界上大多數的人，母語都不是英文，就像我一樣。不過，有些事情是跟各國、各語言的人，都有關係的，比方說本網誌的 Blogger hack 技術文章，根據 Google Analytics 的訪客統計，除了國內 zh-tw 語系的讀者之外，還會有 en-us, en-gb, de, it, fr, es, zh-cn ... 等各種語言的讀者，來參考或取用程式碼。其中，部份讀者會使用 Google Translate 閱讀網頁，但是目前，自動翻譯的效果仍然很糟糕，因此，有些流量比較高的技術文章，我會寫成中英雙語版本，畢竟，英文是多數人的第二語言，也是國際上最通用的語言。
不過，雙語文章有個缺點，讀者其實只需要看其中一種語言就好了，雙語文章的第二語言，在閱讀上，其實是很大的干擾。所以，為了讓讀者可以一次只看到一種語言、又能夠自由的切換版本，就製作了這個按鈕，搭配簡單的 html 標籤設定，就可以完成這個實用的小功能。
原則上，實作這個功能是不需要更動 Blogger 樣板的，不過，如果你需要頻繁使用的話，可以把按鈕的 CSS 寫在樣板內，這樣就不用每次發文章時，要在文章內插入落落長的樣式設定程式碼。
2011年2月16日 星期三
-步驟-Blogger 在文章標題下方、文章底部，插入 facebook 官方的 like button
insert facebook official like button in Blogger post header / footer, and make it display only in single post pages - my Blogger template tweak
分類：
Blogger hack,
HowTo
-- 2011-04-11 更新：
想要讓每篇文章的 like button 在首頁顯示時，也可以有正常功能（而非指向首頁網址）的話，在按鈕中加入這一段 expr:href='data:post.url' 文字即可，詳細位置請見內文的程式碼。文章中的程式碼是設定成只在單篇文章時顯示 like 按鈕，如果要改成全部頁面都顯示，只要把包裹在 like 按鈕前後的 b:if 條件式標籤刪除即可，以上。改得有點匆促，語意不清之處請留言指教 ^^b
--
告解：神啊！我禁不起誘惑，我在網誌上安裝了萬惡 facebook 提供的 social plugin 之 like button ，只為了更方便的分享自己寫的文章...
身為一個信奉 do no evil 的 Google fan，我對 facebook 這間公司的印象並不是很好，所以，即使 facebook 提供官方的 social plugin 已經好一段時間了，仍舊一直都不想去用它。
不過昨天，看我最愛的 iThome 網站 時，在幾篇好文下面，順手按了 like 按鈕。按完後發現，它有一個 add comment 連結，按下之後，會在原地出現一個輸入框框，讓我在 like 按鈕中打字，輸入完成後按下 post 鈕，就會直接把這篇文章的連結，跟我剛才附上的 comment ，張貼到 facebook 的塗鴉牆上。（如果按下 unlike ，則會直接從塗鴉牆上刪除，連同之前的 comment 一起刪掉）
這個效果，跟一般的 facebook share button 效果幾乎完全相同，但是，share button 需要另外打開一個視窗，而 like button 只要在網頁中原地操作，節省了許多時間。讚嘆之下，我不禁拋下之前的堅持，在自己的網誌上也安裝這個屬於 facebook social plugin 之一的 like 按鈕。
我追隨 iThome 的作法，將 like 按鈕放在兩處，一是文章標題下方，獨立一行。二是文章底部，緊接在分享按鈕的右方。
想要讓每篇文章的 like button 在首頁顯示時，也可以有正常功能（而非指向首頁網址）的話，在按鈕中加入這一段 expr:href='data:post.url' 文字即可，詳細位置請見內文的程式碼。文章中的程式碼是設定成只在單篇文章時顯示 like 按鈕，如果要改成全部頁面都顯示，只要把包裹在 like 按鈕前後的 b:if 條件式標籤刪除即可，以上。改得有點匆促，語意不清之處請留言指教 ^^b
--
告解：神啊！我禁不起誘惑，我在網誌上安裝了萬惡 facebook 提供的 social plugin 之 like button ，只為了更方便的分享自己寫的文章...
身為一個信奉 do no evil 的 Google fan，我對 facebook 這間公司的印象並不是很好，所以，即使 facebook 提供官方的 social plugin 已經好一段時間了，仍舊一直都不想去用它。
不過昨天，看我最愛的 iThome 網站 時，在幾篇好文下面，順手按了 like 按鈕。按完後發現，它有一個 add comment 連結，按下之後，會在原地出現一個輸入框框，讓我在 like 按鈕中打字，輸入完成後按下 post 鈕，就會直接把這篇文章的連結，跟我剛才附上的 comment ，張貼到 facebook 的塗鴉牆上。（如果按下 unlike ，則會直接從塗鴉牆上刪除，連同之前的 comment 一起刪掉）
這個效果，跟一般的 facebook share button 效果幾乎完全相同，但是，share button 需要另外打開一個視窗，而 like button 只要在網頁中原地操作，節省了許多時間。讚嘆之下，我不禁拋下之前的堅持，在自己的網誌上也安裝這個屬於 facebook social plugin 之一的 like 按鈕。
我追隨 iThome 的作法，將 like 按鈕放在兩處，一是文章標題下方，獨立一行。二是文章底部，緊接在分享按鈕的右方。
2011年1月27日 星期四
-步驟-Blogger 針對 ie 使用者顯示勸誘訊息，並依照使用者系統語言，自動切換中英版本
detect browser appname and display special message to ie users, plus dynamically change language according to user system language (using javascript / jQuery)
分類：
Blogger hack,
HowTo
微軟的 internet explorer 一向是網頁設計者的惡夢，我現在深刻的體會到這一點。
一個禮拜前，我在 jQuery 文件中，找到了這個可以製造 ajax 效果的 .load() 函式，而實作出 Blogger 文章留言展開 / 收合的效果，還得意洋洋的寫了這篇教學文章「-步驟-Blogger 首頁在文章底下，直接顯示回應留言，並自由開 / 關留言預覽（神奇的 ajax 效果！）」，就這樣持續得意了一個禮拜。
但是，人生不如意事十常八九，昨天碰巧在剛重灌好的 windows 底下，用 ie 開自己的網誌，才發現... 這個功能在 ie 裡面沒有作用，只能切換顯示 / 隱藏，卻無法真正的載入外部網址的 html 內容。白話說就是展開以後卻看不到留言。
不僅如此，許多 css 樣式也都沒有作用，整個頁面可以說是慘不忍睹！囧
css 的部份，主要是因為 ie 不支援 rgba(255,255,255,0.5) 格式的顏色設定。rgba() 因為可以指定 red, green, blue 來設定顏色，又可以用 alpha 來設定透明度，製造出漂亮的透明效果，所以，自從在別人的語法裡面看到之後，就一直很開心的使用。可惜，在 ie 裡面，只能用傳統的 #000000 色碼，只能指定顏色，卻不能指定透明度。如果 ie 讀取 rgba() ，會因為看不懂而略過，然後這筆 css 設定就會等於沒有設定。
css 的問題好解決，只要在每個 rgba() 的設定的前一行，加上傳統色碼的設定即可。這樣做，可以讓 ie 讀取傳統色碼，並忽略它看不懂的 rgba() ；而其他先進的瀏覽器，如 firefox 或 chrome，則在讀取傳統色碼後，再次讀取 rgba() 設定，然後將傳統色碼覆蓋過去。
問題比較大的，是用 jQuery .load() 讀取留言的功能。問了 Google 後，找到許多相關討論，其中這篇 Zac 的文章 "jQuery IE7 load url problem" 提到，因為 ie 會在網頁載入的時候製作 cache ，等到第一次載入後，再用 .load() 做載入的動作， ie 不會執行載入，反而會以先前的快取來敷衍我們。~!@#$%^
文章中的幾種解法，我試了，但沒效果，目前還不知道問題出在哪裡。不過，在浪費一堆時間嘗試配合 ie 的特殊行為後，我火大了！老子不管了！ ie 去死啦！就是因為網頁設計者不斷地縱容 ie ，它才會一直死不了！所以我寫了這個功能，奉勸所有 ie 使用者，放下屠刀，立地成佛，苦海無邊，回頭是岸，拋棄石器時代的 ie，改用 21 世紀的先進瀏覽器！
一個禮拜前，我在 jQuery 文件中，找到了這個可以製造 ajax 效果的 .load() 函式，而實作出 Blogger 文章留言展開 / 收合的效果，還得意洋洋的寫了這篇教學文章「-步驟-Blogger 首頁在文章底下，直接顯示回應留言，並自由開 / 關留言預覽（神奇的 ajax 效果！）」，就這樣持續得意了一個禮拜。
但是，人生不如意事十常八九，昨天碰巧在剛重灌好的 windows 底下，用 ie 開自己的網誌，才發現... 這個功能在 ie 裡面沒有作用，只能切換顯示 / 隱藏，卻無法真正的載入外部網址的 html 內容。白話說就是展開以後卻看不到留言。
不僅如此，許多 css 樣式也都沒有作用，整個頁面可以說是慘不忍睹！囧
css 的部份，主要是因為 ie 不支援 rgba(255,255,255,0.5) 格式的顏色設定。rgba() 因為可以指定 red, green, blue 來設定顏色，又可以用 alpha 來設定透明度，製造出漂亮的透明效果，所以，自從在別人的語法裡面看到之後，就一直很開心的使用。可惜，在 ie 裡面，只能用傳統的 #000000 色碼，只能指定顏色，卻不能指定透明度。如果 ie 讀取 rgba() ，會因為看不懂而略過，然後這筆 css 設定就會等於沒有設定。
css 的問題好解決，只要在每個 rgba() 的設定的前一行，加上傳統色碼的設定即可。這樣做，可以讓 ie 讀取傳統色碼，並忽略它看不懂的 rgba() ；而其他先進的瀏覽器，如 firefox 或 chrome，則在讀取傳統色碼後，再次讀取 rgba() 設定，然後將傳統色碼覆蓋過去。
問題比較大的，是用 jQuery .load() 讀取留言的功能。問了 Google 後，找到許多相關討論，其中這篇 Zac 的文章 "jQuery IE7 load url problem" 提到，因為 ie 會在網頁載入的時候製作 cache ，等到第一次載入後，再用 .load() 做載入的動作， ie 不會執行載入，反而會以先前的快取來敷衍我們。~!@#$%^
文章中的幾種解法，我試了，但沒效果，目前還不知道問題出在哪裡。不過，在浪費一堆時間嘗試配合 ie 的特殊行為後，我火大了！老子不管了！ ie 去死啦！就是因為網頁設計者不斷地縱容 ie ，它才會一直死不了！所以我寫了這個功能，奉勸所有 ie 使用者，放下屠刀，立地成佛，苦海無邊，回頭是岸，拋棄石器時代的 ie，改用 21 世紀的先進瀏覽器！
2011年1月25日 星期二
-步驟-新作法！Blogger 動態版型，讓左/右側邊欄消失，以文章區塊填滿側邊欄（使用 b:if 條件式，無 javascript）
new method! conditional hide left/right sidebar and expand post width (using b:if tag, no more javascript!) - my Blogger template tweak, using Picture Window
分類：
Blogger hack,
HowTo
* Hi, if you are looking for an English version of this tutorial, please check the green text in this article (and throw Google Translate away)
續上一篇，之前曾經又寫了一篇「-步驟-Blogger 動態版型，瀏覽文章時讓左/右側邊欄消失，以文章區塊填滿側邊欄」，也是利用 javascript 小工具，動態的修改 css 所實作出來的。
當然，也是不用那麼麻煩。 orz
如果你很不幸的已經按照之前的作法修改樣板的話，請回到那篇文章，按照相反順序復原，然後改而採用本文所描述的方法。因為我的遜咖，給各位讀者帶來麻煩，真是不好意思 ^^b
Last month I wrote a tutorial about "conditional hide left/right sidebar and expand post width - my Blogger template tweak, using Picture Window ." I was wrong. Yesterday I found a much better way doing this, thanks to Blogger Sentral "Apply different layout/styling to static pages ." Please forget my previous article (or reverse those steps if you have already done that) and take the following steps. Sorry for misleading. ^^b
-步驟-新作法！Blogger 動態背景圖片，首頁使用大圖，內頁使用小圖，並在首頁將文章內容的字體縮小（使用 b:if 條件式，無 javascript）
new method! conditional change background image and resize post body font (use b:if tags only, no more javascript!) - my Blogger template tweak, using Picture Window
分類：
Blogger hack,
HowTo
* Hi, if you are looking for an English version of this tutorial, please check the green text in this article (and throw Google Translate away)
之前曾經寫了一篇「-步驟-Blogger 動態背景圖片，首頁使用大圖，內頁使用小圖並放大文章內容字體」，是利用 javascript 小工具，動態的修改 css 所實作出來的。
但是，其實根本不用那麼麻煩。 orz
昨天看了 Blogger Sentral 的這篇文章「Apply different layout/styling to static pages」後，菜鳥我才發現，原來 Blogger 樣板的 b:if 標籤、data: 標籤，可以直接放在 html body 之中，並不是非要塞進 widget 之內不可的。（淚）
所以，如果你很不幸的已經按照之前的作法修改樣板的話，請回到那篇文章，按照相反順序復原，然後改而採用本文所描述的方法。
因為我的遜咖，給各位讀者帶來麻煩，真是不好意思 ^^b
Last month I wrote a tutorial about "conditional change background image and resize post body font - my Blogger template tweak, using Picture Window ." I was wrong. Yesterday I found a much better way doing this, thanks to Blogger Sentral "Apply different layout/styling to static pages ." Please forget my previous article (or reverse those steps if you have already done that) and take the following steps. Sorry for misleading. ^^b
2011年1月21日 星期五
-步驟-Blogger 較新文章 / 較舊文章連結，將連結文字變成「真正」的文章標題
分類：
Blogger hack,
HowTo
English | 正體中文
-- 2011-01-28 更新：加入英文版本
-- 2011-02-19 更新：修改 CSS
-- 2011-02-21 更新：修改 javascript 語法
-- 2011-03-09 更新：製作中英切換按鈕
各大部落格平台，幾乎都會有「較新一篇 / 上一篇」「較舊一篇 / 下一篇」文章的功能，Blogger 當然也不例外。
不過，相信許多 Blogger 愛用者都發現到了，別的系統像是 Wordpress，上一篇 / 下一篇連結的文字，可以動態的顯示該篇文章的標題，不過 Blogger 卻永遠都是「較新的文章」「較舊的文章」，實在是有點遜。
Google 結果發現，許多人也有相同的需求，但是似乎沒有人提出解法，大家的答案都是「不可能」。主要的原因是，Blogger 系統利用寫在樣板中的 data:olderPageTitle 和 data:newerPageTitle 標籤，從資料庫中擷取較新/較舊頁面的標題。但是，Blogger 系統顯然還沒準備好這個動態擷取的功能，所以千篇一律的顯示成「newer post / 較新的文章」以及「older post / 較舊的文章」。
不過，菜鳥我當然不可能這樣認輸！經過一番研究，很輕鬆的用 jQuery 達成了，哇～哈哈哈哈（雙手叉腰長笑）
-- 2011-02-19 更新：修改 CSS
-- 2011-02-21 更新：修改 javascript 語法
-- 2011-03-09 更新：製作中英切換按鈕
各大部落格平台，幾乎都會有「較新一篇 / 上一篇」「較舊一篇 / 下一篇」文章的功能，Blogger 當然也不例外。
不過，相信許多 Blogger 愛用者都發現到了，別的系統像是 Wordpress，上一篇 / 下一篇連結的文字，可以動態的顯示該篇文章的標題，不過 Blogger 卻永遠都是「較新的文章」「較舊的文章」，實在是有點遜。
Google 結果發現，許多人也有相同的需求，但是似乎沒有人提出解法，大家的答案都是「不可能」。主要的原因是，Blogger 系統利用寫在樣板中的 data:olderPageTitle 和 data:newerPageTitle 標籤，從資料庫中擷取較新/較舊頁面的標題。但是，Blogger 系統顯然還沒準備好這個動態擷取的功能，所以千篇一律的顯示成「newer post / 較新的文章」以及「older post / 較舊的文章」。
不過，菜鳥我當然不可能這樣認輸！經過一番研究，很輕鬆的用 jQuery 達成了，哇～哈哈哈哈（雙手叉腰長笑）
2011年1月20日 星期四
-步驟-Blogger 首頁在文章底下，直接顯示回應留言，並自由開 / 關留言預覽（神奇的 ajax 效果！）
show and hide comments under each post on home page (and all non-item pages) with simple ajax implementation - my Blogger template tweak
分類：
Blogger hack,
HowTo
hi, if you are using google translate on this article, please forget about the poor translation and check my notes below each important paragraph!
-- 2011-01-21 更新：在步驟 1 補上 jQuery 的語法 --
--
2011-01-23 update: add english description below important paragraphs
---- 2011-01-26 更新：由於 internet explorer 處理網頁的 cache 問題，導致本文使用的 jQuery .load() 語法在 ie 中沒有作用，可以參考這篇文章做修正，至於我的作法，是放一段偵測 browser 的 javascript 語法，如果目前瀏覽器是 ie ，網誌上方會跑出一段訊息，拜託他改用符合標準的瀏覽器。呵
2011-01-26 update: microsoft internet explorer has a cache problem that prevent jQuery .load() that i used in this article from working. to solve this problem, check this article. for me, i have enough of ie, so i just write a script which display a message in blog header while people are using ie, begging them for changing browser. ha.
--前幾天，我的死黨發現，Blogger 網誌「在首頁無法看到文章的留言」！
在首頁裡，按文章的 comment 的話，畫面必須離首頁，連往文章頁面，等文章頁面整個讀取完以後，才會跳捲到底下回應的地方。
雖然這個過程，可能只要一兩秒鐘，如果是隨時都有一大堆留言的網誌，為了看留言等幾秒鐘也就罷了。不過，像我這麼冷門的網誌，為了一兩則回應，就要讀者這樣跳來跳去，實在是蠻浪費時間的。
網誌文章的回應，對於讀者來說，所代表的意義是「已經看過這篇文章的人有何感受」，也就是說，就像網路拍賣平台上的「買家/賣家評價」，可以讓交易雙方事先評估一樣，網誌文章的回應，除了讓作者和讀者互動之外，也可以讓後面的讀者在真正花時間進去看文章之前，先行判斷它究竟值不值得閱讀，值不值得自己為了它打開另一個網頁。所以說，在看文章前，讓讀者可以預覽留言，會令閱讀環境變得更友善。
上 Google 搜尋後發現，這個「在首頁顯示文章回應」功能，雖然有許多人詢問，但似乎沒有現成的實作方式。主要的原因是，Blogger 樣板依賴 data: 標籤撈資料出來，而文章回應的 data: 標籤，包括 data:comment.author（留言作者） data:comment.body（留言內容） 等，都只能夠在 pageType 是 item 的頁面，也就是單篇文章的頁面中使用。
* those data:comment.xxx tags can be used only at "pageType == item" pages, which mean the single post pages. that's why we can't just insert data tags into our templates. so we are going to do some simple javascript trick on it.
這是可以理解的，data:comment 標籤在多篇文章的頁面的話，會不知道要取哪一篇 post 的comment，所以限制只能在單篇 post 的頁面使用。（唉，是說，當初為什麼不設計成data:post.comment 呢？這樣就不必加上這層限制了。）
不過，對於立志成為程式設計師的的我來說，這點小限制，怎麼可以這樣就退縮呢？焦頭爛額了好一陣子之後，終於找到令我滿意的實作方式。原理就是利用現在流行的 ajax ，只要利用 jQuery 的 .toggle() 和 .load() 指令，就可以在 Blogger 首頁做出類似 facebook 展開留言那樣的效果。
2011年1月1日 星期六
-步驟-Blogger 移動/移除樣板底部鎖死的版權宣告字樣
remove default attribution text in footer section - my Blogger template tweak
分類：
Blogger hack,
HowTo
Blogger 新樣板的預設，在每一頁的頁尾 footer 區段，會有一個鎖死的 section ，裡面有個 widget 叫做 Attribution，裡面寫著像是「Picture Window template. Powered by Blogger. 」的字樣。如果在 page elements 頁面元素中，試圖拖曳這個取名為 Attribution 的小工具的話，會發現它的位置是鎖死的。對這個 widget 按「edit 編輯」，也只能在上面加字、儲存，卻沒有一般小工具所具備的「remove 移除」的按鈕可以按。
這個版權宣告，其實用意是很好的，每一份樣板，都是作者辛苦撰寫而來，在使用樣板的時候，加註樣板出處，可說是在開源碼世界中的一種基本的禮貌。也因此，預設的狀況下，並不希望我們移除它。
不過，我對這個版權宣告擺放的位置，有點小意見。頁尾是當網友看完（假設是）精彩的內容後，舒緩情緒時，所映入眼簾的東西。這時候，網友可能會想做三件事情：
我認為，最好的學習方式，是問題導向的學習，而最好的視覺傳達方式，當然也就是問題導向的視覺傳達。也就是說，網友當下感興趣的東西，可以馬上看到，而當下不感興趣的東西，就不要出現，以減少雜訊，這種狀態，應該是最讓人感到舒暢的。
回頭看 Blogger 樣板的版權宣告，放在每一頁的頁尾，意思是不管我們的讀者，對於網誌的內容，是感到興奮投入呢，意猶未盡呢，或是心滿意足/意興闌珊呢，都會看到這個「跟文章內容一點關係都沒有」的冷冰冰的版權宣告。其中，少數自己也在用 Blogger 寫網誌的怪咖也許會注意這則訊息，但是，這對大多數網友來說，這訊息其實是沒有意義的。人看到無意義的東西，通常會自動忽略，於是，這個頁尾的大好區段，就白白地浪費了。
這個版權宣告，其實用意是很好的，每一份樣板，都是作者辛苦撰寫而來，在使用樣板的時候，加註樣板出處，可說是在開源碼世界中的一種基本的禮貌。也因此，預設的狀況下，並不希望我們移除它。
不過，我對這個版權宣告擺放的位置，有點小意見。頁尾是當網友看完（假設是）精彩的內容後，舒緩情緒時，所映入眼簾的東西。這時候，網友可能會想做三件事情：
- 興奮投入，想跟作者互動的話，就在文章底下撰寫 comment。
- 意猶未盡，想看相關文章的話，就去按「LinkWithin」的連結。
- 心滿意足（或意興闌珊），想回到現實世界的話，就按瀏覽器的關閉分頁鈕。
我認為，最好的學習方式，是問題導向的學習，而最好的視覺傳達方式，當然也就是問題導向的視覺傳達。也就是說，網友當下感興趣的東西，可以馬上看到，而當下不感興趣的東西，就不要出現，以減少雜訊，這種狀態，應該是最讓人感到舒暢的。
回頭看 Blogger 樣板的版權宣告，放在每一頁的頁尾，意思是不管我們的讀者，對於網誌的內容，是感到興奮投入呢，意猶未盡呢，或是心滿意足/意興闌珊呢，都會看到這個「跟文章內容一點關係都沒有」的冷冰冰的版權宣告。其中，少數自己也在用 Blogger 寫網誌的怪咖也許會注意這則訊息，但是，這對大多數網友來說，這訊息其實是沒有意義的。人看到無意義的東西，通常會自動忽略，於是，這個頁尾的大好區段，就白白地浪費了。
2010年12月28日 星期二
-步驟-新作法！換樣板也不失效 - Blogger 插入 Plurk 分享按鈕，跟官方按鈕無縫整合，並自訂按鈕順序（求救：目前超過 140 字須手動刪除，跪求神人指點 Plurk 縮網址功能～）
seamlessly insert plurk share button in between default Blogger share buttons, and make it cross-templates - my Blogger template tweak
分類：
Blogger hack,
HowTo
-- 2011-01-01 文章更新：修改新作法，讓設定好的按鈕在更換樣板時也不會失效
-- 2011-01-04 註記：推文時//無法顯示的問題，請參考這篇 Ryan's Blog 的文章：Blogger 安裝推文至Plurk程式碼時，少了「//」的修正方式
-- 2011-02-16 文章更新：感謝 bingbing in the States 找出 bug，原本的 plurk 程式碼，在 gist 灰色框框中的那一段，少了一行，導致程式碼沒有作用，我是豬頭 >o<
-- 2011-02-25 更新：由於 Blogger 官方樣板修改了，導致自訂的分享按鈕不正常，請大家把程式碼跟著更新，首先，在 b:includable 到 /b:includable 之間，全部置換成紅色字的部份：
<b:includable id='shareButtons' var='post'>
<style type='text/css'>
.post-share-buttons {
width:145px;
}
.sb-plurk {
background:url(http://www.etblue.idv.tw/blogs/sb-plurk.png) no-repeat left top !important;
}
a:hover.sb-plurk {
background:url(http://www.etblue.idv.tw/blogs/sb-plurk-hover.png) no-repeat left top !important;
}
</style>
<a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
<a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
<a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
<a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
</b:includable>
接著，在你想放 plurk 按鈕的地方，插入這段：
<a class='goog-inline-block share-button sb-plurk' expr:href='"http://plurk.com/?qualifier=shares&status=" + data:post.url + " " + "(" + data:post.title + ")"' target='_blank' title='分享至 Plurk'>
<span class='share-button-link-text'>分享至 Plurk</span></a>
這樣就可以更新成 Blogger 新版的分享按鈕了。
--2011-06-12更新：加入 Google +1 按鈕的方式，請見弱格吉米言的教學文章 http://jimmyyen.blogspot.com/2011/06/blogger-sharebutton-1-button.html ，其中，跟我一樣使用 2010 Blogger 新樣板的人，請跳過步驟二。
-- 以下原文 --
omg！我竟然把 plurk 分享按鈕實作出來了！還跟 Blogger 官方的按鈕無縫整合！身為菜鳥的我真是以自己為榮啊（被丟雞蛋）
今年，Blogger 的樣板多了一個大家夢寐以求的功能：share buttons 分享按鈕。不過，預設的按鈕只有五個，依照順序分別是：
除了這個預設的按鈕順序讓人不滿意之外，更重要的是，國人第二常用的社交網站，Plurk，完全的被忽略了。雖然官方說會再陸續增加其他社交網站的按鈕，不過，我想要很久以後才會輪到 Plurk 吧。
Google 問卜得知，目前市面上有許多強者做出了又大又漂亮的按鈕，不知道是不是官方的按鈕太寒酸了，好像沒什麼人想要把 plurk 整合到官方的按鈕組裡面。不過，我個人的偏好是，只要可以用官方的就盡量不要用外掛，所以，也只能自己動手做了。
-- 2011-01-04 註記：推文時//無法顯示的問題，請參考這篇 Ryan's Blog 的文章：Blogger 安裝推文至Plurk程式碼時，少了「//」的修正方式
-- 2011-02-16 文章更新：感謝 bingbing in the States 找出 bug，原本的 plurk 程式碼，在 gist 灰色框框中的那一段，少了一行，導致程式碼沒有作用，我是豬頭 >o<
-- 2011-02-25 更新：由於 Blogger 官方樣板修改了，導致自訂的分享按鈕不正常，請大家把程式碼跟著更新，首先，在 b:includable 到 /b:includable 之間，全部置換成紅色字的部份：
<b:includable id='shareButtons' var='post'>
<style type='text/css'>
.post-share-buttons {
width:145px;
}
.sb-plurk {
background:url(http://www.etblue.idv.tw/blogs/sb-plurk.png) no-repeat left top !important;
}
a:hover.sb-plurk {
background:url(http://www.etblue.idv.tw/blogs/sb-plurk-hover.png) no-repeat left top !important;
}
</style>
<a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
<a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
<a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
<a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + "&target=buzz"' expr:onclick='"window.open(this.href, \"_blank\", \"height=415,width=690\"); return false;"' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
</b:if>
</b:includable>
接著，在你想放 plurk 按鈕的地方，插入這段：
<a class='goog-inline-block share-button sb-plurk' expr:href='"http://plurk.com/?qualifier=shares&status=" + data:post.url + " " + "(" + data:post.title + ")"' target='_blank' title='分享至 Plurk'>
<span class='share-button-link-text'>分享至 Plurk</span></a>
這樣就可以更新成 Blogger 新版的分享按鈕了。
--2011-06-12更新：加入 Google +1 按鈕的方式，請見弱格吉米言的教學文章 http://jimmyyen.blogspot.com/2011/06/blogger-sharebutton-1-button.html ，其中，跟我一樣使用 2010 Blogger 新樣板的人，請跳過步驟二。
-- 以下原文 --
omg！我竟然把 plurk 分享按鈕實作出來了！還跟 Blogger 官方的按鈕無縫整合！身為菜鳥的我真是以自己為榮啊（被丟雞蛋）
今年，Blogger 的樣板多了一個大家夢寐以求的功能：share buttons 分享按鈕。不過，預設的按鈕只有五個，依照順序分別是：
- E-mail 這篇文章（21世紀還有人在用 mail 寄文章嗎？）
- 在 Blogger 引用這篇文章（不知道別人怎樣，我是很少用啦...）
- 分享到 Twitter （怎麼會擺在第三個呢？）
- 分享到 Facebook （怎麼會擺在第四個呢？！）
- 分享到 Google Buzz （這不是 Twitter 的備份功能而已嗎？）
除了這個預設的按鈕順序讓人不滿意之外，更重要的是，國人第二常用的社交網站，Plurk，完全的被忽略了。雖然官方說會再陸續增加其他社交網站的按鈕，不過，我想要很久以後才會輪到 Plurk 吧。
Google 問卜得知，目前市面上有許多強者做出了又大又漂亮的按鈕，不知道是不是官方的按鈕太寒酸了，好像沒什麼人想要把 plurk 整合到官方的按鈕組裡面。不過，我個人的偏好是，只要可以用官方的就盡量不要用外掛，所以，也只能自己動手做了。
訂閱：
文章 (Atom)