iGoogle funP 推推王點播台 小工具

親愛的, 我把 iGoogle 變成 funP 推推王了, 是瘋狂還是有趣....

寫了一個 iGoogle 的 funP 推推王小工具.
小工具的名稱就叫 ifunP 吧... (愛放屁?) :D
它提供了類似 funPaper 點播台的功能, 您可以利用 ifunP 快速的瀏覽推推王上的資訊, 以及被推的次數.
除此之外, 由於我是使用 TabRSS 為核心, 所以, 您可以自行新增訂閱 RSS 到 ifunP.
這下真的和 funP 點播台有點異曲同工之妙了.... :)

當然, 請搭配 EasyLayout 使用, 然後加上天氣, Flickr 相簿小工具, 讓您的版面配置和 funP 推推王很相似唷.

功能:

• 提供 funP 點播台功能.
• 可自行新增項目.
• 可以直接於 iGoogle 中推文. (new)
  

讓您用 iGoogle 更方便更好用...
##CONTINUE##
小工具畫面:


很像 funP ? 有圖有真相:


原始 funP:


加入您的 iGoogle:
請點取 Add to Google 直接加入您的 iGoogle 中.





原始程式:
http://racklin.googlepages.com/ifunp.xml

L10n:
http://racklin.googlepages.com/ifunp_tw.xml

Technorati Tags: programming, javascript, gadget, igoogle

建立您專屬的 iGoogle 個人首頁 補完計劃

Google 個人首頁 正名為 "iGoogle" 了, 網路上也有很多詳細的介紹, 還沒使用的讀者, 您一定要試試看...

iGoogle 提供了大量的 Gadget 應用程式, 並且支援分頁管理多個 Gadget, 而每個 Gadget 又能任意以滑鼠左鍵拖曳, 使用起來非常迅速方便...
最重要的特點就是承襲了 Google 的優良傳統, 整個 iGoogle 在反應速度上很快速. 使用起來給人的感覺很順暢.

目前阿土伯將 iGoogle 當成一個資訊綜整及閱讀的平台, 將 project status, machine status 都弄成小 Gadget 以及 Email / RSS Reader 已經將公事/私事都在 iGoogle 監看, 再一一連回原系統中簽核回覆.

本文會簡單介紹 iGoogle 的基本特點以及加上一些 Gadget 讓您的 iGoogle 更好用.

還在等什麼了: 快連上
iGoogle台灣：http://www.google.com.tw/ig?hl=zh-TW

##CONTINUE##
iGoogle 基本功能快速簡介:

• 新增小工具 »
  
  點選網頁右上角的「新增小工具」，會出現首頁內容目錄，點選您要的小工具下方的圖示[立即新增] 將其加入你的 iGoogle 個人首頁.
  由於小工具眾多, 您亦可以用搜尋的方式找尋小工具來新增.
  
  
• 按照 URL 新增:
  
  若您要的小工具沒有在首頁內容目錄中, 或您要新增的是 RSS 內容, 可點選[搜尋首頁內容]右邊的 "按照 URL 新增" 連結, 然後填入小工具的網址或 RSS 網址, 亦可以將小工具加入您的 iGoogle 個人首頁中.
  
  
• 設定版面:
  
  iGoogle目前包含動態佈景，每個佈景的背景圖會隨著一日作息時間而動態改變. 阿土伯的版面是 "茶坊" , 因為喜歡看那隻小狐每天都很忙碌.
  
  
• 分頁功能:
  
  當您小工具越放越多時, 就是該使用分頁的功能, 依功能將它們分類到適當的分類中, 讓您的個人首頁更清楚.
  
  

iGoogle 進階功能補完:

• 工具箱:
  http://www.google.com/ig/modules/compound.xml
  工具箱可以將頁面上的小工具收藏為分頁，讓你的頁面更整潔、更好用！
  
  

• 設定欄位:
  http://racklin.googlepages.com/easylayout.xml
  
  iGoogle 的版面配置只能三欄模式(1/3, 1/3, 1/3), 在有些情況下很不方便,而利用 EasyLayout, 它會整合進 iGoogle 的 設定版面旁邊新增一個選項 "設定欄位", 讓您可以為分頁設定成 三欄模式, 二欄模式( 2/3 1/3 , 1/3 2/3, 1/2 1/2) , 或 一欄模式.
  
  [詳細介紹]
  
  

• Tab RSS:
  http://racklin.googlepages.com/tabrss.xml
  
  Tab RSS 小工具. 讓您整合訂閱多個 RSS Feed 並且可直接預覽 Feed 內容, 可以同時訂閱不限個 Feed, 並以標籤方式整合管理.並且可以設定每個 Feed 下載的則數以及可設定是否下載內容.
  
  [詳細介紹]
  

• Flickr 相簿小工具:
  http://racklin.googlepages.com/flickr_igoogle.xml
  
  Flickr 相簿小工具, 可依 username 或 tags 列出的公開相片.提供小圖及中圖模式,提供中圖顯示 "標題" / "註解" .
  
  [詳細介紹]
  

iGoogle 其它:
範例: (首頁, 標準三欄模式)


範例: (新聞, 二欄模式)


寫 gadget 時: (Google Gadget Editor 一欄模式)


歡迎大家一起討論或補完, 讓 iGoogle 更實用方便更貼近您的生活.
當然, 阿土伯邊用邊看看還有什麼功能及建議, 繼續補完下去...

iGoogle 介紹相關網站: [打造你的iGoogle個人化首頁全功略]

Technorati Tags: programming, javascript, gadget

iGoogle Easy Layout 小工具

寫了一個 iGoogle 的 Easy Layout 小工具.
由於目前 iGoogle 的版面配置只能三欄模式(1/3, 1/3, 1/3), 在有些情況下很不方便(如看新聞或寫 Gadget Debug).
所以寫了 Easy Layout , 它會整合進 iGoogle 的 設定版面旁邊新增一個選項 "設定欄位", 讓您可以為分頁設定成 三欄模式, 二欄模式( 2/3 1/3 , 1/3 2/3, 1/2 1/2) , 或 一欄模式.
由於已整進選項中, 所以本身不會佔一個小工具的空間, 且在您變更欄位數後, 會自動把小工具移至正確的欄位上, 如: 原本在三欄模式下的第三欄小工具, 在改成二欄模式後, 會自動移到第二欄中.

更新資訊:

• 2007/08/08 發現 iGoogle Render Html 的語法有做了改變, 導致原 EasyLayout 無法作用, 已配合改版.
  

功能:

• 整合進選項中, 不佔一個小工具位置.
• 提供 三欄/二欄/一欄 模式.
• 自動將小工具移至合理欄位中.
  

讓您用 iGoogle 更方便更好用...
##CONTINUE##

中文 ScreenShot:


英文 ScreenShot:


二欄效果:



加入您的 iGoogle:
請點取 Add to Google 直接加入您的 iGoogle 中.




原始程式:
http://racklin.googlepages.com/easylayout.xml

L10n:
http://racklin.googlepages.com/easylayout_tw.xml
http://racklin.googlepages.com/easylayout_en.xml


Technorati Tags: programming, javascript, gadget

iGoogle Tab RSS 小工具

寫了一個 iGoogle 的 Tab RSS 小工具. 讓您整合訂閱多個 RSS Feed 並且可直接預覽 Feed 內容
提供中文/英文二個語系.

功能:

• 可以同時訂閱不限個 Feed, 並以標籤方式整合管理.
• 可以設定每個 Feed 下載的則數.
• 可設定是否下載內容.
• 可以預覽 "標題" / "日期" / "內容" .
  
• 提供 lightbox 視窗效果" 或 列表展開內容.
• 點標題連結回原 Feed URL.

讓您在 iGoogle 看 RSS 更加方便好用...
(可以不用再透過 "工具箱" 管理多個 Rss gadgets 嘍. 高效又省資源唷)

##CONTINUE##

中文 ScreenShot:


英文 ScreenShot:


視窗 LightBox 效果:



加入您的 iGoogle:
請點取 Add to Google 直接加入您的 iGoogle 中.




原始程式:
http://racklin.googlepages.com/tabrss.xml

L10n:
http://racklin.googlepages.com/tabrss_tw.xml
http://racklin.googlepages.com/tabrss_en.xml


Technorati Tags: programming, javascript, gadget

iGoogle Flickr 相簿小工具 更新~

有使用阿土伯的 iGoogle Flickr 相簿小工具的朋友, 如果您發現突然看不到照片了..
請您先移除阿土伯的小工具, 然後
請清除您瀏覽器 的 cookie 和 cached 即可更新.
Internet Explorer: 工具->網際網路選項->刪除 cookie, 刪除檔案
Firefox: 工具->選項->個人隱私->顯示cookies->清除全部 Cookies.
然後關閉瀏覽器, 重開瀏覽器.
再重新安裝一次即可.
##CONTINUE##
原因是 iGoogle 的 script 有改版, 原先阿土伯用來 parse JSON 是利用 Google 現有的 Script.
也就是 ig_C.parse 那個 C 我以為是 Core 的意思, 所以就安心給它用下去..
今天 Google 改版, parse 變成在 ig_D.parse ... 所以..... orz...
原來那個 C 是 javascript obfuscate 弄出來的~~
所以現在改成阿土伯自己 parse ... 唉~~ 踩到一個地雷....

安裝方式及介紹: http://racklin.blogspot.com/2007/07/igoogle-flickr.html

iGoogle Gadget 蘋果攝影隊 今天我最美

台客必備 iGoogle Gadget 蘋果攝影隊 今天我最美 , 請有需要者服用.

說到要用 Flickr Photos Gadget 在 Flickr 中以 beauty 想看到好圖, 那可能只會想要飛踼而已..
而說到 beauty , 除了有名大站和 Diggirl 外, 讓阿土伯想到的就是 http://blog.1-apple.com.tw/beauty/ .
這才是也是 素人自拍 美女外拍的代表呀~~

##CONTINUE##

在您的 Google 首頁»檢視 [蘋果攝影隊 今天我最美]

加入您的 iGoogle:
請點取 Add to Google 直接加入您的 iGoogle 中.




請一邊唱 Mc Hotdog 的 "我愛台妹" 一邊安裝使用...
謝謝.


原始程式:
http://racklin.googlepages.com/beauty_1apple_igoogle.xml


Technorati Tags: programming, gadget, javascript

iGoogle Flickr 相簿小工具

為 Flickr 相簿寫了一個 iGoogle 的小工具. 提供中文/英文二個語系.

由於 iGoogle 會 cached , 所以請清除您瀏覽器 的 cookie 和 cached 即可更新.
Internet Explorer: 工具->網際網路選項->刪除 cookie, 刪除檔案
Firefox: 工具->選項->個人隱私->顯示cookies->清除全部 Cookies.
然後關閉瀏覽器, 重開瀏覽器.

功能:

• 可依 username 或 tags 列出的公開相片.
• 提供小圖及中圖模式.
• 提供自動更新功能.
• 提供中圖顯示 "標題" / "註解" .
  
• 點圖自動載入大圖提供 lightbox 效果 並顯示 "標題"/"註解"/"拍照日期"
• 點大圖連回 Flickr.

fixed:

• 修正 IE 顯示大圖會不正確的問題.
  
• 可以看任何 Tag 的公開相片.
  

讓您在 iGoogle 看相片更加方便好用...
##CONTINUE##

中文 ScreenShot:


英文 ScreenShot:



加入您的 iGoogle:
請點取 Add to Google 直接加入您的 iGoogle 中.



Spec:

• Use Flickr REST Services with JSON Response.
• Use HTML-inline in gadget.xml. NO iframe.
  
• Use Javascript Timer. NO URL Reload.
  

原始程式:
http://racklin.googlepages.com/flickr_igoogle.xml

L10n:
http://racklin.googlepages.com/flickr_igoogle_tw.xml
http://racklin.googlepages.com/flickr_igoogle_en.xml


軟體背後:
同 exifphotostamper , 我那寶貝老婆找不到合用的 iGoogle Flickr Gadget 可以同時顯示 "標題/註解/日期" 且不用點回 Flickr 中看大圖. 只好生一個給她嘍 :)



Technorati Tags: programming, javascript, flickr, gadget

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

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

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