Kaie"s Blog 2.0 beta!
Back to "Top"

My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr
Back to "Top"
My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr

Sunday, December 31, 2006

[AJAX] AJAX Labels Cloud

今天在 Blogger Hacked 發現一個超棒的東西叫作AJAX Labels,也就是之前 [Blog] Peek-A-Boo view of posts in label pages 的改良版,利用 AJAX/JSON 的技術,大幅提升Blog的更新速度,效果就像此圖中所表現的(建議還是試著點圖中的"AJAX Tas Cloud"才能親身體驗「真的快、好厲害」),感謝作者Deepak分享(very Awesome!)資料來源:
Blogger Hacked: AJAX Labels
接下來開始翻譯(...XD)安裝步驟:

Step1:若要此hack能夠正常運作的話,你必需在你的Blog裡使用"Prototype Javascript Library",你可以到官網自行抓一份,放到你的空間中 或者懶得話拿我的去用也無妨..^^(畢竟是Google提供的空費空間),所以到必需在你的Template中新增底下code (放置於<head>...</head>裡頭)<script src='http://chenkaie.googlepages.com/prototype.js' type='text/javascript'> </script>
<script src='http://chenkaie.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>

Step2:接著新增核心部份程式碼,將底下連結中的程式碼仿Step1.同樣加到<head>...</head>裡頭,裡頭CSS請依照您個人喜好修改,細項說明,請參考原著解說!CSS Code & Javascript code:
http://bloggerhacked.googlepages.com/ajaxlabelsscript

Step3:在你的Template中找到底下片段,有一樣的全都要修改(若不改的話,就是原本Blogger提供的效果)

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
將上面紅色部份,取代成底下:
<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>

Step4:若你原先有裝Labels Cloud的話(沒有請跳到Step5.)資料來源:
phydeaux3: Blogger Beta Label Cloud Update
phydeaux3: Code for Beta Blogger Label Cloud
若要將點擊Labesl Cloud所呈現出的效果也修改成AJAX Labels的樣式的話,請將底下:<a expr:href='data:label.url'><data:label.name/></a>修改成底下的樣子<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'><data:label.name/></a>
Step5:新增一個"HTML/Javascript" Page Element放置於"Blog Posts" Element的上面(可隨個人喜好修改),裡頭的code如下(和原作不一樣,原作的似乎有些小Bug,我作了一點修改,若你作完不行的話,請參考原著):
<div id="indicator" style="display: none;">
<img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...
</div>
<div id="search-result" style="display: none;"></div>

Step6. 存檔離開就好囉....^^ 快去試試看呈現出來的驚人效果吧!!

※此AJAX Labels Cloud是抓取Blogger提供的feed中summary類別(比較精簡,為了追求更佳的速度感^^),作為文章預覽,所以呈現出來只有一小段!
※還有預設,點選每一個Label只有呈現5篇文章,若要增加的話,請將Step2裡頭程式碼"?max-results=5"中的5改為您想要的數字即可!

[Update 2007-03-14]
原作者,發表了新版本的AJAX Labels了,請參照此處

21 Comments:

Who: Benjamin Class:
When: December 31, 2006 4:34 PM  

= =真的是好快速的反應呀!強~~

Who: Tsung-Kai Chen Class:
When: January 01, 2007 8:50 PM  

用了 AJAX/JSON 的技術就一定要飛起來的呀 ^_^

Who: Efendi Class:
When: January 02, 2007 6:30 PM  

COOL layout !
nice one ;)

and xie xie for linkin' to me ^^

Who: Tsung-Kai Chen Class:
When: January 02, 2007 6:44 PM  

To efendi:
xie xie for your appreciation!
U can speak Chinese? Cool..
coz I found ur blog layout is really beautiful, besides, I found that we both use the toggle effect fortuitously ^^
therefore, I link to u..^^ and Tag u :-p

Who: Efendi Class:
When: January 04, 2007 5:42 PM  

just know a few words :P can't speak, can't read :P

anyway, i might stole some idea on layouting here ;) i love those little reference and code thing :) i'm planning on designing a new one ^^

Who: Tsung-Kai Chen Class:
When: January 04, 2007 5:59 PM  

To efendi:
:-P You are welcome to steal that, coz...I've had done the same thing, and make a new one..:-P
....just go ahead

Who: LOUI$$ Class:
When: January 05, 2007 12:30 PM  

chen,if i use ramani hack,then i cant use this hack anymore?

Who: LOUI$$ Class:
When: January 05, 2007 12:34 PM  

Sorry,what do you did to let your tag cloud and ajax tag cloud expandable? It's cool and no need to reload page!

Who: LOUI$$ Class:
When: January 05, 2007 12:46 PM  

sorry again a lot of thing to learn here, so my next question is how do you have the recent comments widget? You using json scripts?teach me please, i love it much!

Who: delang Class:
When: January 05, 2007 8:35 PM  

yeaah..i want that recent comments widget too.it's cool.

Who: Tsung-Kai Chen Class:
When: January 06, 2007 3:35 AM  

To LOUI$$:
Sorry for the late response, coz I am busy these days..^^

1st Q: Of course you can, this hack didn't conflict with ramani's ^^

2nd Q: by using the effect.toggle() provided by "Prototype" a javascript framework! refer to here http://script.aculo.us/

3.Sure, by JSON, ramani have this hack..^^ It's really a good hack.. refer to http://0rz.tw/312b4 (Btw replay to delang, too..^____^)

Who: delang Class:
When: January 06, 2007 7:34 AM  

when i refer the link given, it doesnt same wit yours.nevermind i'll get it beautifulbeta.

how do u add older post,home,newer post button?

Who: Tsung-Kai Chen Class:
When: January 06, 2007 9:32 PM  

To delang:
Coz the one I used is written in Chinese, ...XD....therefore I gave u the one posted in English..^^

add these css style to make them looks like a button ^^:
------------------------------------------
#blog-pager-newer-link a,
#blog-pager-older-link a,
#blog-pager a{
font-weight:bold;
color: #fff;
background: #c52a00 url(http://chenkaie.googlepages.com/buttonBG.gif) repeat-x 0 -1px;
border: 1px solid #555454;
color: #fff;
cursor: pointer;
height: auto;
padding: 0.2em 0.5em;
}
------------------------------------------

Who: arephyz Class:
When: February 04, 2007 9:56 PM  

wow.. nice hack.. love this button..

Who: Tsung-Kai Chen Class:
When: February 09, 2007 5:48 PM  

To arephyz:
I really fucking love this hack, It's so cool..

Who: BearJess Class:
When: February 20, 2007 2:09 AM  

为什么我加了以后,只显示在侧边栏?怎样象你的一样是显示在中间?
同时我的还出现了如果文中有较长的英文的话,将容器撑大变形了,加了一句WORD-WRAP:break-word;才解决

Who: Tsung-Kai Chen Class:
When: February 20, 2007 11:02 AM  

To bearjess:
出現在sidebar是因為你在step5.所新增的"HTML/Javascript" Page Element你將它放置於sidebar了,若你將他拉置中間的話,當然就出現在中間囉...^_^。
至於你提到的WORD-WRAP:break-word;這行css,確實要加…我的也有加,這問題不只會出現在這個hack上,若你post的文章本內太長也會有這問題產生唷...所以加一下就ok囉。

Who: 花飛 Class:
When: October 16, 2009 12:53 PM  

你必需在你的Blog裡使用"Prototype Javascript Library",

請問如何在 blog 裡, 使用 "Prototype Javascript Library" ??

Who: 花飛 Class:
When: October 16, 2009 12:54 PM  

請問如何在 blog 裡, 使用 "Prototype Javascript Library" ??

Who: 小花 Class:
When: October 16, 2009 12:56 PM  

請問如何在 blog 裡, 使用 "Prototype Javascript Library" ??

Who: Tsung-Kai Chen Class:
When: October 16, 2009 10:32 PM  

@花飛
也就是指單純的include動作而已,如下
--
<script src='http://chenkaie.googlepages.com/prototype.js' type='text/javascript'> </script>
--