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!)資料來源：接下來開始翻譯(...XD)安裝步驟：
Blogger Hacked: AJAX Labels
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.)資料來源：若要將點擊Labesl Cloud所呈現出的效果也修改成AJAX Labels的樣式的話，請將底下：
phydeaux3: Blogger Beta Label Cloud Update
phydeaux3: Code for Beta Blogger Label Cloud<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了，請參照此處
20 Comments:
When: December 31, 2006 4:34 PM
= =真的是好快速的反應呀！強～～
When: January 01, 2007 8:50 PM
用了 AJAX/JSON 的技術就一定要飛起來的呀 ^_^
When: January 02, 2007 6:30 PM
COOL layout !
nice one ;)
and xie xie for linkin' to me ^^
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
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 ^^
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
When: January 05, 2007 12:30 PM
chen,if i use ramani hack,then i cant use this hack anymore?
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!
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!
When: January 05, 2007 8:35 PM
yeaah..i want that recent comments widget too.it's cool.
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..^____^)
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?
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;
}
------------------------------------------
When: February 04, 2007 9:56 PM
wow.. nice hack.. love this button..
When: February 09, 2007 5:48 PM
To arephyz:
I really fucking love this hack, It's so cool..
When: February 20, 2007 11:02 AM
To bearjess:
出現在sidebar是因為你在step5.所新增的"HTML/Javascript" Page Element你將它放置於sidebar了，若你將他拉置中間的話，當然就出現在中間囉...^_^。
至於你提到的WORD-WRAP:break-word;這行css，確實要加…我的也有加，這問題不只會出現在這個hack上，若你post的文章本內太長也會有這問題產生唷...所以加一下就ok囉。
When: October 16, 2009 12:53 PM
你必需在你的Blog裡使用"Prototype Javascript Library"，
請問如何在 blog 裡, 使用 "Prototype Javascript Library" ??
When: October 16, 2009 12:54 PM
請問如何在 blog 裡, 使用 "Prototype Javascript Library" ??
When: October 16, 2009 12:56 PM
請問如何在 blog 裡, 使用 "Prototype Javascript Library" ??
When: October 16, 2009 10:32 PM
@花飛
也就是指單純的include動作而已，如下
--
<script src='http://chenkaie.googlepages.com/prototype.js' type='text/javascript'> </script>
--
Plz Post a Comment / 拜託你留個言啦...^^"