Without Boundaries

樂多優化插件是一個運用 jQuery 寫的 Javascript 程式，其功能如下：

• 增加邊欄折疊
• 增加書籤工具
• 增加圖形化導覽列
• 增加導覽列的透明功能
• 移除多餘字串「Posted by ... 」
• 修改引用標題與網址、回應標題與表格標籤等等

樂多優化插件的安裝共分三個階段，第一階段是設置 javascript 檔案，而第二階段是設定插件的的參數，最後是 CSS 的添增。
注意：有安裝邊欄折疊插件的朋友，必須先移除後才能安裝樂多優化插件喔！

更新紀錄：

• 2007-04-09 發現書籤網址裡不可有 Anchor （像是 #comments），將在下一版修正。
• 2007-03-28 修正教學中範例缺少了 1.1 版新增的變數，還有 CSS Comment 問題
• 2007-03-21 修正書籤問題，請更新至樂多優化插件 Roodo Optimization Plugin 1.1
• 2007-03-20 推出樂多優化插件 Roodo Optimization Plugin 1.0 （需要 jQuery library）

‧請按繼續閱讀觀看教學‧

第一步：首先您必須下載 jQuery 和優化插件的檔案，或直接從本站讀取（這會省下許多上載和尋找連結的步驟）。

• 如果要直接利用本站的連結來安裝，請直接拷貝下方程式碼，略過下面跳到第二步。
  
  <script src='http://blog.roodo.com/withoutboundaries/0e585253.jpg' type='text/javascript'></script>
  <script src='http://blog.roodo.com/withoutboundaries/d15e3129.jpg' type='text/javascript'></script>

• 下載需要的檔案（按右鍵另存新檔）
  注意：樂多最近封鎖了 .js 檔的上載，所以 Roodo Optimization Plugin 的副檔名為 .jpg，
  這並不會影響檔案的讀取與運作。
  
  
  • jQuery 1.1.3 - 壓縮過的程式庫
  • Roodo Optimization Plugin 1.1 - 無註解，如要觀看請按改副檔名至 .js
  • Roodo Optimization Plugin 1.1 原始碼 - 有註解，如要觀看請按改副檔名至 .js
    
    
• 進入樂多管理介面後，按「上傳檔案、圖片」>「上傳檔案或圖片」。
• 準備上傳剛下載的兩個檔案，標題可以自行填寫。
  
• 上傳完後，再度回到「上傳檔案、圖片」，可以看到新增的兩個檔案，
  分別複製它們的網址，並值入下方的程式碼。
  <script src='網址一' type='text/javascript'></script>
  <script src='網址二' type='text/javascript'></script>
  需要更改地方：
  • 網址一：更改為圖中「jquery.pack.js」（或您自訂的標題）的連結。
  • 網址二：更改為圖中「roodo_optimization_plugin」（或您自訂的標題）的連結。
  
  
• 完成更改後複製原始碼預備。

第二步：接下來需要製作的是插件的參數設定。以下是所有參數的說明：

• 請看下方指示依照需求來更改參數，因為有相當多項目，建議先移至下方拷貝豺狼的範例，
  再回來一一更改自己所需要的項目：
  <script language="JavaScript" type="text/JavaScript">
  // 邊欄折疊插件參數
  folder_on = 啟用折疊;
  folder_img_on = 啟用圖示;
  folder_txt = '文字符號';
  folder_img = '圖示網址';
  folder_alt = '圖示替代';
  folder_title = '圖示標題';
  folder_speed = '折疊速度';
  side_titles = '邊欄標題';
  
  // 網誌使用帳號，用於移除「Posted by...」
  var username = '帳號名稱';
  var subs = '替代文字';
  
  // 書籤插件參數
  var bookmark = '前置文字';
  var img_digg = '圖示網址（digg）';
  var img_tech = '圖示網址（Technorati）';
  var img_deli = '圖示網址（del.icio.us）';
  var img_hemi = '圖示網址（HEMiDEMi）';
  var img_mysh = '圖示網址（MyShare）';
  var img_bookmark_width = '圖示寬度';
  var img_bookmark_height = '圖示高度';
  var bookmark_desc_ex = '書籤引述移除';
  
  // 導覽插件參數
  var img_home = '圖示網址（回首頁）';
  var img_prev = '圖示網址（上一篇）';
  var img_next = '圖示網址（下一篇）';
  var img_top = '圖示網址（回頁首）';
  var title_home = '圖示標題（回首頁）';
  var title_prev = '圖示標題（上一篇）';
  var title_next = '圖示標題（下一篇）';
  var title_top = '圖示標題（回頁首）';
  
  //書籤與導覽插件透明參數
  var alpha_mouseout = 游標離開透明度;
  var alpha_mouseover = 游標在上透明度;
  
  // 引用回應標題修改
  var track_title = '新引用列表標題';
  var reply_title = '新回應列表標題';
  
  // 回應表單插件參數
  var name = '新姓名標籤';
  var mail = '新email標籤';
  var site = '新URL標籤';
  var save = '新記錄標籤';
  var reply = '新回應標籤';
  </script>
  需要更改地方：
  • 以下是關於邊欄折疊插件的參數，建議只改 邊欄標題 來選定需要啟用折疊的邊欄，
    還有 圖示網址 來自訂折疊圖示以符合版面需求：
    
    
    • 啟用折疊：是否要啟動邊欄折疊的功能（true 為啟用，false 為關閉）。
    • 啟用圖示：是否要啟用圖片來取代文字型態的折疊按鈕（true 為啟用，false 為關閉）。
    • 文字符號：文字型態的折疊按鈕內容，像是 + 或 ▽。
    • 圖示網址：圖片型態的折疊按鈕網址，當啟用圖示為 true 時必須要設置。
    • 圖示標題：圖片型態的折疊按鈕標題，當滑鼠在圖示上方暫停時會顯示。
    • 折疊速度：邊欄折疊的速度（fast 為快，normal 為普通，slow 為慢）
    • 邊欄標題：在此輸入所有要啟用折疊功能的插入欄位標題，並以逗號分開。
      例：有兩個欄位分別為「連結書籤」和「最新的回應」，請輸入 連結書籤 ,最新的回應 。
    
    
  • 以下是關於移除（或替代）網誌底下「Posted by ...」的參數，
    帳號名稱 是必須要更改的重要參數之一：
    
    
    • 帳號名稱：樂多帳號名稱，例：原本會顯示「Posted by johnchan」，那 johnchan 即是帳號名稱。
    • 替代文字：用來替代「Posted by ...」字串的文字。
    
    
  • 以下是關於書籤插件的參數，書籤插件是為了許多網路書籤網站設計的連結圖示，
    幫助讀者直接把網誌連結加到網路書籤裡（註：樂多似乎被國外著名網站 digg
    封鎖，希望以後能被解除 ）：
    
    
    • 前置文字：放在所有書籤圖示之前的文字，例如「加入書籤」。
    • 圖示網址：digg, Technorati, del.icio.us, HEMiDEMi, MyShare 書籤網站的圖示網址，
      建議直接用豺狼提供的整套圖示。
    • 圖示寬度：所有書籤圖示的統一寬度。
    • 圖示高度：所有書籤圖示的統一高度
    • 書籤引述移除：以逗點分開字串。在加入書籤時，經常需要擷取內文來當引述，
      在這裡輸入的字串將不回出現在引述裡。例：輸入 \n, \r 將會移除全部的換行符號。
    
    
  • 以下是關於導覽插件的參數，每篇網誌都會一個些用來導覽的文字連結，
    豺狼認為有點礙眼卻又無法更改，所以加入此功能來整合所有導覽連結
    建議直接使用豺狼提供的整套圖示：
    
    
    • 圖示網址：替代「上一篇」、「下一篇」、「回 blog 首頁」、「回頁首╱回最上方」導覽列的圖示網址。
    • 圖示標題：替代「上一篇」、「下一篇」、「回 blog 首頁」、「回頁首╱回最上方」導覽列的圖示標題。
    
    
  • 以下是關於書籤與導覽插件透明參數，建議游標離開透明度盡量底一點
    （幾乎看不見），這樣可以讓整個畫面更簡潔、美觀：
    
    
    • 游標離開透明度：當滑鼠游標離開網誌下方的書籤與導覽列時的透明度。
    • 游標在上透明度：當滑鼠游標置於網誌下方的書籤與導覽列時的透明度。
    
    
  • 以下是關於引用回應標題修改的參數，豺狼希望修改它們的原因
    只是因為「引用列表:」中多出來的「：」：
    
    
    • 新引用列表標題：替代「引用列表:」的新標題。
    • 新回應文章標題：替代「回應文章」的新標題。
    
    
  • 以下是關於回應表單插件的參數，修改是因為標籤有些不整齊，
    有大寫（URL）又有小寫（email），中文又混英文，所以決定要統一：
    
    
    • 新姓名標籤：替代「姓名:」標籤的文字。
    • 新email標籤：替代「email:」標籤的文字。
    • 新URL標籤：替代「URL:」標籤的文字。
    • 新記錄標籤：替代「記錄個人資訊:」標籤的文字。
    • 新回應標籤：替代「回應:」標籤的文字。
    
    
  
  以下是豺狼的設定範例，如要採用，還是要更改有「//！需要更改！」的項目：
  <script language="JavaScript" type="text/JavaScript">
  // 邊欄折疊插件參數
  folder_on = true;
  folder_img_on = true;
  folder_txt = '+';
  folder_img = 'http://blog.roodo.com/withoutboundaries/e048ef46.gif';
  folder_alt = '+';
  folder_title = '折疊‧展開';
  folder_speed = 'normal';
  side_titles = '網誌回應,網誌月份,網誌分類'; //！需要更改！
  
  // 網誌使用帳號，用於移除「Posted by...」
  var username = 'vic_anubis'; //！需要更改！
  var subs = '';
  
  // 書籤插件參數
  var bookmark = '';
  var img_digg = 'http://blog.roodo.com/withoutboundaries/c26c3eec.gif';
  var img_tech = 'http://blog.roodo.com/withoutboundaries/41fb317f.gif';
  var img_deli = 'http://blog.roodo.com/withoutboundaries/c29b5c8f.gif';
  var img_hemi = 'http://blog.roodo.com/withoutboundaries/65f6b2b4.gif';
  var img_mysh = 'http://blog.roodo.com/withoutboundaries/7a38ac8e.gif';
  var img_bookmark_width = '12px';
  var img_bookmark_height = '14px';
  var bookmark_desc_ex = '\n,\r, ,\t';
  
  // 導覽插件參數
  var img_home = 'http://blog.roodo.com/withoutboundaries/75a562b5.gif';
  var img_prev = 'http://blog.roodo.com/withoutboundaries/8682ea55.gif';
  var img_next = 'http://blog.roodo.com/withoutboundaries/fc247f9e.gif';
  var img_top = 'http://blog.roodo.com/withoutboundaries/4d4dd0e6.gif';
  var title_home = '首頁 home';
  var title_prev = '上一篇 previous';
  var title_next = '下一篇 next';
  var title_top = '回頁首 back to top';
  
  //書籤與導覽插件透明參數
  var alpha_mouseout = 0.3;
  var alpha_mouseover = 1.0;
  
  // 引用回應標題修改
  var track_title = '引用';
  var reply_title = '回應';
  
  // 回應表單插件參數
  var name = '姓名 name';
  var mail = '電郵 mail';
  var site = '網址 site';
  var save = '記錄個人資料 save info';
  var reply = '回應 reply';
  </script>
• 完成更改後複製原始碼預備。

第三步：

• 將第二步取得的原始碼貼在第一步的原始碼後面，合併成一組完整的程式碼。
  以下為豺狼的範例，如要採用，還是要更改有「//！需要更改！」的項目：
  <script src='http://blog.roodo.com/withoutboundaries/0e585253.jpg' type='text/javascript'></script>
  <script src='http://blog.roodo.com/withoutboundaries/d15e3129.jpg' type='text/javascript'></script>
  <script language="JavaScript" type="text/JavaScript">
  folder_on = true;
  folder_img_on = true;
  folder_txt = '+';
  folder_img = 'http://blog.roodo.com/withoutboundaries/e048ef46.gif';
  folder_alt = '+';
  folder_title = '折疊‧展開';
  folder_speed = 'normal';
  side_titles = '網誌回應,網誌月份,網誌分類'; //！需要更改！
  var username = 'vic_anubis'; //！需要更改！
  var subs = '';
  var bookmark = '';
  var img_digg = 'http://blog.roodo.com/withoutboundaries/c26c3eec.gif';
  var img_tech = 'http://blog.roodo.com/withoutboundaries/41fb317f.gif';
  var img_deli = 'http://blog.roodo.com/withoutboundaries/c29b5c8f.gif';
  var img_hemi = 'http://blog.roodo.com/withoutboundaries/65f6b2b4.gif';
  var img_mysh = 'http://blog.roodo.com/withoutboundaries/7a38ac8e.gif';
  var img_bookmark_width = '12px';
  var img_bookmark_height = '14px';
  var bookmark_desc_ex = '\n,\r, ,\t';
  var img_home = 'http://blog.roodo.com/withoutboundaries/75a562b5.gif';
  var img_prev = 'http://blog.roodo.com/withoutboundaries/8682ea55.gif';
  var img_next = 'http://blog.roodo.com/withoutboundaries/fc247f9e.gif';
  var img_top = 'http://blog.roodo.com/withoutboundaries/4d4dd0e6.gif';
  var title_home = '首頁 home';
  var title_prev = '上一篇 previous';
  var title_next = '下一篇 next';
  var title_top = '回頁首 back to top';
  var alpha_mouseout = 0.3;
  var alpha_mouseover = 1.0;
  var track_title = '引用';
  var reply_title = '回應';
  var name = '姓名 name';
  var mail = '電郵 mail';
  var site = '網址 site';
  var save = '記錄個人資料 save info';
  var reply = '回應 reply';
  </script>
• 然後將它拷貝後放到「Blog 基本設定」>「說明」中，貼到原有內容後方。
  因為這是 Javascript 的關係，所以並不會顯示在網誌標題下的說明。
  
• 最後一步是要為圖示製作 CSS 樣式，請將以下的的原始碼置在「網頁樣式設定」>「個人化設定」的後方即可。
  /* 設定圖片樣式 */
  img {
  border:0px none; /* 將 border （框線）移除 */
  vertical-align:top;
  }
  
  /* 設定可透明化圖片樣式（當游標離開）*/
  img.hover {
  border:0px solid #CCCCCC;
  vertical-align:text-top;
  -moz-opacity:0.5; /* Mozilla, Firefox 的透明度 */
  filter:alpha(opacity=50); /* Internet Explorer 的透明度 */
  cursor:pointer;
  }
  
  /* 設定可透明化圖片樣式（當游標在上）*/
  img.hoverover {
  -moz-opacity:1; /* Mozilla, Firefox 的透明度 */
  filter:alpha(opacity=100); /* Internet Explorer 的透明度 */
  cursor:pointer;
  }
  
  /* 設定書籤圖示樣式（當游標離開）*/
  img.bookmark {
  width: 12px; /* 圖示寬，Internet Explorer 需要此項來顯示透明物件 */
  -moz-opacity:0.5; /* Mozilla, Firefox 的透明度 */
  filter:alpha(opacity=50); /* Internet Explorer 的透明度 */
  cursor:pointer;
  }
  
  /* 設定書籤圖示樣式（當游標在上）*/
  img.bookmarkhover {
  width: 12px; /* 圖示寬，Internet Explorer 需要此項來顯示透明物件 */
  -moz-opacity:1; /* Mozilla, Firefox 的透明度 */
  filter:alpha(opacity=100); /* Internet Explorer 的透明度 */
  cursor:pointer;
  }
  
• 按「更新 Blog 網頁」> 選「全部頁面」後按「重新更新頁面」。
• 完成囉！快到首頁看看效果吧！

相關教學：

• 石頭物語 — 為部落格加上「加入分享書籤」的按鈕
• OWEN limited dot net — CSS Opacity 實現圖片半透明效果
• 阿土伯程式大觀園 — 輕鬆擴充樂多誌功能
• Javascript Compressor — Online Javascript Compressor
• My Program — 模糊化你的 javascript - Javascript Obfuscator