簡睿隨筆《科技篇》-Blog工具箱

挺不賴的Windows Live Writer的插件：Polaroid Picture

Wed, 12 Nov 2008 22:00:12 +0800

從How to add Polariod-style pictures into your blog posts看到一個挺不賴的Windows Live Writer的插件：Polariod Picture，能把插入到編輯區的圖片以拍立得的樣式呈現，除了可以加標題，也能旋轉圖片。加標題或旋轉用許多美工工具都能簡單的完成，但Polaroid Picture的這些特效只利用CSS樣式完成的，既迅速又輕鬆。

(繼續閱讀...)

氣象局衛星雲圖修正－討厭，怎麼又改了？

Mon, 03 Nov 2008 22:48:22 +0800

從昨天開始中央氣象局的衛星雲圖連結圖檔都無法正確顯示，晚上檢查一下，發現圖檔檔名原本用的「時-日-月-年」格式突然變成「年-月-日-時」，修改後即告正常。完整程式如下，以自由欄位加入：

2008/11/03修改：

(繼續閱讀...)

HighLight：程式碼顯示的美化工具

Sat, 04 Oct 2008 16:21:34 +0800

在Blog裡顯示程式碼經常都有繁瑣的程序，我使用過dp.SyntaxHighlighter、CodePress與Syntax Highlighting in JavaScript等JavaScript程式庫，功能各有高低但都必須在網站上存放JavaScript檔案，若存放的網站發生問題或不再提供服務（如Google Page Creator即是）時，原先貼入程式碼的文章就會發生問題，最後我反而覺得倒不如直接列入HTML格式的程式碼就好，如此就不會受限於外部網站或Blog的<PRE>、<XMP>的處理規則了。

HighLight的操作很簡單：指定好要操作的檔案與輸出格式後，指定輸出選項，再按〔Convert files〕就可以了。輸出選項如下圖所示有四大項：

行號格式：要讓程式碼標上行號的話必須勾選本項設定，行號的號碼要用HTML的OL+LI格式輸出時則再將【HTML ordered list】打勾，使用OL+LI的好處是在此格式下按左鍵選取程式碼時不會選取到行號號碼，若未勾選則行號號碼會一併被選取到。

另外在FireFox下還要自行將</LI>刪去，否則每行會多出一行空行，IE則能正確顯示。
換行處理：當一行程式超過網頁右邊界時要如何處理，在後面有簡單說明。
是否輸出表頭和表尾：若是要貼到Blog裡，一般是不需要勾選的
樣式的輸出方式：標籤樣式可以產生成外部的.CSS檔，或內嵌在標籤裡，為求簡單則勾選之以使用內嵌格式

按下〔Convert files〕後就會將加上.html的檔名產生在指定的資料夾裡，用記事本等文書編輯程式讀取並選取到剪貼簿後，全部貼到Blog文章的原始碼裡即可。

再來說明換行的處理對輸出造成的影響。在沒有勾選Line wrap的情況時，程式碼超過右邊界時不做任何處理。

勾選了【Line Wrap】，則超出右邊界的「有些」會被切到下一列開頭。由下圖可以看到並不是每行都會成功換行。

再勾【Intelligent Wrap】時，部份超出右邊界的程式會被切到下一列並對齊上一行的較後面位置。要採用那種換行顯示悉聽尊便。

HighLight是很方便的程式碼輸出工具，又是自由軟體，推薦大家多多使用。

下載：http://www.andre-simon.de/zip/download.html
支援的輸出格式：HTML, XHTML, RTF, TeX, LaTeX, SVG與XML
支援的輸入語言：超過120種程式語言
能選用的輸出樣式：40種

最後貼上我的Ubiquity命令程式做為範例：

/*
  * V1.0.1 2008/09/01
  * V1.0.2 2008/09/26 加入plurk指令
  * V1.0.3 2008/09/27 改進plurk, 在開頭加入qualifier動詞
  * V1.0.4 2008/09/28 改進plurk, qualifier動詞-語系, 如loves-cn, loves-en
  */
CmdUtils.CreateCommand({
  name: "funp",
  author: { name: "emisjerry"},
  contributors: ["emisjerry"],
  license: "GPL",
  description: "選取好描述文字，把本篇文章貼上推推王",
  takes: {"輸入標籤名稱": noun_arb_text},
  icon: "http://funp.com/favicon.ico",
  execute: function(directObject) {
    var _sSelection = CmdUtils.getSelection();
    //window.alert(_sSelection + ':' + context.focusedWindow.location.href);
    var _aTags = directObject.text.split(" ");  // 把輸入字串分成陣列
    var _sTags = "";
    for (var ele in _aTags) {
      _sTags += "&tags[]=" + encodeURIComponent(_aTags[ele]);
    }
    if (_sTags == "") _sTags = "&tags[]=科技";  // 未輸入標籤則預設為科技
    else _sTags = _sTags.replace(/tech/, '科技');  // 把tech標籤換成科技, 加快輸入速度
    Utils.openUrlInBrowser("http://funp.com/push/submit/?popup&url=" +
      encodeURIComponent(context.focusedWindow.location.href) +
      "&t="+encodeURIComponent(_sSelection)+_sTags);
  }
});
  
CmdUtils.CreateCommand({
  name: "dict",
  author: { name: "emisjerry"},
  contributors: ["emisjerry"],
  license: "GPL",
  description: "Yahoo!奇摩字典",
  takes: {"要翻譯的字彙": noun_arb_text},
  icon: "http://tw.dictionary.yahoo.com/favicon.ico",
  execute: function(directObject) {
    Utils.openUrlInBrowser("http://tw.dictionary.yahoo.com/search?ei=UTF-8&p=" +
      directObject.text );
  }
});
  
CmdUtils.CreateCommand({
  name: "cdic",
  author: { name: "emisjerry"},
  contributors: ["emisjerry"],
  license: "GPL",
  description: "教育部國語辭典",
  takes: {"要翻譯的字彙": noun_arb_text},
  //icon: "http://tw.dictionary.yahoo.com/favicon.ico",
  execute: function(directObject) {
    Utils.openUrlInBrowser( "http://140.111.34.46/cgi-bin/newDict/dict.sh?idx=dict.idx&pieceLen=50&fld=1&imgFont=1&cond=" +
 (directObject.text));
  }
});
  
/*
 * Original author: http://theunfocused.net/moz/ubiquity/verbs/, Blair McBride
 * Copied from http://www.plurk.com/user/fortelin
 * sample: plurk loves Plurking test.
 */
CmdUtils.CreateCommand({
  name: "plurk",
  takes: {status: noun_arb_text},
  
  homepage: "http://theunfocused.net/moz/ubiquity/verbs/",
  author: {name: "Blair McBride", homepage: "http://theunfocused.net/"},
  modifier: {name: "Jerry Chien"},
  license: "MPL",
  
  preview: function(previewBlock, statusText) {
    var previewTemplate = "將要發佈的內容如下: <br/>" +
                          "<b>${status}</b><br /><br />" +
                          " 總字數為: <b>${chars}</b>";
    var truncateTemplate = "<br />後面 <b>${truncate}</b> " +
                           "個字將予以刪除!";
    var previewData = {
      status: statusText.text,
      chars: statusText.text.length
    };
  
    var previewHTML = CmdUtils.renderTemplate(previewTemplate,
                                                    previewData);
  
    if(previewData.chars > 140) {
      var truncateData = {
        truncate: previewData.chars - 140
      };
  
      previewHTML += CmdUtils.renderTemplate(truncateTemplate,
                                                   truncateData);
    }
  
    previewBlock.innerHTML = previewHTML;
  },
  
  execute: function(statusText) {
    if(statusText.text.length < 1) {
      displayMessage("Plurk 內容不可空白");
      return;
    }
    var _sQualifier = "says";
    var _sLang = "tr_ch";  // 預設為繁體中文
    var _sText = statusText.text;
    var _iIndex = _sText.indexOf(" ");
    var found = false;
    if (_iIndex > 0) {
      var _aQualifiers = ["loves","likes","shares","gives","hates","wants",
        "wishes","has","will","wonders","asks","was","feels","thinks","says","is"];
      var _sVerb = _sText.substring(0, _iIndex);  // 要使用的qualifier
      var _iIndex2 = _sVerb.indexOf("-");  // loves, loves-tw, loves-cn, loves-en, 減號後面加語系
      if (_iIndex2 > 0) {
        var _sVerbLang = _sVerb.substring(_iIndex2+1).toLowerCase();
        if (_sVerbLang=="tw") _sLang = "tr_ch";
        else _sLang = _sVerbLang;
  
        _sVerb = _sVerb.substring(0, _iIndex2);  // loves-cn ==> loves
      }
      for (var ele in _aQualifiers) {
        if (_sVerb==_aQualifiers[ele]) {
          found = true;
          _sQualifier = _sVerb;
          _sText = _sText.substring(_iIndex+1);
          break;
        }
      }
    }
  
    var updateUrl = "http://www.plurk.com/TimeLine/addPlurk";
    var updateParams = {
      uid: 3170067,
      qualifier:_sQualifier,
      lang:_sLang,  // en
      content: _sText
    };
  
    jQuery.ajax({
      type: "POST",
      url: updateUrl,
      data: updateParams,
      dataType: "json",
      error: function() {
        displayMessage("Plurk 發佈錯誤");
      },
      success: function() {
        displayMessage("Plurk 發佈成功");
      }
    });
  }
});

簡單放大Plurk輸入區的方法

Mon, 29 Sep 2008 18:31:35 +0800

讀者們在打回應訊息時是否會跟我一樣老是覺得這個框實在是太小了？雖說只能打140個字，但框大一點也看得服些吧？我由這篇How to increase the size of your response box找到了解答，再順便把修改張貼內容與最下面的輸入框也加大。

首先按左上角的〔編輯〕→〔自訂外觀〕，把下列的CSS指示輸入樣式框裡：

#input_small { height: 70px;}
textarea#input_big.content { height:70px; wrap:soft}
td.td_cnt textarea { height:100px; }

回應輸入框變身前	回應輸入框變身後

訊息輸入框變身前	訊息輸入框變身後

修改框放大後：

讓訊息輸入框變大的另一個方法是安裝FireFox的擴充：Resizable Textarea，安裝後就能在框的邊緣用拖拉的方法動態變更框的大小。

用Ubiquity快速發佈 Plurk 訊息-改良版

Sat, 27 Sep 2008 15:06:29 +0800

2008/09/28 修改2：

動詞後面可以加-tw, -cn, -en等變更語系為繁體中文、簡體中文與英文。如：plurk loves-cn 動詞變簡體的愛。

程式請直接點http://220.134.115.15/files/ubq/ubq_jerry.js另存新檔檢視，不再張貼了。

先前的第一版只能用「說」來張貼簡訊，在這個改良版裡加入了指定Qualifier的參數，格式變成：「plurk Qualifier Message」，Qualifier與Message之間以一個空白隔開，若未指定Qualifier則預設為 says。Qualifier只能是Plurk認識的"loves","likes","shares","gives","hates","wants","wishes","has","will","asks","was","feels","thinks","says","is"這幾種。更新方法與第一版相同。

/*
* Copied from http://www.plurk.com/user/fortelin
* sample: plurk loves Plurking test.
*/
CmdUtils.CreateCommand({
name: "plurk",
takes: {status: noun_arb_text},
homepage: "http://theunfocused.net/moz/ubiquity/verbs/",
author: {name: "Blair McBride", homepage: "http://theunfocused.net/"},
modifier: {name: "Forte Lin"},
license: "MPL",
preview: function(previewBlock, statusText) {
    var previewTemplate = "將要發佈的內容如下:
" +
                          "${status}

" +
                          " 總字數為: ${chars}";
    var truncateTemplate = "
後面 ${truncate} " +
                           "個字將予以刪除!";
    var previewData = {
      status: statusText.text,
      chars: statusText.text.length
    };
    var previewHTML = CmdUtils.renderTemplate(previewTemplate,
                                                    previewData);
    if(previewData.chars > 140) {
      var truncateData = {
        truncate: previewData.chars - 140
      };
      previewHTML += CmdUtils.renderTemplate(truncateTemplate,
                                                   truncateData);
    }
    previewBlock.innerHTML = previewHTML;
},
execute: function(statusText) {
    if(statusText.text.length < 1) {
      displayMessage("Plurk 內容不可空白");
      return;
    }
    var _sQualifier = "says";
    var _sText = statusText.text;
    var _iIndex = _sText.indexOf(" ");
    var found = false;
    if (_iIndex > 0) {
      var _aQualifiers = ["loves","likes","shares","gives","hates","wants",
        "wishes","has","will","asks","was","feels","thinks","says","is"];
      var _sVerb = _sText.substring(0, _iIndex);
      for (var ele in _aQualifiers) {
        if (_sVerb==_aQualifiers[ele]) {
          found = true;
          _sQualifier = _sVerb;
          break;
        }
      }
    }
    if (found) {
      _sText = _sText.substring(_iIndex+1);
    }

    var updateUrl = "http://www.plurk.com/TimeLine/addPlurk";
    var updateParams = {
      uid: 3170067,
      qualifier:_sQualifier,
      lang:"tr_ch", // en
      content: _sText
    };
    jQuery.ajax({
      type: "POST",
      url: updateUrl,
      data: updateParams,
      dataType: "json",
      error: function() {
        displayMessage("Plurk 發佈錯誤");
      },
      success: function() {
        displayMessage("Plurk 發佈成功");
      }
    });
}
});

簡單的Mozilla Ubiquity應用2：將目前網頁貼上推推王的命令

Sun, 31 Aug 2008 18:43:09 +0800

使用Ubiquity將目前瀏覽網頁貼上推推王的命令如下。網址列會填入目前網頁的網址，選取的文字會填入「描述」欄位，命令的參數會形成標籤，若標籤為 tech則會自動轉換成「科技」，例如：funp Google Web2.0 tech。

// V1.0.1 2008/09/01修改

CmdUtils.CreateCommand({
name: "funp",
author: { name: "emisjerry"},
contributors: ["emisjerry"],
license: "GPL",
description: "選取好描述文字，把本篇文章貼上推推王",
takes: {"輸入標籤名稱": noun_arb_text},
icon: "http://funp.com/favicon.ico",
execute: function(directObject) {
    var _sSelection = CmdUtils.getSelection();
    //window.alert(_sSelection + ':' + context.focusedWindow.location.href);
    var _aTags = directObject.text.split(" "); // 把輸入字串分成陣列
    var _sTags = "";
    for (var ele in _aTags) {
      _sTags += "&tags[]=" + encodeURIComponent(_aTags[ele]);
    }
    if (_sTags == "") _sTags = "&tags[]=科技"; // 未輸入標籤則預設為科技
    else _sTags = _sTags.replace(/tech/, '科技'); // 把tech標籤換成科技, 加快輸入速度
    Utils.openUrlInBrowser("http://funp.com/push/submit/?popup&url=" +
      encodeURIComponent(context.focusedWindow.location.href) +
      "&t="+encodeURIComponent(_sSelection)+_sTags);
}
});

你可以把上述命令直接貼入Ubiquity Command Editor，或瀏覽我的命令網頁再訂閱它。

如何備份Windows Live Writer的草稿與張貼內容？

Sun, 24 Aug 2008 20:24:51 +0800

一直以來Blog文章都是先用KompoZer（Nvu的非官方版）編輯好再貼到幾個同步發表的Blog上，但KompoZer無法正確斷行的問題卻始終無法解決，今天為了測試Windows Live Writer（簡稱WLW）的功能，順便試看看能否把書寫平台換到WLW時，同時可以更簡單的把文章張貼到多個Blog裡。

安裝好WLW後（安裝過程已有許多先進有寫了，請自行搜尋），再把Blog設定好，屆時即可方便的在多個Blog間切換與發佈文章；Blogger與微軟的Windows Live Spaces很容易就能設定好，別的BSP則需要額外設定。以下是樂多與博客大巴的設定摘要：

樂多
- 提供者：Metaweblog API
- 遠端張貼URL：http://xmlrpc.blog.roodo.com/cgi-bin/mt/mt-xmlrpc.cgi
PIXNET（未測試，請自行檢測）
- 提供者：Wordpress 2.2+
- 遠端張貼URL：http://blog.pixnet.net/xmlrpc.php
博客大巴
- 提供者：Atom Publishing Protocol
- 遠端張貼URL：http://您的博客地址/api

可惜Xuite尚無法遠端張貼。

使用WLW寫了幾篇文章後覺得WLW實在不錯，把Blog撰寫的常用功能彙整得相當便利，所有的功能聚焦在Blog文章的生成與發佈程序，比網頁編輯工具（如FrontPage或Nvu）簡單，功能也比BSP提供的編輯網頁強，算是介於二者之間的一個專用工具。

用了一會後想要把檔案另存到備份資料夾，但在功能表【檔案】裡卻找不到另存新檔的選項，搜尋後在Move Draft Posts Written in Windows Live Writer Across Computers一文裡找到答案：

草稿存放在C:\Uses\帳號\My Documents\My Weblog Posts\Drafts（XP使用者把C:\Users換成C:\Documents and Settings即可）資料夾裡
最近張貼內容則在C:\Uses\帳號\My Documents\My Weblog Posts\Recent Posts裡

張貼內容都儲存為.wpost格式，.wpost檔案原來是ZIP格式，因此能用WinZip或7-Zip來開啟，本文就在名為Content的那個檔裡。把找到的.wpost檔案複製到常用的備份資料裡就能在本機另外備份文章內容了。

和風部落格FC2有中文版了

Sun, 10 Aug 2008 19:48:05 +0800

如果你平常就喜歡日系風格的話，告訴你一個好消息：日本的部落格提供商FC2最近推出了繁體中文與簡體中文的操作介面了。

首先申請好FC ID後再建立部落格即可，全程都是中文，照著指示很快就能建立好。FC2提供了169種樣板供使用者自行選擇，想要嘗鮮的和風受好者請自行去挑選吧，這個是我隨手選擇的少女與貓熊樣板，似乎是太可愛了點 :-) ．．．。

##

Blog側邊欄改用iframe以提升網頁載入速度

Sun, 06 Jul 2008 09:50:24 +0800

不知為何，最近Blog的Loading速度有時會變很慢，卡住的狀況如同天殺的 BloggerAds / 部落格觀察所描述的一般，乾脆花點時間把BloggerAds和塞標籤都改成 iframe 的方法來載入吧。

首先要找到一個可以存放外連檔案的網站，建立bloggerAds.html與sitetag.html，內容如下：

bloggerAds.html

sitetag.html

先在瀏覽器裡載入外部網頁測試看看，若正常再修改Blog裡的自由欄位（插入欄位）。

BloggerAds欄位

SiteTag欄位

希望這樣的修改能對網頁載入速度有幫助。另外，Xuite欄位的換行問題終於修改好，不會自作「聰明」的把所有指令都連成一行了。

##

解決NVu、Kompozer的換行問題

Sat, 10 May 2008 15:44:04 +0800

如果你仔細檢視我的文章文字，會發現有一些莫名其妙的空白出現在不應出現的句子中間，原來這都是我使用的網頁編輯軟體NVu和它的修訂版本Kompozer的自動換行問題造成的。今天在這裡（分享：Nvu/KompoZer格式化Html源碼的問題及解決）發現了解決方法，雖然並未完全克服這個問題，但結果應該會比未處理前來得好些。改善的步驟如下：

下載給NVu或Kompozer使用的擴充（Extensions）：HandCoder
由功能表【Tools→Extensions】安裝HandCoder
再下載整理HTML內容的工具：Tidy
重新啟動NVu或Kompozer後，由【Tools→HandCoder→Options...】在第二個Tidy頁籤裡指定Tidy.exe路徑
在工具列空白處按右鍵選【Customize Toolbar】把「Editor」拖到工具列裡

這樣在寫完文章後按一下工具列上的Editor，它會開啟指定好的文字編輯器，並使用Tidy.exe整理好，看過沒問題後按儲存，再回到NVu或Kompozer，再複製所有內容後就可貼到Blog裡了。

分享： Nvu/KompoZer格式化Html源碼的問題及解決作者提供最終的解決方法是功能表【Tools→JavaScriptConsole】再於輸入框裡輸入「top.opener.GetCurrentEditor().wrapWidth = 9999」按〔Evalute〕，再用「Editor」即可。同時該作者也提供了操作錄影可以參考。

下載連結

HandCoder：http://fabiwan.kenobi.free.fr/xpi/?id=HandCoder&ver=0.3.4-en
Tidy：http://www.paehl.com/open_source/?download=tidy.zip

[FireFox擴充] Table2Clipboard：完整複製網頁表格

Sat, 16 Feb 2008 21:37:42 +0800

想完整的複製網頁裡的HTML表格(...

)經常要花不少繁瑣的操作，所幸Table2Clipboard簡化且完美地完成了這個複製動作。

安裝Table2Clipboard前

用〔Ctrl+Click〕點選表格的儲存格(Cell)，選取表格裡的所有儲存格
按〔Ctrl+C〕將選取內容複製到剪貼簿
開啟Excel後按〔Ctrl+V〕貼上剪貼簿的內容，結果如下圖：

安裝Table2Clipboard後

用〔Ctrl+Click〕點選表格的儲存格(Cell)，選取表格裡的所有儲存格
以【右鍵功能表】→【Copy selected cells】或【Copy whole table】，則表格內容便複製到剪貼簿
開啟Excel後按〔Ctrl+V〕貼上剪貼簿的內容，結果如下圖：

比對後可以發現Table2Clipboard複製出來的格式與內容較完整，也更容易取來再利用。這個擴充套件對於網頁設計人員應該是個利器吧。

Table2Clipboard資訊

官方網站：https://addons.mozilla.org/en-US/firefox/addon/1852
目前版本：0.03
參考：Copy Tables and Keep Their Formatting with Table2Clipboard

[FireFox擴充] 牛仔好忙，等會再看吧!

Thu, 07 Feb 2008 19:07:51 +0800

使用Google Reader或Bloglines等閱讀RSS訂閱項目時，都會把準備要看的文章開啟在新分頁或新視窗，以備隨後慢慢瀏覽，此時最怕遇到FireFox當掉導致所有已開啟視窗都付諸流水的慘劇，幸好這個FireFox擴充套件Read it Later解決了這個問題。

首先由這裡安裝好Read it Later，再於功能表右側空白處按【右鈕→自訂...】，把Read Later、Reading List兩個圖示拖放到工具列上，隨後就能透過這兩個圖示與右鍵功能表上的【Read This Page Later】選項來操作。

Read Later圖示有兩種狀態：
- ：按一下會將瀏覽中的網頁存入稍後再讀的清單裡
- ：若本頁已被加入閱讀清單則會顯示勾選圖示，再按一次就變成上一個圖示；若按下拉箭頭符號則能再選擇要加入的書籤系統（如del.icio.us或Digg等）。可惜找不到黑米或funP的選項。
Reading List圖示則存放所有稍後再讀的各個網頁連結，選取網頁後就會在分頁裡顯示其內容
- 在下拉按鈕裡有離線閱讀的實驗性功能，可以把清單裡的網頁先存到硬碟裡供離線時閱讀
Read This Page Later：在超連結上開啟右鍵功能表，或按〔R+右鍵〕則可以將超連結加入稍後再讀清單

如果你也跟我一樣每天要看許多的RSS項目的話，Read it Later是個不錯的套件。

參考：Build an Online Reading List with “Read It Later”

##

加入兔斯基表情圖形的網頁

Wed, 16 Jan 2008 23:54:35 +0800

為了方便使用好笑的兔斯基圖形，隨手寫了一個網頁以方便複製，有興趣用的請自行拷貝去用吧。原本想左鍵Click後自動把圖形貼到剪貼簿，但window.clipboardData似乎沒辦法處理圖形，嗯～有空再來解決了。

Xuite的回應感覺怪怪的，外部的圖形無法在FireFox裡貼，但IE卻又能貼成功，很是怪異...。

以下是幾個卡哇伊的兔斯基範例：

圖檔原作者資料：姓名：王卯卯（MOMO）
官方網站：http://blog.sina.com.cn/wangmomo

##

[FireFox] 替頁籤編號的擴充

Sun, 04 Nov 2007 23:23:56 +0800

忘了在那看到介紹一個FireFox擴充：Fancy Numbered Tabs，它能在FireFox的頁籤上加上 1 到 9 的圖示，我們可以按Ctrl+1～Ctrl+9或Alt+1～Alt+9以立刻切換到特定的頁籤，當開啟的網頁還不太多時，Fancy Numbered Tabs應該能提供方便的操作。

##

在Blog裡顯示隨機文章的簡單作法

Sun, 14 Oct 2007 20:43:53 +0800

先前有一陣子使用del.icio.us的API取回隨機文章並顯示在文章底部，今天有讀者留言提示了一個提供隨機文章服務的網站：Stuff a Blog，以下是試用紀要。

Stuff-a-Blog目前提供兩個服務：BMash和BStir：

BMash提供使用者輸入關鍵字以形成查詢結果網頁，再讓我們貼到Blog裡。
BStir提供產生隨機文章的程式碼，把產生好的程式碼貼到自由欄位裡，就能顯示隨機文章了(BStir名稱我猜測如下：B是Blog，Stir是攪動的意思)

隨機文章可以指定要取用幾篇文章，並有兩種顯示方法：

Dynamic：幻燈片式的動態顯示，每次顯示一篇，每隔數秒輪流顯示(output=slideshow)
Static：一次顯示指定篇數的靜態網頁(output=html)

如果你也想要顯示隨機文章，那麼Stuff-a-Blog的方法是更簡單的作法。

參考：Mr.布 & Ms.艾隨機文章出現方法

##

Google Reader快速訂閱的FireFox擴充Google Reader快速訂閱的FireFox擴充

Sat, 16 Jun 2007 22:49:42 +0800

一直以來使用的RSS Feeds Reader都是使用Bloglines，今天終於受不了它每次都必須把某個分類裡所有未讀的 Feeds都讀取完畢所造成的遲緩，開始轉移陣地到Google Reader。用匯入很輕易地就把Bloglines裡訂閱的Feeds轉移過來，操作一會後發現它的Next item在讀沒什麼營養的長篇大論時很是便利，不用再拚命去拉捲軸或滾輪。但是也遇到一些問題無法解決：

中文分類會無法匯入：分類（或稱資料夾或Google Reader裡的標籤）若為中文是無法匯入的
標籤名稱找不到地方修改，只有刪除的按鈕

另外就是找不到快速訂閱的瀏覽器工具列按鈕(Toolbar button)，最後終於找到提供相同功能的FireFox擴充：Jasper's Google Reader Subscribe 0.3，在執行這個擴充前必須先安裝Greasemonkey (A user script manager for FireFox)才能順利運行。

安裝後當您瀏覽的網站有提供RSS Feeds時，在網頁右上角就會出現RSS Feeds的圖示：尚未訂閱的會以藍色呈現，已經訂閱過的會以橘紅色和一個超大的勾勾呈現（想要縮小勾勾的大小，卻不知如何下手 :-(）。把滑鼠游標移到未訂閱的藍色圖示時，能訂閱的Feeds就會顯示出來，點選後就連結到Google Reader的訂閱網頁，就這樣能快速的訂閱有興趣的網站。

已訂閱的網頁	尚未訂閱過的網頁	訂閱

原來以為到此已算大功告成，沒想到在按了訂閱後是在原網頁直接轉址到Google Reader，而我比較希望能開新分頁而不要覆蓋到正在瀏覽的網頁，因此研究了修改的方法：

開啟Greasemonkey的選項視窗：FireFox功能表：【工具→附加元件】，找到【Greasemonkey】後按【選項】按鈕
找到Jasper's Google Reader Subscribe，按左下角的【編輯】，此時會彈出要求指定文字編輯器的視窗，請找到慣用的編輯器或c:\windows\notepad.exe即可
此時編輯器讀入jaspersgooglereadersubsc.user.js，移到第42行，做下列修改(加上target="_blank"以使連結開啟新頁)：

修改前	JGRSfeeds.innerHTML += ''+ feed.title +'';
修改後	JGRSfeeds.innerHTML += ' target="_blank" href=http://www.google.com/reader/view/feed/'+ encodedFeedUrl +'>'+ feed.title +'';

變更文章底端的【黑米共享書籤】推文/貼文按鈕

Sun, 03 Jun 2007 14:44:03 +0800

黑米共享書籤推出了新的推文按鈕 [功能] 黑米小按鈕，能顯示迴響、收藏與推薦的數目並具有連結功能。

	1個迴響
	在新視窗開啟推薦網頁
	在新視窗開啟收藏網頁
	收藏推薦人數

黑米的這個功能是透過其http://js.hemidemi.com/javascripts/hemidemi_bookmark_button.js來達成，除非您是自己架站或使用如Blogger.com般能自訂頁面樣板的Blog系統，否則很難直接使用。我將上述網址取回的JavaScript程式碼做了修改，把計算網頁的MD5碼函數拆出成獨立的md5.js，再於bookmark_buttons.js裡建立需要的iframe元素，最後再把此元素加入到文章底部的posted物件裡。這樣應該沒有侵犯到任何智慧財產權吧，若有此類問題的話，請留言通知。

原本也打算把推推王的書籤按鈕也改掉，但發現貼文按鈕只能把網址傳至收錄網頁，文章抬頭與標籤皆無法傳遞，因此還是先保持原樣好了。若想自行設定者，請參考推推王推文按鈕貼紙這篇。

網頁程式碼美化程式 Google Code Prettify

Sun, 27 May 2007 17:14:53 +0800

由Idea Grapes看到Google牌的網頁程式碼美化程式：Google Code Prettify，在README裡就能看到完整的安裝步驟。

參考：

dp.SyntaxHighlighter:在網頁顯示美觀的程式碼
網頁顯示程式碼的美容師：CodePress

在字裡行間發出嗡嗡聲：LineBuzz--線上註解服務

Sun, 20 May 2007 16:38:45 +0800

雖然《槽边往事》---比特海日志的作者翻譯了很糟的FreeBuner中文版，但是他這篇雀神怪鸟的Linebuzz倒是介紹了一個很有趣的網路服務：LineBuzz。所謂的Buzz，指的就是嗡嗡聲，如蜜蜂發出的或拿起電話未撥號前的嗡嗡聲，網站取名為LineBuzz，提供的就是讓你的Blog的讀者，在你文章的字裡行間能隨意發表註解與意見。以往的回應只能針對一整篇文章，LineBuzz則讓讀者們能自由標示一段文字後，彈出一個小視窗來填寫任意文字，儲存後形成超連結而能再次顯示輸入的文字並讓別的讀者再回應。

輸入註解後文章會形成超連結：

點擊後出現詳細內容：

只要到lLineBuzz註冊，再把它產生的JavaScript放到側邊欄裡，就擁有上述的功能了。本網站已經加上此功能了，有興趣的讀者，請試用看看吧。只要把一段文字標示起來，就會出現一個框，點擊它就能輸入註解了。

免費計數網站 SiteMeter 換新妝

Wed, 09 May 2007 09:14:28 +0800

雖然據說 SiteMeter 會偷偷在你的瀏覽器裡安裝分析用的Cookie，雖然它提供的功能和介面與Google Analytics比較下相形失色，但因為它簡單又方便，還提供較明細的訪客資訊，所以我還是繼續使用。今天，它的新版在宣告許久後終於上線了，晚點再來做詳細些的測試。

用樣式控制Google AdSense廣告顯示的位置

Thu, 03 May 2007 23:13:32 +0800

要把Google AdSense顯示在Blog首頁的表頭區（表頭指的是網頁頂端有Blog標題、小標題與底圖的那塊約1024X200大小的區域）有兩個方法：一個是比照先前介紹過用JavaScript動態替換innerHTML的方法，另一個更簡單，使用樣式表即可。

首先說明使用樣式的作法，一樣把由Google AdSense網頁取到的指令用

包起來，此區域命名為divAdSenseLinkCSS；這些指今必須放在顯示在最上方的自由欄位裡：

// Google AdSense複製來的指令

再加上控制divAdSenseLinkCSS區域的顯示位置的樣式：

把定位方式設定成絕對位置(absolute);
左上角往上移140像素；第一個自由欄位再往上就是表頭區了;
左邊界自行調整

如果

不是放在第一個自由欄位，適度調整 top 的值就能做到準確定位。
照標準，樣式必須寫在區，但經測試把它放在區裡仍然能生效。因此最後要使用的完整指令碼如下，把指令複製到自由欄位裡即可：

// Google AdSense複製來的指令

原先的方法是您要額外再定義一個名為divAdSenseLinkScript的區域，使用如下指令就能把廣告顯示在Blog小標題下面了：

「網頁載入中，請稍候．．．」的簡單作法

Wed, 02 May 2007 23:08:03 +0800

隨著自由欄位的越來越五彩繽紛、五花八門之後，網頁載入的速度也越來越慢。為了提示讀者耐心等候，特別加了個「載入中」的小框，就像AJAX技術常見的樣式一般。以下說明我在 Xuite 裡達成的方法與步驟。

首先在顯示在最上面的自由欄位裡加上如下HTML標籤：

divLoading"
style="border:3px blue solid;background-color:#ba2a4a;color:white;position:absolute;top:-50px;left:350px;width:250px;height:50px;z-order=0">
style="vertical-align:middle;padding:6px"/>
網頁載入中，請稍候...

基本結構就是用一個區域(div，division) 把圖形和載入中的文字包在一起，因為是放在第一個自由欄位裡，所以會在很早的時間裡就執行到而顯示在自由欄位上方50像素的位置(top: -50px)。因為這段HTML 是放在第一個自由欄位裡，自由欄位的左上角就是座標 (0, 0)，要將此區域向上移動就是把底端用負值即可，此例中我把位置向上移了50個像素(-50px)。

類似AJAX的「載入中」圖形在網路上可以找到不少，其中AJAXLoad是一個能自行設定的圖形產生網頁，可依需求指定圖形的樣式與顏色等；如果您懶得去找或用產生器的話，以下是一些我上載好的：

	http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/7.gif
	http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/0.gif
	http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/9.gif
	http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/8.gif
	http://b.blog.xuite.net/b/3/a/c/11893557/blog_10351/txt/11293067/6.gif

最後在任何一個自由欄位裡設定window.onload事件，在此事件裡把顯示出來的區域(divLoading)的顯示樣式變成 "none"，則「載入中」的框框就消失了。

Xuite網址的正規運算式測試

Tue, 01 May 2007 00:05:08 +0800

Xuite的網址真是找人麻煩。這當然是對不熟悉正規運算式的我才成立的。

經過分析，Xuite的網址有下列幾種Pattern：

序	網址	說明
1	http://blog.xuite.net/emisjerry/tech	首頁(Blog清單，第一頁)
2	http://blog.xuite.net/emisjerry/tech?p=2	首頁(Blog清單，第二頁)
3	http://blog.xuite.net/emisjerry/tech/11327060	某篇文章網頁；有文章編號表示是文章網頁
4	http://blog.xuite.net/emisjerry/tech/11327060#message	第一頁按回應的某篇文章
5	http://blog.xuite.net/emisjerry/tech/11327060#trackback	第一頁按引用的某篇文章
6	http://blog.xuite.net/emisjerry/tech/11157208?p=2	首頁第二頁的某篇文章網頁
7	http://blog.xuite.net/emisjerry/tech/11157208?p=2#message	按了回應後的某篇文章
8	http://blog.xuite.net/emisjerry/tech/11157208?p=2#trackback	按了引用後的某篇文章

我的目標是判斷目前網頁是某篇文章的全文，只有在文章內部才要加上隨機的相關文章與Google AdSense廣告，在首頁(有第一頁到第十頁)則不顯示相關文章和廣告。

透過 reWork: a regular expression workbench 測試了半天，下列運算式似乎能正確判斷出文章內部：

^http:\/\/blog.xuite.net\/.*\/\d+(\?p=\d+)?(#message|#trackback|)

^http:\/\/blog.xuite.net\/	以http://blog.xuite.net/ 開頭因為斜線是特殊符號，必須用 \ 來使用需要的正斜線	http://blog.xuite.net/
.*	後面接續的是任意符號點(.) 是萬用字元，星號表示其前置字元出現0或多次	tech 或 365day等 http://blog.xuite.net/tech
\/	後面再接一個正斜線	http://blog.xuite.net//tech/
\d+	一或多個數字	數字是文章編號，遇到數字則表示目前網頁是在文章內部
(\?p=\d+)?	最後面的問號表示其前置字元是選擇性的(即可有可無)；圓括號則表示形成字元群組，\?表示要使用問號，再接p=和一組數字(\d+)	http://blog.xuite.net/emisjerry/tech/11157208?p=2 或 http://blog.xuite.net/emisjerry/tech/11157208 都會成立
(#message\|#trackback\|)	#message或#trackback或空白	http://blog.xuite.net/emisjerry/tech/11157208?p=2#message http://blog.xuite.net/emisjerry/tech/11157208?p=2#trackback http://blog.xuite.net/emisjerry/tech/11157208?p=2 http://blog.xuite.net/emisjerry/tech/11157208 以下皆成立

經初步測試似乎可行。若您熟悉正規運算式的話，請協助驗證。Thanks.

[創作] 字型工具產生器：動態變更Blog網頁的字型大小

Sun, 29 Apr 2007 17:32:09 +0800

Font Tool Generator 字型工具產生器

本工具是用來產生置放於Blog側邊欄的HTML指令，用來動態變更網頁的字型大小，如此當別人瀏覽自己的Blog時，能透過這個側邊欄很方便的放大或縮小你網頁的字體大小，不再受限你的瀏覽器或CSS(樣式表)的原始設定。操作步驟說明如下：

選擇本工具的顯示語言，目前有英文與繁體中文兩種，預設是英文
在ID與Function之間的欄位：設定輸出的文字與背景顏色
Function下面可以指定放大或縮小的圖形路徑與文字標題
除了放大或縮小的圖形外，也有下拉選單，可指定能設定的字體最小與最大之大小，每次變更大小表示每個字形大小的遞增數量
作用對象元素：變更大小的對象，請自行由您的網頁查出；Xuite與樂多輸入container 表示整個網頁
顯示樣式：有垂直與水平兩種樣式
設定好後必須按下「啟用新設定」才能使用變更生效
最後按下「產生HTML」後把網頁底部產生出的HTML指令複製並貼入您的自由欄位 (或稱插入欄位)即可

如果在操作上有疑問，或有增強建議的，請寄信到emisjerry@gmail.com 或在簡睿隨筆留言。

[創作] 翻譯服務產生器：產生放於Blog側邊欄的翻譯按鈕

Sat, 28 Apr 2007 23:23:36 +0800

Google Translator Generator 翻譯服務產生器

本工具是用來產生能置放於Blog側邊欄翻譯功能的HTML指令產生器。翻譯是透過Google Translate來達成。操作畫面分成三欄，左欄是選擇功能表，中間是示範表格，最右邊是變更顏色與產生HTML指令的區域。

操作步驟如下：

選擇你的網頁使用的語言(From this language)
再勾選要提供的翻譯對象語言
在最右邊欄位變更文字與背景顏色
按Generate HTML就能在畫面底部產生HTML指令
把產生好的HTML指令複製到剪貼簿，再加到自由欄位(插入欄位)裡

如果在操作上有疑問，或有增強建議的，請寄信到emisjerry@gmail.com 或在簡睿隨筆留言。

如何初步分析Blog變慢的原因？

Sat, 28 Apr 2007 23:22:10 +0800

我的Blog的顯示突然變慢了，如何分析變慢的原因？到底是那個外部連結造成速度出狀況？如果您使用的瀏覽器是FireFox的話，恭喜您，直接下載FireBug、使用它來偵查是最簡單的方法了。

在重新載入網頁後，按F12開啟FireBug視窗，再按FireBug第二列功能表上的Net，就會顯示網頁所有被載入的物件，右邊就標示有該物件的載入時間，直接看灰色長度也可大致明暸載入時間最久的是那些東東。如下圖中可看出紅框裡的 MyBlogLog的圖檔大約都要花到４、５秒的時間，因此我就把顯示的列數由原來的５列改成２列，以縮短載入圖檔的時間。

另外，在每個物件最左側的＋號展開以顯示此物件的Request與Response訊息，例如展開表示有錯誤的紅色物件來觀察：

FireBug還有許多強大的功能，待日後再行報告。

下載：FireBug

[Blog] 在文章底部隨機顯示相關文章的功能說明

Sat, 28 Apr 2007 23:19:55 +0800

前幾個星期把隨機顯示文章的功能加到Blog裡，雖然功能不盡如人意，仍有不少缺失需要修改，不過既然有網友問起，我就簡略的說明作法吧。

除非自己架站或BSP有提供取用文章清單的功能，否則想要在文章裡顯示相關文章是沒有直接有效的方法。因此我使用了最簡便（偷懶？）的作法：由美味書籤 (del.icio.us)的JSON Post Feeds取回。只要用類似下面的指令就能由美味書籤取回需要的書籤：

http: //del.icio.us/feeds/json/用戶名稱	取回用戶的書籤清單
http: //del.icio.us/feeds/json/用戶名稱/標籤	取回用戶的某特定標籤的書籤清單，可以用加號指定數個標籤
http: //del.icio.us/feeds/json/用戶名稱/標籤?count=幾個書籤	只取回指定個數的特定標籤的書籤清單

取回的書籤清單會被存放於Delicious.posts陣列裡，再寫個迴圈去解析這個陣列就可以了，而且del.icio.us已經把範例程式都寫好了，依據自己的需求再做點小修改（加上亂數處理等）就大功告成了。

程式寫完後需要把自己的文章發佈到美味書籤，我是以_blog_開頭來表示自己文章的標籤，取清單時就用此類標籤來取；自己文章的標籤名稱和收錄他人書籤的名稱區別出來，才不會取到別人的文章。

目前程式尚有下列問題：

有時會取到相同的文章，重覆狀況尚待處理
有時會取到超過大小的亂數，導致取到的不足５篇
原本構想是依目前文章的分類以分別取出各分類的隨機文章，但動態叫用JavaScript的寫法尚未測試出來

如果您只是想直接使用此隨機文章的功能，只要把下列指定貼入自由欄位裡即可；用戶名稱填入您的del.icio.us的帳號，標籤則填入要顯示的標籤準名稱，若不指定標籤的話就會取所有的書籤；count=30也可自行放大或變小要抓取的書籤數量：

要檢視源碼請按：http://emisjerry.googlepages.com/related_posts.js

最後聲明：程式會持續修改，您有任何意見也歡迎提出。

[創作] 個人網頁全都連：Show Yourself Generator V1.0

Sat, 21 Apr 2007 22:17:40 +0800

從Dustin Bachrach的網站看到了一個功能：把自己相關的常用網站整合成一個表格，使之能被複製到自己的Blog裡公佈。這個功能似乎滿有用的，但作者的網頁裡卻只有美國常見的網路服務而已，為了方便自己使用，我依作者的概念自行撰寫了新的版本，並發表在網頁Show Yourself Generator裡。使用的步驟說明如下：

首先在綠框裡輸入你的常用使用者代碼，再按下Replace，則以下所有網站的使用者代碼都會被取代
把不需要或未使用的網站勾選拿掉，此時示範最後結果的中間表格會立即變動，以反應出最後呈現的樣式
若網站使用的代碼不同時，可自行修改，修改且將游標移出輸入欄位後，示範表格也會馬上變動
依Blog整體色系在最右側表格調整對應顏色，調整後按Change Color即可讓示範表格變動
最後按Generate HTML以產生HTML內容，將游標移入底部的文字框按Ctrl+C以將內容複製到剪貼簿

HTML內容加入Blog的方法可參考下列網頁，參考網頁裡貼入文字框的內容換成上述步驟5的內容即可：

Xuite日誌：參考 http://blog.xuite.net/emisjerry/tech/11157208
樂多日誌：參考 http://blog.xuite.net/emisjerry/tech/11158237

若您有使用MyShare書籤的話，請注意它不使用使用者代碼，要先查出代號才能連結正確。
如果您在使用後有任何意見或建議，請在此留言。

完全圖解在文章裡顯示Google AdSense廣告的步驟(樂多)

Fri, 20 Apr 2007 23:55:00 +0800

似乎先前的說明太過簡略了，重新製作Step-by-step的說明，希望能方便的讓有興趣的讀者們循序完成。本篇是樂多的版本。

1. 先把要複製的指令準備好。注意 id 的名稱必須為divAdSenseContentSctipt，大小寫要一模一樣。

以下是我的指令內容：

2. 進入管理網頁後執行「Blog基本管理」。

3. 把步驟1準備好的指令複製到說明框裡，再按網頁底部的「儲存」。

4. 進入文章網頁後，AdSense廣告就會出現了。

完全圖解在文章裡顯示Google AdSense廣告的步驟(Xuite)

Fri, 20 Apr 2007 23:54:14 +0800

似乎先前的說明太過簡略了，重新製作Step-by-step的說明，希望能方便的讓有興趣的讀者們循序完成。本篇是Xuite的版本。

1. 進入Xuite的管理網頁，按自由欄位設定。
2. 按+新增欄位

3. 輸入欄位名稱，再把指令複製到本文框裡。注意id的名稱必須為divAdSenseContentSctipt，大小寫要一模一樣。輸入完畢後按確認。

以下是我的指令內容：

4. 按確認送出，將此自由欄位儲存起來。

5. 進入管理網頁裡的版面編排，把新加入的自由欄位拖到左側，使之能顯示在文章網頁。

6. 按確認送出。

7. 回到文章網頁後，AdSense廣告就會出現了。

yntaxHighlighter.HighlightAll('code');

不用再一篇一篇剪貼了：在文章內文動態產生google AdSense的廣告

Mon, 16 Apr 2007 22:37:40 +0800

不管訪客人數多寡，大家都趕流行似的紛紛把Google AdSense給掛到Blog上。我也不例外，除了體驗 Google AdSense到底是什麼玩意，也可體會吸引人氣的一些技巧。但若您和我一樣，都是把Blog放在BSP上，要如何簡單又省事的加上AdSense的腳本，想必是傷透腦筋吧。放在側邊的自由欄位裡是很簡單，但若想要放在表頭或每篇文章的內文裡，可就要大費周章了。剛巧由超苦的Ga的Blog裡看到這篇[JavaScript] 把Google Adsense放到Header Banner提供了極佳的想法，因此改寫了程式，使要興趣的讀者們用最少的指令就能解決這個動態產生AdSense廣告的問題。

讀者們只要依下列格式把指令加到自由欄位裡即可運作：

google_adsense.js 請由http://emisjerry.googlepages.com/google_adsense.js下載檢視。如果要變更顯示的位置的話，只要修改67行 (Xuite)或69行(樂多)到別的Tag處即可。
如果在使用上仍有問題的話，請留言給我。 (繼續閱讀...)

把MyBlogLog的頭像圖形(Avatar)顯示在訪客回應裡

Thu, 12 Apr 2007 00:23:30 +0800

由PigTailLeo 豬尾巴攪和攪和部落格裡看到讓 Blogger.com 的留言回覆裡顯示 MyBlogLog 的大頭貼，文章中說明了如何在訪客回應裡加上訪客的MyBlogLog頭像圖形(Avatar)，引起了我一探究竟的興趣，因此花了些時間把這個功能移植到Xuite。雖然我的訪客大都屬於潛水型的，回應比我的文章還少，因此這個功能或許對我用處不大，但希望對讀者們有用。

其實要取到MyBlogLog頭像是很簡單的，因為MyBlogLog已經寫好功能讓我們使用，只要把註冊在MyBlogLog裡的網址傳進去，就能取回頭像圖檔。方法如下：

http: //www.mybloglog.com/buzz/co_redir.php?href=訪客的網址	轉址到 MyBlogLog的會員網頁(Profile)；不知為何測試時都轉到訪客的首頁...?
http://pub.mybloglog.com/coiserv.php?href=訪客的網址	取回訪客的頭像圖形

Xuite的訪客回應網址是，因此只要找到節點再用appendChild把上述連結加進去就完成了。

一般使用者只要在自由欄位裡加入以下指令即可使用：

設計人員請由此閱讀源碼：http://emisjerry.googlepages.com/mybloglog_avatar.js

參考：

## (繼續閱讀...)

超優的Free Icon Editor: IcoFX

Sun, 08 Apr 2007 00:56:31 +0800

因為今天發現了一套超優且為Freeware的圖示編修程式：IcoFX -The Free Icon Editor，因此在測試的過程中，順便把網頁的最愛圖示(favicon.ico)給換掉，也讓讀者在現行多頁籤的環境裡，能更容易地辨識本網站。

如果您有自己的網站，那麼只要把16X16、16色且名為favicon.ico的圖示檔放到網站的文件根目錄裡，那麼瀏覽器在顯示您的網站時就能顯示您自訂的圖示。如果您使用的是 Xuite、樂多等部落格，根據我的實驗則只能在FireFox裡正常的顯示自訂圖示，IE不管我如何修改，始終是無法顯示。

根據規格，我們必須在網頁的區裡加入下面的Tag：

樂多可以設定在它的【Blog基本設定→說明欄位】裡，產生出來的指令就會被包含在區。但 Xuite沒有地方可以讓指令被放置在區，不過，只要把指令放到自由欄位裡，竟然也能顯示出來。還有，如果上傳的是別的格式的圖形檔（如GIF或JPG檔；不管是Xuite或樂多，都無法上傳ICO格式的圖檔）在FireFox裡也都能顯示，這似乎是 FireFox的特異功能。

我製作圖示的步驟略述如下：

啟動IcoFX，執行功能表上的【File→New】，指定新圖形的顏色為16色，大小為自訂的80x80
在OpenOffice.org的Writer裡輸入48級的「簡」字，變更為正黑體，此時也可變更文字顏色與背景顏色
切回IcoFX，選【File→Capture...】，此功能可以讓我指定一個大小80x80的區域做螢幕擷取
回到Writer畫面，把螢幕擷取的方框對準步驟2輸入的文字，對準後按左鈕
對抓回來的80x80圖形做編修，例如加底色或加圓形、加符號等
調整完畢後，按圖片區的第二個按鈕 Insert New Image，以依據現有圖形產生第二個16x16的圖示，此時【Create the new image from the selected image:】必須要打勾
再把新產生出的16x16圖形放大顯示比例再細部修改

整個調整完畢後上傳到部落格，再把加入，如此應該就能在FireFox裡顯示自訂圖示了。IcoFX的各項功能與特效頗為豐富且齊備，s也能匯入與匯出別的檔案格式，再加上又是自由軟體，推薦大家使用。

另外，網路上也有提供製作最愛圖示服務的網站：http://www.htmlkit.com/services/favicon，它同時能產生動態的圖示展示，也值得一試。

動態圖示的指令：

上傳的圖示檔路徑/animated_favicon1.gif" type="image/gif" />

下載：IcoFX -The Free Icon Editor

## (繼續閱讀...)

常見的收錄書籤網址寫法之彙總表格 V1.1

Sun, 01 Apr 2007 21:43:05 +0800

收錄社交書籤時，因為每家書籤系統的網址（專業的說法是Query String）寫法都不一致，導致每次在網頁裡要使用時都要再去查詢，實在很麻煩。因此我整理了一份表格，將常用的幾個書籤系統的網址格式彙總起來，使用時就是把每個欄位都連接起來就可以了，當然囉，欄位間的分隔符號＆和要傳入的參數值（用encodeURIComponent 先行編碼）都要自行指定。如果有要訂正或補充的請留言，我會再修訂本表格，使之更臻完備。

常見的書籤系統	執行網址	收錄網址	標題	描述	標籤名稱
HEMiDEMI黑米書籤	http://www.hemidemi.com/user_bookmark/new?via=sticker	url	title	description	tag_string
MyShare網路書籤	http://myshare.url.com.tw/index.php?func=newurl&NewsMaster=1	url	desc	contents
Yahoo!分享書籤	http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?ei=UTF-8	u	t	d	tag
del.icio.us美味書籤	http://del.icio.us/post?	url	title	notes	tags
Technotati Bookmark	http://technorati.com/faves?	add	sub
FURL Bookmark	http://furl.net/storeIt.jsp?	u	t
Digg Bookmark	http://digg.com/submit?phase=2	url	title
天天網摘	http://www.365key.com/storeit.aspx?	u	t	c
Google書籤	http://www.google.com/bookmarks/mark?op=add	bkmk	title
百度搜藏	http://cang.baidu.com/do/add?	iu	it	dc
Windows Live Favorites	https://favorites.live.com/quickadd.aspx?mkt=zh-tw	url	title

2007/04/02 V1.1 修改：加入天天網摘、Google書籤、百度搜藏、Windows Live Favorites
2007/04/01 V1.0

## (繼續閱讀...)

邁向國際化；幫網頁添加翻譯功能：使用Google翻譯與魔匠靈通

Sat, 31 Mar 2007 00:03:45 +0800

這兩天又把翻譯的功能加進部落格裡。網頁的自動翻譯功能有兩個選擇：

使用Google的Translate功能：http://translate.google.com
Xuite.net也提供了魔匠靈通的線上翻譯功能

我用來開啟Google翻譯網頁的執行指令如下：

    var _iIndex = document.URL.indexOf("/blog."); // blog.xuite.net or blog.roodo.com
    var _sURL = document.URL.substring(_iIndex+1); // 去掉http://
    var e=(document.charset||document.characterSet); // 取得網頁的編碼
    window.open('http://translate.google.com/translate?u='+_sURL+'&hl=zh-TW&langpair='+sLangPair+'&tbb=1&ie='+e);

langpair 格式是來源語言 | 目標語言，例如：

zh_TW\|zh_CN	繁體中文轉成簡體中文
zh\|en	中文轉成英文

(為何中文會以 zh 來表示？有興趣者請參考：語系/地區碼 zh-TW與zh-CN 中的zh代表什麼?)

可惜目前還找不到中文轉日文的選項。可使用的各式語言轉換清單可由此處查到。
Google的翻譯還算快速，但品質卻會讓我大大懷疑真的有老外能看得懂嗎？:-)

Xuite的使用方法則是：

var _iIndex = document.URL.indexOf("/blog."); // blog.xuite.net or blog.roodo.com
    var _sURL = document.URL.substring(_iIndex+1);
    if (sLangPair != "") {
      _sURL = "http://" + sLangPair + ".mojolingo.xuite.net/m2m-0000/" +
        _sURL;
    } else {
      _sURL = "http://" + _sURL;
    }
    //console.log(_sURL);
    window.open(_sURL);

sLangPair的寫法是來源語言2目標語言：

tc2sc	繁體中文轉成簡體中文；在Xuite日誌站長的這篇裡Blog Q&A - 使用繁簡轉換遇到的問題裡，則是說要用http://gb.blog.xuite.net/m2m-0000/部落格網址這樣的格式
tc2en	繁體中文轉成英文
tc2jp	繁體中文轉成日文

不過，由於今天Xuite的翻譯網站似乎有狀況，始終連接不上，因此無法做最後的確認。因為一直無法順利連線，因此我網頁上的已換成Google的翻譯了。

我的擴充功能源碼：http://emisjerry.googlepages.com/bookmark_buttons.js

## (繼續閱讀...)

原來也有圖片式的Google AdSense廣告

Tue, 27 Mar 2007 23:54:35 +0800

第一次看到不是文字模式的Google廣告，蠻新鮮的。 ## (繼續閱讀...)

將部落格加上動態放大與縮小字體大小的功能

Mon, 26 Mar 2007 23:02:15 +0800

眼尖的讀者或許會發現在我部落格標題附近加了放大與縮小文章內容字體的按鈕，用來動態把文章內容的字體做放大與縮小的控制。目前在FireFox裡的Xuite與樂多都運作正常，但在IE裡仍有問題，嗯，應該不能說有問題，而是按了後毫無反應。

IE裡的除錯工具真是比FireFox裡的FireBug差多了，Visual Studio for Web 2005又無法安裝．．．不是遇到Service Patch的問題，就是Just-in-time Debugging無法正常執行。看來只能找舊版的Visual Studio再來試試了。

## (繼續閱讀...)

替部落格的側邊欄位加上縮起與展開功能

Sun, 18 Mar 2007 21:51:11 +0800

下列網址都是替部落格的側邊欄位加上縮起與展開功能：

Racklin's 阿土伯程式大觀園: 輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)!
Without Boundaries: 教學樂多折疊邊欄插件

就我所知以上二者都是使用jQuery Framework來實作的，以下說明的版本則是以最單純的JavaScript來撰寫。

首先說明樂多的大致寫法。樂多的側邊欄位結構如下：

側邊的標題欄類別名稱是 sidetitle，對應的內容為平行位置的

，類別名稱是 side，我們要做的是當sidetitle上的某個物件（即程式中新增進去的，上圖中以紅框標示）被按下時，在其onclick事件處理程式裡，對

做隱藏或顯示的切換。程式中用toggleSideBoxRoodo函數實作了需要的功能，請有興趣的讀者自行閱讀。

Xuite的側邊欄位結構和樂多的稍有不同：
在

裡還有兩層，程式以toggleSideBoxXuite函數實作。程式裡有做註解說明，應該是不難理解的。

不想看程式只要使用的讀者，請自行增加一個自由欄位（樂多稱插入欄位），在欄位裡輸入下列指令即可使用：

原始程式：http://emisjerry.googlepages.com/bookmark_buttons.js

不知為何，IE執行上會有問題，FireFox則正常。

## (繼續閱讀...)

自動填Google搜尋的輸入字串：Xuite自動書籤按鈕 V1.4

Tue, 13 Mar 2007 22:08:29 +0800

為了能方便訪客針對瀏覽中的文章快速搜尋與檢索，我在新文章裡加入一個命名為 mytag 的＜INPUT＞控制項，把它的值當做要搜尋的關鍵字串，直接填入Google的輸入框裡。

控制項的用法如下：

填值的寫法如下：

var sSearchText = document.getElementById('mytag').value;
document.getElementById('sbi').value = sSearchText;

原始程式可由此檢視。

## (繼續閱讀...)

MyBlogLog似乎造成網頁載入速度變慢?

Mon, 12 Mar 2007 23:54:53 +0800

自從把MyBlogLog的JavaScript加入側邊欄後，網頁在重新整理時，經常看到狀態列出現讀取s3.amazonaws.com網頁，感覺讓網頁的載入變慢。雖然尚不清楚二者間到底是否真的有關聯，但，還是先把MyBlogLog拿掉好了。

## (繼續閱讀...)

把文章的分類當做HEMiDEMi的標籤：Xuite自動書籤按鈕 V1.3

Tue, 27 Feb 2007 23:18:49 +0800

把Xuite自動書籤按鈕 V1.2又加了點程式以偷懶少打幾個字：自動把文章的分類當做HEMiDEMi的標籤。
由於查不到完整的Query String，因此在討論區留言，很快的得知要使用 tag_string。

首先找出網頁裡的分類名稱：

var sTagString = ""; // 把類別當成標籤Tag
if (isXuite) {
oTag = findTag('span','category');
sTagString = findTag('span','category').childNodes[0].childNodes[0].firstChild.textContent;
//alert(sCategory);
}

再加入傳給黑米書籤的URL：

var bookmarklets=[
[ hemidemiImg,
false,
'http://www.hemidemi.com/user_bookmark/new?via=sticker&url='+u+
'&title='+t+'&tag_string='+sTagString+'&description='+d,
'HEMiDEMi黑米書籤'
], .....

完整的程式如下：

/* 
 * $Id: bookmark_buttons.js 7348 2007-02-16 03:44:02Z emisjerry $
 *  
 * Copyleft (c) Jerry Chien (http://blog.xuite.net/emisjerry), 2007/02/15
 * Most of the codes were written by RockSaying (http://blog.roodo.com/rocksaying)
 * What i have done is minor modification.  
 */
var isXuite = false, isRoodo = false;
if (document.URL.indexOf(".roodo.") > 0) {  // for Xuite
  isRoodo = true;
} 
if (!isRoodo || document.URL.indexOf(".xuite.") > 0) {  // for Roodo
  isXuite = true;
} 
if (isXuite || isRoodo) {
  if (window.attachEvent) window.attachEvent('onload', addCurrentArticleBookmarklets);
  else window.addEventListener('load', addCurrentArticleBookmarklets, false);
}

//--FUNCTIONS-----------------------------------------------------------
  // findTag('span','titlename', 'text');
  function findTag(sTag, sName, sType) {  
    var aTags = document.getElementsByTagName(sTag);
    var reg = new RegExp(sName);
    var oResult = "";
    for (var i in aTags) {
      //alert(aTags[i].className);
      if (reg.test(aTags[i].className)) {
        if (sType=='text') {
          oResult = aTags[i].textContent;
        } else {
          oResult = aTags[i];
        }
        break;
      }
    }
    return oResult;
  }

function addCurrentArticleBookmarklets() {
    // http://www.dreamprojections.com/syntaxhighlighter/Usage.aspx
    // 要在自由欄位加上<script src>等指令
    //dp.SyntaxHighlighter.HighlightAll('code');
  
    var u = document.URL;
    if (isXuite && !//d+/.test(u)) {
      var oTag = findTag('span','titlename');  // 取回span,第1個Node為 a
      u = oTag.childNodes[0].href;  // 本篇文章的URL
    }

var bookmarklets=[
    [ hemidemiImg,
      false,
      'http://www.hemidemi.com/user_bookmark/new?via=sticker&url='+u+
        '&title='+t+'&tag_string='+sTagString+'&description='+d,
      'HEMiDEMi黑米書籤'
    ],
    [ myYahooImg,
      false,
      'http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?ei=UTF-8&u='+u+'&t='+t+'&d='+d,
      '雅虎分享書籤'
    ],
    [ myShareImg,  // 4000會造成MyShare錯誤
      false,
      'http://myshare.url.com.tw/index.php?func=newurl&from=mysharepop'+
        '&NewsMaster=1&url='+u+'&desc='+t+'&contents='+d.substring(0,500),
      'MyShare網路書籤'
    ],
    [ delicioImg,
      false,
      'http://del.icio.us/post?url='+u+'&title='+t,
      'del.icio.us美味書籤'
    ],
    [ technoratiImg,
      false,
      'http://technorati.com/faves?sub='+t+'&add='+u,
      'Technotati bookmark'
    ],
    [ furlImg,
      false,
      'http://furl.net/storeIt.jsp?&u='+u+'&t='+t,
      'FURL bookmark'
    ]
    ];

var posted = null;
    if (isXuite || isRoodo) {
      posted = findTag('div','posted');
    }

posted.insertBefore(document.createElement('br'), posted.firstChild);
    for (var i = bookmarklets.length - 1, a; i >= 0; --i) {
      a = document.createElement('a');
      a.target = '_blank';
      a.href = bookmarklets[i][2];
      a.title = bookmarklets[i][3];
      a.appendChild(bookmarklets[i][0]);
      if (bookmarklets[i][1])
        a.appendChild(document.createTextNode(bookmarklets[i][1]));
      posted.insertBefore(document.createTextNode(' '), posted.firstChild);
      posted.insertBefore(a, posted.firstChild);
    }
  }
</body>
</html></HTML><br />

(繼續閱讀...)

dp.SyntaxHighlighter: 在網頁顯示美觀的程式碼

Fri, 16 Feb 2007 20:03:27 +0800

真是由石頭成這裡學到不少網頁處理的小技巧耶。不管是Xuite或樂多，對於原貌呈現的＜xmp>或＜pre>標籤，在處理上總是有不少奇奇怪怪的小問題，因此每次要貼HTML或JavaScript的程式時，總是要多花時間去修改可能會造成問題的符號，而在石頭成網站上看到了使用.dp.SyntaxHighlighter 的解決方法。以下是簡單的使用步驟：

把 dp.SyntaxHighlighter 下載回來，解壓縮後再將需要用到的檔案上傳到Google pages，以下是基本的幾個必須的檔案：

SyntaxHighlighter.css (在解壓縮目錄的Styles裡)
shCore.js (在解壓縮目錄的Scripts裡)
要貼上的程式種類用的.js檔；要貼JavaScript則上傳shBrushJScript.js

在文章的最後面要加上下列指令(把emisjerry換成自己的網址)：
 <link type="text/css" rel="stylesheet" href="http://emisjerry.googlepages.com/SyntaxHighlighter.css"></link>  <script language="javascript" src="http://emisjerry.googlepages.com/shCore.js"></script> <script language="javascript" src="http://emisjerry.googlepages.com/shBrushJScript.js"></script> <script> dp.SyntaxHighlighter.HighlightAll('code'); </script>

要貼上的程式碼必須置於裡，此

必須設定下列屬性：<br />
</big>
<ul><li><big>name="code"</big></li><li><big>class="使用的程式語言名稱"，如javascript、java等，詳細程式語言清單請參考<a target="_blank" href="http://www.dreamprojections.com/syntaxhighlighter/Usage.aspx#languages"> [這裡]</a>。</big></li><li><big>非必要屬性：rows=顯示的列數，cols=顯示的行數</big></li></ul>
<big>class屬性另外可以控制顯示區的外觀，細節請參考<a target="_blank" href="http://www.dreamprojections.com/syntaxhighlighter/Usage.aspx#extendedconfiguration"> [這裡]</a>。我試用過的說明如下：<br />
</big>
<ul><li><big>collapse: 程式碼顯示區最上方顯示 + expand
source，按下才會顯示完整的程式碼</big></li><li><big>showcolumns: 顯示行號，即...10....20....30這種尺規</big></li><li><big>不同的控制之間以冒號隔開<br />
</big></li></ul>
<big>##</big>
<link href="http://emisjerry.googlepages.com/SyntaxHighlighter.css" rel="stylesheet" type="text/css" /><script src="http://emisjerry.googlepages.com/shCore.js" language="javascript"></script><script src="http://emisjerry.googlepages.com/shBrushJScript.js" language="javascript"></script>

<a class="acontinues" href="http://blog.roodo.com/emisjerry/archives/2738415.html">(繼續閱讀...)</a>
		
</article>
<article>
<h1>幫荒廢的部落格加上自動提示轉址功能</h1>
<p>Fri, 16 Feb 2007 20:02:33 +0800</p>

經過前一陣子的部落格搬家風潮後，我原先使用的<a href="http://blog.yam.com/emisjerry" target="_blank">http://blog.yam.com/emisjerry</a>就荒廢在天空部落裡。今天趁便做個歲末大清理，將它加上自動提示轉址的功能，以方便舊雨新知按個鈕就能轉址到現行使用的Blog。簡單的操作步驟如下：<br /><ol><li>登入blog.yam.com的【後端管理介面】</li><li>按選單上的【功能設定】</li><li>在部落格描述欄位最後加入如下指令：<table cellspacing="1" cellpadding="2" border="0" style="text-align: left; background-color: rgb(0, 102, 0); width: 80%;"><tbody><tr><td style="background-color: rgb(255, 255, 204);"><span style="font-weight: bold;">＜script> sBlogName="新的網址";  </span><br style="font-weight: bold;" /><span style="font-weight: bold;">＜script src="http://emisjerry.googlepages.com/redirect.js"></span></td></tr></tbody></table><br /></li><li>按儲存更新</li></ol>指令第一行的新網址可以不指定，則轉址前會彈出輸入視窗，供使用者輸入新網址，若有指定則自動轉向新網址。<br /><br />按<a href="http://blog.yam.com/emisjerry" target="_blank">http://blog.yam.com/emisjerry</a>就可以看到執行的樣子了。<br /><br />##

<a class="acontinues" href="http://blog.roodo.com/emisjerry/archives/2738409.html">(繼續閱讀...)</a>
		
</article>
<article>
<h1>書籤小貼紙工具：Ultra Network轉址系統</h1>
<p>Fri, 16 Feb 2007 20:01:44 +0800</p>

原來已經有人把常見的書籤連結整合成工具網頁了，請到<a title="Ultra Network轉址系統" target="_blank" href="http://button.unet.cc/">Ultra Network轉址系統</a>一探究竟吧。<a href="http://www.wretch.cc/blog/joycefairy">滿天飛舞的花絮</a>介紹文章<a href="http://www.wretch.cc/blog/joycefairy&article_id=8165767" target="_blank" title="實用的網路書籤小貼紙">實用的網路書籤小貼紙</a>把操作步驟寫得很清楚，請自行閱讀。

<br /><br />該網頁在FireFox裡顯示得很凌亂，但在IE裡就正常，因此建議使用IE來操作。<br /><br />##

<a class="acontinues" href="http://blog.roodo.com/emisjerry/archives/2738405.html">(繼續閱讀...)</a>
		
</article>
<article>
<h1>Xuite自動書籤按鈕 V1.2</h1>
<p>Fri, 16 Feb 2007 00:34:18 +0800</p>

<table cellspacing="2" cellpadding="2" border="0" style="text-align: left; width: 100%;"><tbody><tr><td></td></tr></tbody></table>以丸小管在《<a target="_blank" href="http://blog.roodo.com/hiroshiken/archives/2683263.html">[Outside Anchor]為樂多加入收藏按鈕</a>》的作法
為範例，把自動產生書籤按鈕放到<a target="_blank" href="http://pages.google.com">Google pages</a>裡：<a target="_blank" href="http://emisjerry.googlepages.com/bookmark_buttons.js">http://emisjerry.googlepages.com/bookmark_buttons.js</a>。
同時修改程式以自動判斷是瀏覽樂多或Xuite，而產生對應的連結，不用再分別維護幾個Blog裡的程式了。以下是簡易的安裝方法：<br />
<ul><li>樂多</li><ul><li>在管理網頁裡修改【Blog基本設定】→在【說明】欄位裡填入下列指令：</li><li>
<table cellspacing="1" cellpadding="2" border="0" style="text-align: left; background-color: rgb(0, 153, 0); width: 621px; height: 32px;">
<tbody>
<tr>
<td style="background-color: rgb(255, 255, 204);"> 
 <span style="font-weight: bold;"> <script
 src="
http://emisjerry.googlepages.com/bookmark_buttons.js"></script></span></td>
</tr>
</tbody>
</table>
<br />
</li></ul><li>Xuite</li><ul><li>在管理網頁裡新增一個自由欄位，輸入內容如上。</li></ul></ul>
只要這幾個簡單步驟就幫你的Blog加上書籤按鈕，從此可讓自己和讀者方便的新增書籤了。<br />
<br />
參考：<br />
<ol><li><span class="titlename"></span><a href="http://blog.xuite.net/emisjerry/tech/10173165">Xuite自動書
籤按鈕 V1.1</a></li><li><span class="titlename"></span><a href="http://blog.xuite.net/emisjerry/tech/10137684" dragover="true">修改自動產生分享
書籤的按鈕</a></li><li><span class="titlename"></span><a href="http://blog.xuite.net/emisjerry/tech/10132171">快速增加社交書籤
的網頁工具：AddThis.com<span style="font-weight: bold;"></span></a></li><li>遊手好閒的石頭成的部落格：<a target="_blank" href="http://blog.roodo.com/rocksaying/archives/2639381.html">部落格小玩意: 為部落格加上「加入xx分享書籤」的按鈕</a></li><li>丸小管：<a target="_blank" href="http://blog.roodo.com/hiroshiken/archives/2683263.html">知識：為樂多加入收藏按鈕</a></li></ol>
##

<a class="acontinues" href="http://blog.roodo.com/emisjerry/archives/2733787.html">(繼續閱讀...)</a>
		
</article>
<article>
<h1>Xuite自動書籤按鈕 V1.1</h1>
<p>Wed, 14 Feb 2007 00:26:34 +0800</p>

繼續對<a href="http://blog.roodo.com/rocksaying">石頭閒語</a>石頭成的程式做修改：<ul><li>加上些許註解與refactoring</li><li>在首頁按”回應”進入時會造成取不到標題與內容的修改<br />
  </li><li>對按鈕加上提示小視窗(title)</li><li>依石頭成的提示修改取文章描述的className</li></ul>
<textarea rows="10" cols="70" name="code" class="javascript:collapse"><script type="text/javascript">
//全形反斜請改成半形
if (/\/\d+/.test(document.URL)) {
  // findTag('span','titlename', 'text');
  function findTag(sTag, sName, sType) {  
    var aTags = document.getElementsByTagName(sTag);
    var reg = new RegExp(sName);
    var oResult = "";
    for (var i in aTags) {
      //alert(aTags[i].className);
      if (reg.test(aTags[i].className)) {
        if (sType=='text') {
          oResult = aTags[i].textContent;
        } else {
          oResult = aTags[i];
        }
        break;
      }
    }
    return oResult;
  }
  function addCurrentArticleBookmarklets() {
    var u = document.URL;
    var index = u.indexOf('#');  // 以回應進入時未帶不到資料,因此要trim掉
    if (index > 0) {
      u = u.substring(0, index);
    }
    // title: 標題
    var t = encodeURIComponent(document.title);
    t = findTag('span','titlename','text');
    // description: 取出文章內容,最多4000個字元
    var d = findTag('div', 'blogbody','text');
    d = d.substring(0,4000);

var bookmarklets=[
    [ hemidemiImg,
      false,
      'http://www.hemidemi.com/user_bookmark/new?via=sticker&url='+u+'&title='+t+'&description='+d,
      'HEMiDEMi黑米書籤'
    ],
    [ myYahooImg,
      false,
      'http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u='+u+'&t='+t+'&d='+d,
      '雅虎分享書籤'
    ],
    [ myShareImg,
      false,
      'http://myshare.url.com.tw/index.php?func=newurl&from=mysharepop&NewsMaster=1&url='+u+'&desc='+t+'&contents='+d,
      'MyShare網路書籤'
    ],
    [ delicioImg,
      false,
      'http://del.icio.us/post?url='+u+'&title='+t,
      'del.icio.us美味書籤'
    ],
    [ technoratiImg,
      false,
      'http://technorati.com/faves?sub='+t+'&add='+u,
      'Technotati bookmark'
    ],
    [ diggImg,
      false,
      'http://www.digg.com/submit?phase=2&url='+u+'&title='+t,
      'Digg bookmark'
    ]
    ];

var posted = findTag('div','posted');

(繼續閱讀...)

修改自動產生分享書籤的按鈕

Mon, 12 Feb 2007 00:17:22 +0800

石頭閒語的作者提供了自動增加分享書籤的簡便寫法，我做了小修改使能運用於Xuite上；也換了Digg圖片，以避免版權問題；另外取得文章標題的方法也做了符合Xuite的調整：

var bookmarklets=[
    [ hemidemiImg,
      false,
      'http://www.hemidemi.com/user_bookmark/new?via=sticker&url='+u+'&title='+t+'&description='+d
    ],
    [ myYahooImg,
      false,
      'http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u='+u+'&t='+t+'&d='+d
    ],
    [ myShareImg,
      false,
      'http://myshare.url.com.tw/index.php?func=newurl&from=mysharepop&NewsMaster=1&url='+u+'&desc='+t+'&contents='+d
    ],
    [ delicioImg,
      false,
      'http://del.icio.us/post?url='+u+'&title='+t
    ],
    [ technoratiImg,
      false,
      'http://technorati.com/faves?sub='+t+'&add='+u
    ],
    [ diggImg,
      false,
      'http://www.digg.com/submit?phase=2&url='+u+'&title='+t
    ]
    ];

var posted = document.getElementsByTagName('div');
    for (var i = posted.length - 1; i >= 0; --i) {
      if (/^posted/.test(posted[i].className)) {
        posted = posted[i];
        break;
      }
    }

posted.insertBefore(document.createElement('br'), posted.firstChild);
    for (var i = bookmarklets.length - 1, a; i >= 0; --i) {
      a = document.createElement('a');
      a.target = '_blank';
      a.href = bookmarklets[i][2];
      a.appendChild(bookmarklets[i][0]);
      if (bookmarklets[i][1])
        a.appendChild(document.createTextNode(bookmarklets[i][1]));
      posted.insertBefore(document.createTextNode(' '), posted.firstChild);
      posted.insertBefore(a, posted.firstChild);
    }
  };
  if (window.attachEvent) window.attachEvent('onload', addCurrentArticleBookmarklets);
  else window.addEventListener('load', addCurrentArticleBookmarklets, false);
}
//-->
</script>

(繼續閱讀...)

快速增加社交書籤的網頁工具：AddThis.com

Sun, 11 Feb 2007 17:29:11 +0800

最近為了讓讀者能方便、迅速地把文章加入社交書籤，許多Blog都加上了快速連結的按鈕，例如HemiDemi或MyShare 等按鈕，每個按鈕連結到不同的書籤系統；今天偶爾發現的AddThis卻將常見的各個書籤系統都彙整在一起，用一個按鈕開啟一個網頁讓使用者選擇要加到那一個籤系統裡，同時提供JavaScript讓使用者能加到網頁裡，另外也提供了RSS的訂閱按鈕。

不過，書籤系統裡是沒有HemiDemi或MyShare的，雖然中文的顯示有些問題，但進入到加入書籤網頁時中文又正常出現了。如果你同時使用多個書籤系統，AddThis功能還頗值得一試。

##
(繼續閱讀...)

刪除大批的垃圾回應

Tue, 16 Jan 2007 21:59:06 +0800

今天一口氣刪掉358個垃圾回應，樂多點數由1604p驟降至1246p，這些垃圾大部份集中在一十月，十二月就變少了；再給樂多一次機會，將回應與引用再次開啟。

刪除操作時覺得樂多的回應變快了，以前刪除後的進度光捧由50%到100%都要好幾秒，今晚倒是變得飛快，希望這個速度能繼續保持。

##
(繼續閱讀...)

FireFox 2.0錯誤的解決方法

Mon, 25 Dec 2006 22:24:07 +0800

終於由網絡暴民 Jacky’s Blog看到了造成FireFox底部----＜menuitem錯誤的原因與解法了。

原因：安裝JDK 6.0時，由於JDK 6.0安裝時把繁體中文的目錄寫錯，導致出現錯誤
解法：按照網絡暴民 Jacky’s Blog內的說明，或本篇的說明

將zh_TW修改成zh-TW後，必須進入FireFox的「安全模式」，由功能表找了半天也無法尋獲，原來是指：使用-safe-mode參數，步驟如下：

進入DOS模式
cd "c:Program FilesMozilla Firefox"
firefox.exe -safe-mode

進入安全模式後，關閉，再次啟動，錯誤就消失了。

##
(繼續閱讀...)

簡睿隨筆 《科技篇》-Blog工具箱

挺不賴的Windows Live Writer的插件：Polaroid Picture

氣象局衛星雲圖修正－討厭，怎麼又改了？

HighLight：程式碼顯示的美化工具

簡單放大Plurk輸入區的方法

用Ubiquity快速發佈 Plurk 訊息-改良版

簡單的Mozilla Ubiquity應用2：將目前網頁貼上推推王的命令

如何備份Windows Live Writer的草稿與張貼內容？

和風部落格FC2有中文版了

Blog側邊欄改用iframe以提升網頁載入速度

解決NVu、Kompozer的換行問題

下載連結

[FireFox擴充] Table2Clipboard：完整複製網頁表格

安裝Table2Clipboard前

安裝Table2Clipboard後

Table2Clipboard資訊

[FireFox擴充] 牛仔好忙，等會再看吧!

加入兔斯基表情圖形的網頁

[FireFox] 替頁籤編號的擴充

在Blog裡顯示隨機文章的簡單作法

Google Reader快速訂閱的FireFox擴充Google Reader快速訂閱的FireFox擴充

變更文章底端的【黑米共享書籤】推文/貼文按鈕

網頁程式碼美化程式 Google Code Prettify

在字裡行間發出嗡嗡聲：LineBuzz--線上註解服務

免費計數網站 SiteMeter 換新妝

用樣式控制Google AdSense廣告顯示的位置

「網頁載入中，請稍候．．．」的簡單作法

Xuite網址的正規運算式測試

[創作] 字型工具產生器：動態變更Blog網頁的字型大小

[創作] 翻譯服務產生器：產生放於Blog側邊欄的翻譯按鈕

如何初步分析Blog變慢的原因？

[Blog] 在文章底部隨機顯示相關文章的功能說明

[創作] 個人網頁全都連：Show Yourself Generator V1.0

完全圖解在文章裡顯示Google AdSense廣告的步驟(樂多)

完全圖解在文章裡顯示Google AdSense廣告的步驟(Xuite)

不用再一篇一篇剪貼了：在文章內文動態產生google AdSense的廣告

把MyBlogLog的頭像圖形(Avatar)顯示在訪客回應裡

超優的Free Icon Editor: IcoFX

常見的收錄書籤網址寫法之彙總表格 V1.1

邁向國際化；幫網頁添加翻譯功能：使用Google翻譯與魔匠靈通

原來也有圖片式的Google AdSense廣告

將部落格加上動態放大與縮小字體大小的功能

替部落格的側邊欄位加上縮起與展開功能

自動填Google搜尋的輸入字串：Xuite自動書籤按鈕 V1.4

MyBlogLog似乎造成網頁載入速度變慢?

把文章的分類當做HEMiDEMi的標籤：Xuite自動書籤按鈕 V1.3

dp.SyntaxHighlighter: 在網頁顯示美觀的程式碼

修改自動產生分享書籤的按鈕

快速增加社交書籤的網頁工具：AddThis.com

刪除大批的垃圾回應

FireFox 2.0錯誤的解決方法

簡睿隨筆《科技篇》-Blog工具箱