Racklin's 阿土伯程式大觀園: blogger-ext

顯示具有 blogger-ext 標籤的文章。顯示所有文章

2011年8月30日星期二

將 jQuery 及 blogger-ext2 由 Blogger 移除了

至今還有部份使用者來信問問題, 感謝大家的對 blogger-ext2 的支持及不離不棄, 不過建議大家棄了它吧!

由於 blogger.com 目前已經將大部份的功能都已內建了, 所以該專案已經沒有存在的必要了, 所以建議有在使用的朋友, 請直接使用 blogger.com 內建的 "繼續閱讀" "標籤雲" "社群分享按鈕" 功能!

2008年9月16日星期二

iGoogle Tab RSS 小工具 Bug Fixed

感謝幾位網友的提醒, 阿土伯忘了現在 iGoogle 已不建議並(禁用?) html-inline 的 content 了..
所以造成了幾個小工具已不能使用.. 已修復完異.. 謝謝大家愛用..

什麼是 Tab RSS 請見下圖及參考說明:

使用說明及介紹:
iGoogle Tab RSS 小工具

2007年8月27日星期一

jQuery 1.1.4 Release

jQuery 1.1.4 出來了 jQuery 1.1.4: Faster, More Tests, Ready for 1.2 , 這將會是 1.1 系列的最後一版, 下一版本會跳到 1.2 了.
雖然被 jaceju 的 [JavaScript] jQuery 推出 1.1.4 版搶了頭香 :D ,
阿土伯還是介紹一下, 並以一些比較技術部份簡介一下.
##CONTINUE##

Speed Improvements

在三個基本常用的操作上, ID selectors, tag name selectors, 和 each() 迴圈處理上, 速度有大幅的提昇.

Any Name jQuery

jQuery 在前面的版本, 只使用了二個 global variables , 就是 $ 和 jQuery, 現在 1.1.4 後, 您可以將這二個變數也換掉, 並和其它 3rd party 的 Library 整合,果如他在 Google 的演說一樣, (阿土伯這篇有介紹), 這版就加入了, 它帶來了二個好處:

1. 你可以在同一網頁使用不同版本的 jQuery:
這個功能, 或許猛一看, 你會認為為什麼有這樣的需求??
然而, 如果您的 Library 是運用在其它大量 3rd party library 的場合, 這個功能將會是很大的相容性保證.

如:
1. 阿土伯的 Blogger-Ext 它會運用在 blogspot.com 上的, 然而很多網誌作者已自行擴充了很多功能, 也可能使用其它版本的 jQuery, 這時這個功能將能保證不會有相容性問題.

2. 使用 Firefox 的使用者一定知道 Firefox 有很多的 extensions 可以使用, 包含 Greasemonkey 等, extensions 作者可能用到了 jQuery 來設計 js , 如果這時網頁也使用 jQuery, 這時這個功能將保證不會和網頁有相容問題.

2. 您可以將 jQuery 整合進其它 Namespace 中:
同上, 你更能將 jQuery 整進你 Library 的一部份, 一同發表, 這時, 您可以維護一份您自己使用的版本, 即使網頁作者換了別的版本 jQuery, 你的程式也不會發生相容性的問題.

也就是未來版本的 BloggerExt , 阿土伯可以將它整進 BloggerExt.jQuery 或 BloggerExt.$ , 這樣 BloggerExt 將對任何網誌有最大的相容性以及最低的侵入性.

jQuery 在設計之初, 就有良好的設計模式以及未擴充任何 Native Objects , 這時就派上很大的用途.


// With the Dojo Toolkit
dojo.jquery = jQuery.noConflict(true);
dojo.jquery("#elem div").slideDown("slow");
// or with Yahoo UI
YAHOO.query = jQuery.noConflict(true);
YAHOO.query("span.hidden").removeClass("hidden");

.slice()

對於 jQuery 的 objects , 我們可以使用如同標準 Javascript arrays slice() function.
這個 Function 太優了, 它讓 jQuery 操作和 Javascript Array 有一致的操作介面.
所以, 理所當然的 .eq() , .lt() , .gt() 就被捨棄掉了. 因為可以用 .slice() 取代它.

Bug Fixes

53 個 1.1.3.1 版本的問題修正, 詳見 the bug tracker , 相當多的修正, 希望不會太快出現 1.1.4.1 :q

Local Variables:

一樣同他在 Google Tech Talk 上建議的良好習慣, 這版 1.1.4 便是將自己放在


(function(){
// your code
})();

中.

Blogger-ext2 使用方式

所以有使用 Blogger-ext2 的朋友, 只要將


<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/jquery-1.1.4.pack.js"></script>

即可完成 jQuery 的昇級動作..

2007年8月14日星期二

blogger_ext2.js 0.6.3 / 0.7.2 修正版發表

0.6.3 / 0.7.2 修正版本發表:
主要是阿土伯將大家列給我的已知問題修正, 沒有新的功能加入:

changelog:
* 較新/舊的文章換頁到第三次後, 表情符號及繼續閱讀功能失效. (fixed)
* 表情符號效能修正, 若該內容無符號則不處理. (fixed)
* registerHook API 修正 (fixed)
- 使用 Hook API 的 plugin 發生換頁問題, 將一併獲得解決.

##CONTINUE##
0.6.3 版 all-in-one script


<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-0.6.3.pack.js' type='text/javascript'></script>

0.6.3 版核心 script


<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-core-0.6.3.pack.js' type='text/javascript'></script>

0.7.2 版目前在 svn 中, 所以不用改變. 隨時會引用到最新版本.

表情符號修正版


<script src='http://blogger-ext2.googlecode.com/files/plugin_replace_smiley-0.2.pack.js' type='text/javascript'></script>

詳細使用說明:
0.6 版
0.7 版

讓大家久侯了， Sorry and Thanks.

Technorati Tags: Blogger, Javascript, Programming

2007年7月5日星期四

jQuery 1.1.3.1 Release.

jQuery 1.1.3 才 Release 三天, 緊急修正的 1.1.3.1 版本就發佈了...
這個快速的修正版本主要修正了六個主要的問題,可以在 on the bug tracker 看到修正的問題!
而 Blogger-ext2 剛好就會遇到 #1342 的問題. Fade Navbar 在 IE6 無作用.
請昇級到 jQuery 1.1.3 的朋友再昇級到 1.1.3.1 一下 orz...
##CONTINUE##

所以有使用 Blogger-ext2 的朋友, 只要將


<script type="text/javascript" src="http://blogger-ext2.googlecode.com/files/jquery-1.1.3.1.pack.js"></script>

即可完成 jQuery 的昇級動作..

Technorati Tags: programming, javascript, blogger

2007年7月4日星期三

blogger_ext2.js 0.7.0 分支全新功能 beta 版發表

0.7.0 分支 beta 版本計劃:
由於 jQuery 1.1.3 在 DOM Selector 上大幅的進步, 所以阿土伯的 blogger-ext2 也改寫了, 把 DOM Traversing 上依 id 來直接找物件(這樣最快, 但需要動態新增的 element 都配上 id) 拿掉了, 因為二者在速度上已沒什麼差別了. 但程式碼看起來比較單純簡短.

使用者偏好設定:
0.7 上最大的功能, 就是加入了使用者偏好設定的機制, 也就是除了網誌作者利用 Blogger-ext2 來擴充您的 Blogger 之外, 您的讀者更可以依個人喜好調整這些設定, 達到個人最佳的閱讀感受.
##CONTINUE##
舉個例來說好了:

像是 LabelCloud 這個 Web2.0 最酷必備的功能, 就被我老婆嫌棄: "我才不管什麼 Cloud, 字大大小小的不好看@@"
再者社群書籤也是, "那麼多國外的, 可不可以只留 hemi, yahoo, funp @@".

也就是說網誌作者的喜好不一定是最貼近您的讀者, 現在, 利用 Blogger-ext2 的新功能 ,您除了提供最酷的功能之外, 更能提供最合乎使用者閱讀習慣的網誌環境.
由於這是全新實作的介面, 所以才將原 0.6.x 分支成 0.7 , 0.6.x 的 bug 阿土伯依然會處理.
但較新的功能會在 0.7.x 上實作.

偏好設定本身亦提供 API 給 plugins 的開發者, 您不用處理設定畫面, 只需要將您的設值名稱及呈現方式列出, Blogger-ext2 會自行將 Form 畫出, 並處理使用者設定的細節.
0.7 本身亦向下相容 0.6 的 plugins, 所以比較複雜, 大部份阿土伯都測過了, 但為求穩定, 會於更努力測試完整後, 正式發表 0.7.0 的版本.

changelog:
* 使用者偏好設定.
* 社群書籤按鈕新增 funp

當然, 阿土伯需要大家幫忙測試, 以下為 0.7.0b 的使用方式.請大家幫忙測試並告知阿土伯您的意見.

0.7.0b 版 script,目前在 svn 中.
All-in-one:


<script src='http://blogger-ext2.googlecode.com/svn/trunk/src/blogger_ext2.js' type='text/javascript'></script>

只有核心:


<script src='http://blogger-ext2.googlecode.com/svn/trunk/src/blogger_ext2-core.js' type='text/javascript'></script>

如何出現使用者偏好設定的區塊:
只要您在您的部落格任何想要提供設定區塊的地方, 加上


<div id="user_pref_container"></div>

即可, 就是這麼容易.
更方便的方式就是像阿土伯一樣, 直接利用 "網頁元素"->"HTML/JavaScript", 在內容中打入您想要的訊息及


<div id="user_pref_container"></div>

即可嘍 .

美化偏好設定:
偏好設定可以利用 CSS 設定風格, 以下為阿土伯目前的 CSS:


<style type='text/css'>
#user_pref_container ul {
padding-left: 10px;
}
#user_pref_container li{
margin: 0 2px;
padding: 0 2px;
display: inline;
background-color: black;
border-bottom: 1px solid white;
}
#user_pref_container li a{
color: white;
text-decoration: none;
}
#user_pref_container li.tabs-selected {
background-color: #D25A0B; /*Brown color theme*/
border-color: #D25A0B; /*Brown color theme*/
}
#user_pref_container div.menuline {
clear: both;
width: 100%;
height: 5px;
background: #D25A0B; /*Brown color theme*/
}
</style>

plugin 實作偏好設定的範例:
只要為您原先開發的 plugin 新增二個 function 即可.

user_pref:
如果您有實作 user_pref function , 您的 plugins 設定便會出現在偏好設定中.
您無需處理偏好設定表單細節, 您只要回傳一個陣列, 包含您所有設定的欄位即可.
格式:
{tab_name: 'sample', name: 'sample', display_name: 'Sample Enable', data_type:'bool', default_value: BloggerExtOptions['sample'] }

tab_name: 您的 plugin 所要產生的 page control tab.
name: 設定參數名稱
display_name: 設定參數功能說明
data_type: 目前的 datatype 有 string , bool, enum 分別為 input[@type=text], input[@type=checkbox], 以及 select 的下拉選單.
其中如果您的 data_type: enum, 您必需再提供一個選項的陣列
options: [{display: 'Full Mode', value: 'full'},{display: 'Summary', value: 'summary'}, {display: 'Title', value: 'title'}]
default_value:

update_pref:
使用者設定完成, blogger-ext2 呼叫 update_pref 並傳給您使用者的設定, 供您做相關設定處理. 基本上, 您只要將設定值, 設定至 BloggerExtUserPrefs 即可.

以 hide_navbar 為例, 只比原先 0.6.x 多實作二個 function , 沒有實作亦可以, 只是不提供使用者設定而已, 並不會影響運作.


// Register Sample
BloggerExt.sample = function() {
// Plugin 會由此開始, 此 Sample 無功能.
};
BloggerExt.sample.user_pref = function() {
var prefs = [];
prefs.push({tab_name: 'sample', name: 'sample', display_name: 'Sample Enable', data_type:'bool', default_value: BloggerExtOptions['sample'] });
prefs.push({tab_name: 'sample', name: 'sample_input', display_name:'Sample Text', data_type:'string', 'default_value': BloggerExtOptions['sample_input'] });
prefs.push({tab_name: 'sample', name: 'sample_opt', display_name:'Sample Option', data_type:'enum', 'default_value': BloggerExtOptions['sample_opt'],
 'options': [{display: 'Full Mode', value: 'full'},{display: 'Summary', value: 'summary'}, {display: 'Title', value: 'title'}]});
return prefs;
};
BloggerExt.sample.update_pref = function(prefs) {
BloggerExtUserPrefs['sample'] = (typeof prefs['sample'] != 'undefined') ? true : false ;
BloggerExtUserPrefs['sample_input'] = (typeof prefs['sample_input'] != 'undefined') ? prefs['sample_input'] : 'default_input' ;
BloggerExtUserPrefs['sample_opt'] = (typeof prefs['sample_opt'] != 'undefined') ? prefs['sample_opt'] : 'full';
};
BloggerExt.register('sample', { sample: true} );

Technorati Tags: Blogger, Javascript, Programming

2007年7月2日星期一

jQuery 1.1.3 Release~ Blogger-ext2 請使用新版.

jQuery 經過漫長的等待, 終於出新版了, 這一版本 1.1.3 最大的特色, 就是速度,速度,速度~~

##CONTINUE##

在先前 http://mootools.net/slickspeed/ 的測試報告中.
相信有很多朋友和阿土伯一樣, 對於 jQuery CSS Selector 速度有些小小的驚訝和失落.
現在 slickspeed 的數字要改觀了, jQuery 1.1.3 和 jQuery 1.1.2 差了 8 倍的效率.
http://dev.jquery.com/~john/slickjq/ 看起來相當的另人興奮~~

~~由於 jQuery 目前也 hosting 在 Google Code 下, 且和阿土伯一樣利用 Google Code 的 files 做為 Release 的方式~~(為了不影響原 jQuery 的計次統計),所以有使用 Blogger-ext2 的朋友, 只要將
原


<script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'></script>

改成:


<script src='http://blogger-ext2.googlecode.com/files/jquery-1.1.3.pack.js' type='text/javascript'></script>

即可完成 jQuery 的昇級動作..

另 jQuery 1.1.3 功能及原文Link:
jQuery 1.1.3: 800%+ Faster, still 20KB

Technorati Tags: programming, javascript, blogger

2007年5月5日星期六

Blogger-Ext 討論群組成立.

成立了 blogger-ext2 的 google groups , 歡迎大家加入這個群組.
舉凡 blogger-ext2, xuite-ext , roodo-ext, yam-ext 等, 都歡迎到此留下 Bug 修正或功能建議.
另外, 還沒匯整或突發其想的功能, 也會先在此發佈, 再 release 出來.
##CONTINUE##

由於 Blogger-Ext 文章一多, 許多保貴的留言以及功能建議散落在各篇文章之中...
加上阿土伯被 DQMJ 困了一個月, 一時之間要回覆及 debug 有點不方便.

阿土伯等你唷.... (怎麼有點像 0204 廣告)

http://groups.google.com/group/blogger-ext2

2007年4月2日星期一

blogger_ext2.js 0.6.2 版發表

0.6.2 All-in-one 版本發表:
新增了 "文章加入社群書籤按鈕" 以及 "Blogger NavBar 可以設定為滑鼠移到後顯示功能"，除此之外，亦將使用者反應之 Bug ，阿土伯記得的都 Fixed 了。
再者，在 API 部份新增了 registerHook 指令方便大家撰寫新 Blogger 系統的首頁 Hook。

changelog:
* 繼續閱讀在標籤 / 查詢 / 封存等三個模式無法作用修正 (bugfix)
* 表情符號在標籤 / 查詢 / 封存等三個模式無法作用修正 (bugfix)
* NavBar 可設定為滑鼠移到後顯示 (new)
* 文章加入社群書籤按鈕 (new)
* registerHook API (new)

##CONTINUE##
** 0.6.1 版的使用者或進階安裝版的使用者，若不使用新增的功能，則無須做任何的設定及改變，因為 Bugfix 部份阿土伯已用原檔名為您上傳上去了，所以您可以直接使用原有功能，並獲得 Bugfix 嘍。

0.6.2 版 script


<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-0.6.2.pack.js' type='text/javascript'></script>

*文章加入社群書籤按鈕
文末增加"加入社群書籤按鈕"

0.6.2 all-in-one 內建，進階安裝使用者請加入:


<script src='http://blogger-ext2.googlecode.com/files/plugin_bookmark_buttons.pack.js' type='text/javascript'></script>

*文章加入社群書籤按鈕相關設定:


<script>
//社群書籤功能 // true = 開 false = 關
BloggerExtOptions.bookmark_buttons = true;
// 社群書籤功能自定語法範本
BloggerExtOptions.社群書籤功能='<span class="post-bookmarks">%BOOKMARK_BUTTONS%</span>';
// 社群書籤設定 僅列出一個，其它請見 source code.
BloggerExtOptions.bookmark_buttons_bookmarklets= [
       [
         'http://blogger.ext2.googlepages.com/hemidemi.gif',
         'HEMiDEMi',
         'http://www.hemidemi.com/user_bookmark/new?via=sticker&url=%URL%&title=%TITLE%&description=%DESC%'
       ]
];
</script>

讓大家久侯了， Sorry and Thanks.

Technorati Tags: Blogger, Javascript, Programming

2007年2月24日星期六

Blogger Hack Tip #1 - Hacking Blogger index.html

新增了一個 Blogger Hack Tip 專題，將我修改的心得以及大家問的問題，做一個整理及備忘。

也希望大家不吝指教，一起切磋。

How to hacking Blogger index.html:

我要如何在新版本 (Blogger beta) 首頁(index.html) hack 功能? 為什麼我寫的 javascript 運作正常，但按了最下方的"較新的文章" "較舊的文章" 後便沒有作用了?

##CONTINUE##

Tip #1:

這個 Tip 就是阿土伯用在處理繼續閱讀的方式。

由於新版本(Blogger beta)增加了 "較新的文章" "較舊的文章" 功能，然而它是利用 XHR 的方式運作，所以頁面並未 Reload。對於大部份 hack 的 javascript 來說，它是運作於 document.onload 或 dom ready 時機，所以無法於換頁後運作。

所以我們必需觀察 Blogger 它的 XHR Response handle ，然後進行 Hooking 。這個方式可以用在任何 ajax 程式中加掛您想擴充的功能。

以 Blogger beta 來說，它的 Response handle 是 _WidgetManager._HandleControllerResult ，所以我們就對它下手嘍。

原程式流程:



XHR Request - XHR Response - _WidgetManager._HandleControllerResult

新程式流程:



XHR Request - XHR Response - MyFunction - _WidgetManager._HandleControllerResult

以 Javascript 來實作，最容易的方式就是以新的 MyFunction 取代 _WidgetManager._HandleControllerResult ，然後在 MyFunction 中利用 Function.apply 呼叫原 _WidgetManager._HandleControllerResult 即可完成。

附上繼續閱讀功能的 Hooking Source Code:



 // Try hook Blogger _WidgetManager_HandleControllerResult

 if(BloggerExt.isListMode()  (typeof BloggerExt._WidgetManager_HandleControllerResult == 'undefined') ) {

 BloggerExt._WidgetManager_HandleControllerResult = _WidgetManager._HandleControllerResult;

 _WidgetManager._HandleControllerResult = function() {

 try {

 // Call _WidgetManager_HandleControllerResult

 BloggerExt._WidgetManager_HandleControllerResult.apply(this, arguments);

 // replace_continue_markup

 BloggerExt.replace_continue_markup();

 }catch(e) {

 }

 }

 }

Technorati Tags: Javascript, Blogger, Programming

2007年2月15日星期四

blogger_ext2.js 0.6.1 版本發表

0.6.1 All-in-one 版本發表:
基本上這只是一個 Bugfix 以及小功能的改版。由於目前程式全部提交 Google Code 管理，所以順便也把 Release 的程式命名規則化了。算是新年賀歲版嘍~~ :D

加上 Josh 的自動安裝程式，我會再把它加進說明中， Josh 謝啦~~~~~~

changelog:

* 加入了表情符號集 .js ，直接引用，不用在您的 BloggerExtOptions.smiles 設定長長的一堆嘍!!(MSN 版感謝 GeniusKiKi 提供)
* 作者回應高亮度顯示支援二個以上共筆作者(星子建議)
* 標籤雲支援顯示篇數而非只有字體變化大小(sierra 建議)
* 作者回應小 bug 修正。

##CONTINUE##
0.6.1 版 script


<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-0.6.1.pack.js' type='text/javascript'></script>

MSN 表情符號集(60個):


<script src='http://blogger-ext2.googlecode.com/files/emotionset_msn.js' type='text/javascript'></script>

YAHOO 表情符號集(54個):


<script src='http://blogger-ext2.googlecode.com/files/emotionset_yahoo.js' type='text/javascript'></script>

BEN Jamin 表情符號集(10個):


<script src='http://blogger-ext2.googlecode.com/files/emotionset_benjamin.js' type='text/javascript'></script>

歡迎大家繼續提供~~~ yahoo 我貼到眼睛都花了 .....

0.2 版作者高亮度顯示


<script src='http://blogger-ext2.googlecode.com/files/plugin_author_comment_highlighting-0.2.pack.js' type='text/javascript'></script>

0.2 版標籤雲


<script src='http://blogger-ext2.googlecode.com/files/plugin_labelcloud-0.2.pack.js' type='text/javascript'></script>

0.2 版標籤雲新增設定


<script>
BloggerExtOptions.labelcloud_display_count = true ; // false == 預設不顯示
</script>

謝謝大家!

新年快樂~~~

2007年2月9日星期五

blogger_ext2.js 加速篇 - 全面換用 google code

許多網友在回應或來信告知說使用了 blogger_ext2 後，blog 變的很慢...
阿土伯我真的要跳出來為自己申冤一下，人真的不是阿土伯我殺的 ...
因為在實作的技術上， blogger_ext2 它是在你的 blog 文件全部載入後，重新為您的 blog 重排版來增加功能，所以，它不會影響你原來 blog 的速度，因為它是要"下載完成"才會運作的。

然而，因為阿土伯給大家用的 javascript 程式的空間，目前是放在 google pages 服務下的。
最近的 www.googlepages.com 不知是否在維修還是怎麼地，變的異常慢，所以各位覺得慢，是因為要由 racklin.googlepages.com 載入 javascript 程式碼的原因。

##CONTINUE##
圖片數據會說話: (請點回 flickr 看大圖)

載入二個 javascript 要花 19s + 25s。
光由 benjamin0311.googlepages.com 下個 oops.png(1k) 的圖，也要花上 26s 真是讓人瘋掉...

最令人受不了的是，各位看看我的 googlepages.com 的 admin 界面，所有檔案都消失了，最神奇的是居還是能 download 檔案. google pages , 你在忙啥呀~~~~~~

由於 googlepages.com 實在是慢到連阿土伯我自己也受不了。所以去申請 google code 服務。
所以請把您的 ~~<script src='http://racklin.googlepages.com/jquery.pack.js' type='text/javascript'></script> <script src='http://racklin.googlepages.com/blogger_ext2.pack.js'type='text/javascript'></script>~~

改成


<script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'></script>
<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-0.6.1.pack.js' type='text/javascript'></script>

嗯，快好多好多，快到嚇人呢!!!

同樣是 google 的服務，google code 你未來不會再傷阿土我的心二次吧....

最後是大絕招，直接把我的程式貼進您的樣版中，這樣是最快速的
但試合進階的玩家，那就那將我的 javascript 放進(embed)您的網頁中，這樣就不用再連線到外面去下載 javascript 嘍。
再貼語法時，記得要在加 CDATA 不然 Blogger Manager 會罵你不讓你存 template.


<script>
//<![CDATA[ 
// 程式貼在下面
//]]>
</script>

ok! 您可觀察阿土的網頁，變成 36K, 但只要 1s 就完成，其它在 googlepages.com 還是慢到幾乎逾時，即使表情符號或其它在 googlepages.com 很慢也沒關係，大部份的 blogger_ext2 的功能都已執行完成，如繼續閱讀會快就折收嘍.... :D

Source Code: http://blogger-ext2.googlecode.com/svn/trunk/

輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)!

* 注意:
請將您的程式引用位置更換至


<script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'></script>
<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-0.6.3.pack.js' type='text/javascript'></script>

* 源起:
在讀了部落格會笑了！Blogger Smiley！一文，發現讓 Blogger 利用 javascript 直接支援表情符號的確是一件方便且有趣的事，忍不住手癢也來擴充一下 Blogger 功能。
由於作者表示目前 Blogger Smiley 無法和繼續閱讀功能同時並存，有點可惜，再加上小弟我目前瘋狂愛上及學習 jQuery 中，於是重新利用 jQuery 實作了一些 Blogger 擴充功能。

* 功能簡介:
以目前 blogger_ext2 0.6b 來說，它提供了大部份 Blogger 所需的功能，且全部只要 6.3KB，相當的短小精幹唷。

對於不需要所有功能的進階使用者，您可以選用進階安裝，只要 1.1KB。

可以隱藏 Blogger NavBar。

可以使用 Blogger Smiley 介紹的表情符號功能。

可以使用繼續閱讀功能。

繼續閱讀功能支援 Markup 語法。

針對新版 Blogger 不需修改任何 CSS 及 Html Template。

所有功能支援設定選項來控制是否開啟。

Sidebar 中的網頁元素可以自定元素 "[-]折收/[+]展開" 功能。 (0.3b)

繼續閱讀支援 Link 至 post 的 URL，而非 [+][-] 展開內容。 (0.4b)

支援網誌作者回應時文章高亮度顯示。 (0.4b)

表情符號可外掛及設定。(0.5b)

標籤雲(Label Cloud) 功能。(0.5b)

Sidebar 網頁元素可以自動 NavIcon小圖示。(0.6b)

加入了表情符號集 .js ，直接引用。(0.6.1b)

作者回應高亮度顯示支援二個以上共筆作者。(0.6.1b)

標籤雲支援顯示篇數而非只有字體變化大小。(0.6.1b)

Blogger NavBar 可設定隱藏或 hover (0.6.2b)。

加入社群書籤功能。(0.6.2b)

* 運作方式:
由於 blogger_ext2 當初的發展目標就是給一般網誌站長即使不懂任何網頁基楚都能上手使用。所以 blogger_ext2並不需要修改您的 HTML Template 。
它是利用 "文件載入完成(document ready)"後，再重新為您的網誌加上新功能，可以想成 "重新為您的網誌排" 。
它是針對 New Blogger(~~beta~~)的內建功能加以擴充，讓您不懂 HTML 亦能輕鬆使用來豐富您的 Blogger。當然，舊版本的 Blogger 亦能使用。

##CONTINUE##

* 如何使用(全自動安裝):
新版本 Blogger 可直接使用由 Josh 提供之超級無腦安裝Blogger外掛功能全自動安裝，強烈建議使用此一方式!!!

* 如何使用(快速安裝 all-in-one 8KB):

舊版本的 Blogger 使用者:

登入控制主頁 - 修改 Html TEMPLATE 找到 </head>，在上面加入以下JavaScript語法即可


<script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'></script>
<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-0.6.3.pack.js' type='text/javascript'></script>

新版本的 Blogger 使用者:

登入控制主頁 - 新增網頁元素(Page Element) - HTML/JavaScript Element

然後 Title: 填入 ##HIDEME##

在 Content: 填入


<script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'></script>
<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-0.6.3.pack.js'type='text/javascript'></script>

* 進階安裝:
自 blogger_ext2 0.5版開始，已全面改為 plugins 的方式來擴充。
所以，如果您不會用到所有的功能或您熟悉網頁語法及設計，您可以使用進階安裝的方式來使用，讓 blogger_ext2 更具彈性。
整個 blogger_ext2 核心只要 1.1KB，滿足對大小及速度及客製化十分講究的玩家。
新舊版本的安裝差異同上，不再重覆，僅說明 Script 語法上的差異。


<script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'></script>
<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2-core-0.6.3.pack.js' type='text/javascript'></script>

其後再引入您所需要的功能 plugins ，如您需要 " 繼續閱讀功能" 則在上述二行後再加入一行:


<script src='http://blogger-ext2.googlecode.com/files/plugin_replace_continue_markup.pack.js' type='text/javascript'></script>

* 隱藏 Blogger NavBar

內建功能，不需安裝。

功能設定:


<script>
// Blogger NavBar// true = 隱藏 false = 不隱藏
BloggerExtOptions.hide_navbar = true;
// Blogger NavBar// true = hover
BloggerExtOptions.fade_navbar = true;
</script>

* 隱藏 Widget

內建功能，不需安裝。讓您可以加入任何的 Html/Javascript Element 來擴充 Blogger 只要 Title 是 ##HIDEME## 則會自動隱藏，不用去修改 Template。

功能設定:


<script>
// true = 隱藏 false = 不隱藏
BloggerExtOptions.hide_sidebar_html_markup = true;
</script>

* 表情符號 plugin:
直接在您的文章中打入表情符號之代碼，如同您在 IRC / MSN / AOL / Yahoo 等 IM 使用的代碼，本 plugin 會自動為您代換成圖片。
詳細說明，請參考部落格會笑了！Blogger Smiley！一文。

All-in-one 版本內建，不需安裝。若您使用進階安裝，請引入: (1.7KB)


<script src='http://blogger-ext2.googlecode.com/files/plugin_replace_smiley-0.2.pack.js' type='text/javascript'></script>

功能設定:


<script>
// 表情符號功能開關
// true = 開 false = 關
BloggerExtOptions.replace_smiley = true;
// 自定的表情符號集，請參考下面範例置換
BloggerExtOptions.smilies = [];
</script>

當然，您可以自已加入您或設定您專屬的表情符號(0.5b 設定功能)
idben's表情符號集設定範例: (10)


<script src='http://blogger-ext2.googlecode.com/files/emotionset_benjamin.js' type='text/javascript'></script>

Yahoo Messenger 動態表情符號集(0.5b default): (54)


<script src='http://blogger-ext2.googlecode.com/files/emotionset_yahoo.js' type='text/javascript'></script>

MSN 動態表情符號集(0.6.1b GeniusKiKi提供): (60)


<script src='http://blogger-ext2.googlecode.com/files/emotionset_msn.js' type='text/javascript'></script>

* 繼續閱讀功能:
您可以使用繼續閱讀功能這篇文章或繼續閱讀功能的困惑這篇文章介紹的方式，但不需要引入它的 Javascript 以及修改 css 和您的Blogger Html Template。
只要您的文章中有 <div id="fullpost"> 或 <span id="fullpost"> 便會自動支援文章繼續閱讀功能，一切都是自動的。
** 注意! 0.6.1 前版本請一定要設定 BloggerExtOptions.continue_markup_expand_title 及 BloggerExtOptions.continue_markup_collapse_title 否則會出現亂碼 **
(由於 google code 以 us-ascii charset 傳遞 javascript :( )

All-in-one 版本內建，不需安裝。若您使用進階安裝，請引入:(2.2KB)


<script src='http://blogger-ext2.googlecode.com/files/plugin_replace_continue_markup.pack.js' type='text/javascript'></script>

功能設定:


<script>
// 支援 繼續閱讀功能 // true = 開 false = 關
BloggerExtOptions.replace_continue_markup = true;
// 動態展開時，是否使用動畫效果
BloggerExtOptions.replace_continue_markup_animate= false;
// 繼續閱讀功能顯示之說明文字
// 可以是圖 img 或任何 html 語法
BloggerExtOptions.continue_markup_expand_title = ' [+]繼續閱讀全文....';
BloggerExtOptions.continue_markup_collapse_title = '[-]取消繼續閱讀全文....';
</script>

繼續閱讀功能 Markup 語法:
您可能和小弟一樣，使用 Blogger 的 WYSISWYG 編輯器，為了加上 <div id="fullpost">或 <span id="fullpost"> 常要在 Edit Html 語法中切換來切換去，所以可以使用 Markup 語法來偷懶，只要照你平常打字，在文章中打 ##CONTINUE## 關鍵字，後面跟的內容就會自動支援繼續閱讀功能了。
所以只要在平常的 WYSISWYG 編輯器下，打一下 ##CONTINUE## 就好了，非常直覺方便。
繼續閱讀功能 URL 模式:
如果您不想讓內容以動態的方式在首頁展開，可以選擇傳統的 URL 模式，使用者點了 "繼續閱讀後，會連至該文章的 URL 中。

功能設定:


<script>
// 使用 URL 連結文章而非 javascript 動態展開
BloggerExtOptions.replace_continue_markup_as_link = true;
</script>

* Sidebar 側邊網頁元素折收/展功功能:
側邊中的網頁元素，越加越多，整個側邊條長長長… 也來給他自動收納一下吧。
你只要先用 Browser 的 View-Source 看您的 Blog 頁面的原始碼，然後找 class='widget ' 就能找出每一個測邊功能的 id='xxx' ，然後把 id 填入設定中，這些功能表就自動收納啦!!!

All-in-one 版本內建，不需安裝。若您使用進階安裝，請引入:(1.2KB)


<script src='http://blogger-ext2.googlecode.com/files/plugin_sidebar_widget_expandable.pack.js' type='text/javascript'></script>

功能設定:


<script>
//側邊功能 // true = 開 false = 關
BloggerExtOptions.sidebar_widget_expandable = true;
// 動態展開時，是否使用動畫效果
BloggerExtOptions.sidebar_widget_expandable_animate= false;
// 測邊展開的 html 語法，可以是圖 img 或任何 html 語法
BloggerExtOptions.sidebar_widget_expan_title = '[+]';
// 使用圖形而非文字範例
BloggerExtOptions.sidebar_widget_expan_title='<img border="0" src="http://racklin.googlepages.com/expandall.gif" align="left"/>';
// 測邊關閉的 html 語法，可以是圖 img 或任何 html 語法
BloggerExtOptions.sidebar_widget_collapse_title = '[-]';
// 使用圖形而非文字範例
BloggerExtOptions.sidebar_widget_collapse_title='<img border="0" src="http://racklin.googlepages.com/collapseall.gif" align="left"/>';
// 要收納的元件 id
BloggerExtOptions.sidebar_widget_expandable_ids = ['Label1','LinkList1','BlogArchive1'];
</script>

* 讓網誌作者的回應文章高亮度顯示:
讓您的回應和訪客的回應擁有不同的 style 樣式。只要您的網誌中有放入 "關於我自已" 這個網頁元素，一切都全自動了。沒有放 "關於我自己" 元素的朋友也沒關係，只要您填入您自已的 profile ID 即可。
Profile ID 怎麼來，就自已寫一篇回應文章，然後移到自已的名字上，那個 URL 會長這樣 http://www.blogger.com/profile/00734471337083697849，最後面那個 00734471337083697849 就是您本人的 Profile ID 嘍。
效果及參考這篇把部落主人的話給擦得火亮但您不用改 html template 及 css 。

All-in-one 版本內建，不需安裝。若您使用進階安裝，請引入:(948Bytes)


<script src='http://blogger-ext2.googlecode.com/files/plugin_author_comment_highlighting.pack.js' type='text/javascript'></script>

功能設定:


<script>
// 讓您本人的回應火亮火亮的
BloggerExtOptions.author_comment_highlighting = true;
// 您本人的 Profile ID ，空白則自動判斷，但您必須要有 "關於我自已" 的元素。
BloggerExtOptions.author_comment_highlighting_profile = '';
// 火亮的 css style
BloggerExtOptions.author_comment_highlighting_style = { 'color': '#C30014', 'font-width': 'bold' };
</script>

* 標籤雲 Label Cloud 功能:
讓您只要您在您的 Blog 加入 NewBlogger 的網頁元素(Page Element)下的"標籤(Labels)元素"即可擁有 "標籤雲" 功能嘍，就是這麼簡單容易。

All-in-one 版本內建，不需安裝。若您使用進階安裝，請引入:(1.4KB)


<script src='http://blogger-ext2.googlecode.com/files/plugin_labelcloud.pack.js' type='text/javascript'></script>

功能設定:


<script>
// 標籤雲設定 // 開關
BloggerExtOptions.labelcloud = true ;
//blogger 內建 label 元素的 id
BloggerExtOptions.labelcloud_widget_id = 'Label1' ;
// 最大字體級數
BloggerExtOptions.labelcloud_maxFontSize = 24 ;
// 最小字體級數
BloggerExtOptions.labelcloud_minFontSize = 10 ;
// 最大字體顏色 RGB
BloggerExtOptions.labelcloud_maxColor = [168,181,248] ;
// 最小字體顏色 RGB
BloggerExtOptions.labecloud_minColor = [0,0,0] ;
</script>

* Sidebar 側邊網頁元素 Icon 圖示功能:
側邊中的網頁元素，只能顯示文字，覺得太單調了嗎，給它加個 Icon 圖示吧。
你只要先用 Browser 的 View-Source 看您的 Blog 頁面的原始碼，然後找 class='widget ' 就能找出每一個測邊功能的 id='xxx' ，然後把 id 填入設定中，再為它設個 Icon 圖示就 OK 啦!!!

All-in-one 版本內建，不需安裝。若您使用進階安裝，請引入:(595Bytes)


<script src='http://blogger-ext2.googlecode.com/files/plugin_sidebar_widget_icon.pack.js' type='text/javascript'></script>

功能設定:


<script>
//側邊 Icon 功能 // true = 開 false = 關
BloggerExtOptions.sidebar_widget_icon = true;
// 使用圖形而非文字範例
BloggerExtOptions.sidebar_widget_collapse_title='<img border="0" src="http://racklin.googlepages.com/collapseall.gif" align="left"/>';
// 要元件 id 所對映的 Icon
BloggerExtOptions.sidebar_widget_icons= {'Label1':'<img src="http://racklin.googlepages.com/bkmrk_nav.gif" align="left"/>',
                           'Profile1':'<img src="http://racklin.googlepages.com/home_nav.gif" align="left"/>',
         'BlogArchive1':'<img src="http://racklin.googlepages.com/tree_explorer.gif" align="left"/>',
                               'LinkList1':'<img src="http://racklin.googlepages.com/discovery.gif" align="left"/>'
        };
</script>

* 加入社群書籤功能:
讓您的 Blog 文章提供各個社群書籤的加入連結及圖示。

All-in-one 版本內建，不需安裝。若您使用進階安裝，請引入:(2109Bytes)


<script src='http://blogger-ext2.googlecode.com/files/plugin_bookmark_buttons.pack.js' type='text/javascript'></script>

功能設定:


<script>
//社群書籤功能 // true = 開 false = 關
BloggerExtOptions.bookmark_buttons = true;
// 社群書籤功能自定語法範本
BloggerExtOptions.社群書籤功能='<span class="post-bookmarks">%BOOKMARK_BUTTONS%</span>';
// 社群書籤設定 僅列出一個，其它請見 source code.
BloggerExtOptions.bookmark_buttons_bookmarklets= [
        [ 
          'http://blogger.ext2.googlepages.com/hemidemi.gif',
          'HEMiDEMi',
          'http://www.hemidemi.com/user_bookmark/new?via=sticker&url=%URL%&title=%TITLE%&description=%DESC%' 
        ] 
];
</script>

* Source Code:
本專案是一個完全 open source 的專案，歡迎大家使用及修改開發。
Source Code: http://blogger-ext2.googlecode.com/svn/trunk/
若您亦寫了 plugin ，請將您的 plugin link 給小弟，小弟把它加入我的說明中...

* 開發 plugin :
0.5b 後，blogger_ext2 已是一個 plugin base 的開發環境，所有在下寫的擴充也都是以 plugin 方式掛入。
您可以很容易的一起設計 plugin , 請參考 DIY 利用 blogger_ext 擴充 Blogger 功能!

* 其它功能:
待續
…
歡迎大家引用及給小弟建議。

建議大家直接使用，而不需另存，這樣小弟可以遠端為您 debug 或改版，您的網站可即時更新及享用。

* Change Log:

0.6.3: registerHook API fixed。

0.6.2b: NavBar 可設定為滑鼠移到後顯示。

0.6.2b: 文章加入社群書籤按鈕。

0.6b: 加入 sidebar widget Icon 圖示功能。

0.5b: 重新設計重新，plugins 導向設計。

0.5b: 表情符號可外掛及設定。

0.5b: 標籤雲(Label Cloud) 功能。

0.4b: 加入繼續閱讀 url mode 及作者回應火亮火亮功能。

0.3b: 加入 sidebar widget 折收功能。

0.2b: 加入繼續閱讀相容 span,div id=fullpost 功能。

0.1b: 加入表情符號及繼續閱讀 Markup 語法功能。

blogger_ext2.js 0.6 版本發表

由於 0.5 版發表後，整個 blogger_ext2 有了極大的改變，所以花了時間將輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)! 說明整個也跟著重新寫過。
希望大家有使用的可以再花個時間重新讀一次…呼!!! 寫文件比寫程式還累人呢!!!
##CONTINUE##
若是不想重讀的，本篇文章給您 highlight 一下，最主要的差異在於提供了壓縮 pack 的 script 版本，整個 blogger_ext2 all-in-one 只要 8KB。
若是選擇使用進階方式，核心只要 1.1KB, 搭配選用功能，大約 3-5k 不等，大大加速文件載入速度。
請將您的程式引用方式改為


<script src='http://blogger-ext2.googlecode.com/files/jquery.pack.js' type='text/javascript'></script>
<script src='http://blogger-ext2.googlecode.com/files/blogger_ext2.pack.js' type='text/javascript'></script>

** 請大家將您的 script 引用網址改成上面新的 **原因請參考這篇

0.6 版加入了一個側邊元素 Icon 圖示的 plugin 。
0.6 版加入了折收可以選擇動畫或快速模式。

有關功能及設定，請參考輕鬆擴充 Blogger 功能: jQuery way!
有關 plugin 功能撰，請參考 DIY 利用 blogger_ext 擴充 Blogger 功能!

謝謝大家!

2007年2月5日星期一

DIY 利用 blogger_ext 擴充 Blogger 功能!

利用 blogger_ext2.js 0.5b 來撰寫 Blogger 的擴充元件。

不免俗的，來寫一個 Hello World!! 元件吧:

##CONTINUE##

首先，先寫您的 hello world 功能，程式碼如下:


BloggerExt.helloworld = function() {
   alert(BloggerExtOptions.helloworld_string);
}

接下來，把它註冊進 Blogger 網頁載入後，自動執行，以及接受的設定:


BloggerExt.register('helloworld' ,  {helloworld: true, helloworld_string: 'Hello World'});

OK!! 現在，只要網誌載入完成後，便會自動執行您的 helloworld 程式。

而使用者則可在自已的設定中，利用 BloggerExtOptions.helloworld = false; 來決定關閉功能與否。

BloggerExtOptions.helloworld_string = 'Hello World'; 來設定字串。

程式您可以存成 helloworld.js 並加入 Template 或 Page Element 引用即可(要加入在 blogger_ext2.js 後面)。
完整程式如下:


BloggerExt.helloworld = function() {
   alert(BloggerExtOptions.helloworld_string);
}
BloggerExt.register('helloworld' ,  {helloworld: true, helloworld_string: 'Hello World'});

0.5b 中的標籤雲 plugin 實作程式碼:
最後，您可以將您的 Script 壓縮，以得到更快的載入速度。
javascript 壓縮程式，請參考 http://dean.edwards.name/packer/ 。

0.5b 中的標籤雲 plugin 實作程式碼:


BloggerExt.labelcloud = function() {

    var arLabels = new Array();
    var arLabelCounts = new Array();
    var labelMaxCount = 0;

    // by delicious
    function s(a,b,i,x){
        if(a>b){ var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m); }
        else{ var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a); }
        return v;
    }

    jQuery('#'+BloggerExtOptions.labelcloud_widget_id+' div li').each(function(idx){
        var txt = jQuery(this).text();
        var i = txt.indexOf('(');
        var j = txt.indexOf(')');
        var labelCount = txt.substr(i+1, (j-i-1));
        arLabels[idx] = this;
        arLabelCounts[idx] = labelCount;
        if(parseInt(labelCount) > labelMaxCount) labelMaxCount = parseInt(labelCount);
    });
    for (var i=0; i<arLabels.length; i++) {
        var liObj = jQuery(arLabels[i]);
        var aObj = liObj.find('a');
        var v = s(BloggerExtOptions.labelcloud_minFontSize, BloggerExtOptions.labelcloud_maxFontSize, arLabelCounts[i], labelMaxCount);
        var r = s(BloggerExtOptions.labecloud_minColor[0], BloggerExtOptions.labelcloud_maxColor[0], arLabelCounts[i], labelMaxCount);
        var g = s(BloggerExtOptions.labecloud_minColor[1], BloggerExtOptions.labelcloud_maxColor[1], arLabelCounts[i], labelMaxCount);
        var b = s(BloggerExtOptions.labecloud_minColor[2], BloggerExtOptions.labelcloud_maxColor[2], arLabelCounts[i], labelMaxCount);
        if(aObj.length == 1) {
            aObj.css({'font-size': v, 'color': 'RGB('+r+','+g+','+b+')'});
            liObj.html(aObj);
        }else {
            liObj.css({'font-size': v, 'color': 'RGB('+r+','+g+','+b+')'});
        }
        liObj.css({'display': 'inline'});
    }
};

BloggerExt.register('labelcloud' ,  {
    labelcloud: true,
    labelcloud_widget_id: 'Label1',
    labelcloud_maxFontSize: 24,
    labelcloud_minFontSize: 10,
    labelcloud_maxColor: [168,181,248],
    labecloud_minColor: [0,0,0]
});

輕鬆擴充 Blogger 功能: blogger_ext2.js 0.5b 版本發表。

感謝大家的喜愛及測試，並給予相當多建議， 0.5 版基本上算是一個 "大" 改版。
由本來 0.1 - 0.4 的試試利用 jQuery 來擴充 blogger 的實作概念程式碼，
0.5b 不再只是手癢之作，而是全部重新設計，重新寫過。

0.5 版最大的改變在於，它不只是一個 Blogger 的擴充功能，亦是一個 Blogger 擴充功能的
"開發平台" ，除了在下會陸續把大家的想法擴充進來之外，歡迎大家一起來創作，把功能
plugin 進來。

當然，除了重新改寫之外，對使用者來說，最重要的是加入了什麼功能:

##CONTINUE##

使用者回應的 Bugfix。(這很重要 :D )
表情符號可外掛及設定。
標籤雲(Label Cloud) 功能。

有關功能及設定，請參考輕鬆擴充 Blogger 功能: jQuery way!
有關 plugin 功能撰，請參考 DIY 利用 blogger_ext 擴充 Blogger 功能!

謝謝大家!

2007年1月26日星期五

擴充 Blogger 功能: blogger_ext2.js 0.4b 版本發表。

經過大家的測試及建議， 0.4b 版本加入了目前所有回應建議的功能嘍:

Sidebar 中的網頁元素可以自動元素 "[-]折收/[+]展開" 功能。 (0.3b)
繼續閱讀支援 Link 至 post 的 URL，而非 [+][-] 展開內容。 (0.4b)
支援網誌作者回應時文章高亮度顯示。 (0.4b)

##CONTINUE##

只要引用 http://racklin.googlepages.com/blogger_ext2.js 的網友已經可以直接使用新功能嘍，只要加上相對應的設定值即可。

相關使用說明及設定，請參考

擴充 Blogger 功能: jQuery way!

謝謝大家!

訂閱：文章 (Atom)

2011年8月30日 星期二

2008年9月16日 星期二

2007年8月27日 星期一

Speed Improvements

Any Name jQuery

.slice()

Bug Fixes

Local Variables:

Blogger-ext2 使用方式

2007年8月14日 星期二

2007年7月5日 星期四

2007年7月4日 星期三

2007年7月2日 星期一

2007年5月5日 星期六

2007年4月2日 星期一

2007年2月24日 星期六

2007年2月15日 星期四

2007年2月9日 星期五

2007年2月5日 星期一

2007年1月26日 星期五

2011年8月30日星期二

2008年9月16日星期二

2007年8月27日星期一

2007年8月14日星期二

2007年7月5日星期四

2007年7月4日星期三

2007年7月2日星期一

2007年5月5日星期六

2007年4月2日星期一

2007年2月24日星期六

2007年2月15日星期四

2007年2月9日星期五

2007年2月5日星期一

2007年1月26日星期五