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

Wednesday, March 14, 2007

[AJAX] AJAX Labels Cloud Reloaded

繼之前的[AJAX] AJAX Labels Cloud之後,原作者Deepak又再度的補強了「AJAX Labels」的功能囉,趕緊來瞧一瞧吧...資料來源:
Deepack -> AJAX Labels Reloaded

※新功能如下:

  1. 內建分頁導覽系統(Navigation-System),之前的Hack只能將所有同一個類別的文章同時顯示在同一頁面,若文章很多時即會吃掉很多Memory...Browser也會整個被拖慢
  2. 支援在IE底下,使用以"繁體中文字"之類的 Unicode 來命名Label(標籤)!
  3. 安裝方式更加簡易
※至於所展現出來的效果,請直接點選我的Blog上方"AJAX Tags Cloud",再隨便選個分類即可一目了然...
底下直接講解如何安裝此Hack到你的Blogger中,至於有使用之前舊版本 AJAX Labels的玩家,請自行至"原著網站"看,有詳細的解說,教你如何「升級」到新版本的AJAX Labels(本人就是從舊版升級到新版本的),要不然直接"砍掉重練"也是可行啦.. :p

Step 1. 為了以防萬一,先備份一下你原來的template吧! 再就就是編輯你的template,找到</head>這個keyword,再將底下code貼到</head>上方。<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel - Text to show for the label feed link.
// catLabel - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5; //一次顯示幾筆資料
var navFlag = 1; //是否使用分頁(導灠)功能
var feedLabel = "Subscribe to"; //...該怎麼解釋呢..
var catLabel = "Sorted into:"; //...沒什麼好解釋的..
var closeLabel = "Click to close"; //...這也一樣.. XD

//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

上面5個粗體字的變數,根據個人喜好,可以自行再客制化一下.. :D
Step 2. 找到底下code <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
取代成下方<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

Step 3. "假如" 你在sidebar有Label Widget的話,再作這一步驟,找到底下code
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>
取代成下方
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>

Step 4. 按下此Button,再隨著說明步驟,一步一步完成...
新增此Widget的目的就是,當你點選分類標籤時,更新的內容所要顯示的地方.. ^_^,看你想放哪邊就放哪邊囉!!

Step 5. 儲存範本,結束啦...快去看看吧!! 多了..Navigation-System是不是很Cool呀!

19 Comments:

Who: arjuna Class:
When: March 23, 2007 9:26 AM  

chenkaie,你好,2个月前就找到你的blogger,学到不少东西,我的blog就是用的你修正过的template,有个问题要求教,那就是不知道为什么comments显示头像的功能运用不能,我check了css,都正常,chen sir能不能帮忙瞧瞧,指点一下,我的blogger地址是:arjunadreaming.blogspot.com
先谢过了。

Who: Tsung-Kai Chen Class:
When: March 23, 2007 10:00 AM  

To arjuna:
^_^ 謝謝支持我的template!! 這個功能目前無法work,是因為提供此功能的那個作者,所使用的Ning網路空間由於流量太大,超出一個月的traffic Quotas,所以目前暫時被停權中,等時間到了就會自動恢復正常了.. ^_^ 別擔心!
消息來源: http://singpolyma.net/2007/03/ning-problems/

Who: Cyril Class:
When: April 27, 2007 8:53 PM  

請問"Click to Close"要怎麼改成圖示?我用圖片的語法(img src...)後,AJAX就不能work了 XD

另外,請問你header上那個peek-a-boo AJAX Tags Cloud要怎麼做?

謝謝!

Who: Tsung-Kai Chen Class:
When: April 30, 2007 2:18 AM  

To cyril:
hi brother, 由於他的 "Click to Close" 是利用Javascript產生出來的的,所以你應該要改掉底下這一段:
<script type="text/javascript">document.write(closeLabel);</script>
置換成你的圖片語法...^_^ 我猜是這樣,我也沒實際操作過.

AJAX Tags Cloud的話,你可以參考我之前的這一篇 http://chenkaie.blogspot.com/2006/12/ajax-ajax-labels-cloud.html,至於peekaboo的style你先參考我的soure code,應該蠻好懂的..主要就是利用Prototype所提供的 Effect.toggle()功能,達成的,若還搞不出來,我再找時間幫你,最近比較忙一些..拍謝啦..

Who: Cyril Class:
When: April 30, 2007 4:08 PM  

不好意思,我後來決定不用AJAX Tags Cloud了,還是比較喜歡只列標題,再peekaboo顯示。

我想另外請問你,當網頁為supernav其中一個tab所指的網頁時,要怎麼讓這個tab的顏色顯示有異於其他tab?例如:當我在首頁時,"Home"這個tab便是以白色為背景,其他則是黑色背景。而當我點"About"之後,又變成"About"是白色背景,其他則是黑色。

謝謝!

Who: Tsung-Kai Chen Class:
When: April 30, 2007 5:13 PM  

To Cyril:
關於這個問題,要詳細說明,好像有點煩雜,我提示你最快的方法就是看我原始碼中的: checkSupernav(id) 這個JScript function以及有呼叫這個function的地方,這個function的主要原理即是,判斷目前ID是否為開啟的頁面,是的話,就將要開啟的頁面的Tab變換為白色,其餘變為原本的色調,很智障的暴力法完成..幸好Tab只有6項,否則Loading又要加重了.. XD,因為當時寫這功能時,我也想不出其它較有效率的方法...

Who: Cyril Class:
When: April 30, 2007 7:31 PM  

我試了,不過還是不成功,不知道有沒有哪裡法貼錯了 :P

Who: Tsung-Kai Chen Class:
When: April 30, 2007 10:06 PM  

To Cyril:
這個就得慢慢Debug了,兄弟…若你沒有裝Firebug的話,鍵議裝一下,超好用低..

Who: yakisanse Class:
When: June 19, 2007 12:26 PM  

thanks

Who: Nekki Class:
When: August 06, 2007 10:14 PM  

大大你好~又來打擾你了!!
之前裝了AJAX Labels Cloud一直運作得很正常,
可是前幾天測試時發現點標籤雲都沒有反應了,
本來以為是暫時性的,可是到現在都還沒恢復,
可以請大大幫忙查一下原因嗎...
感激不盡!!

Who: Tsung-Kai Chen Class:
When: August 07, 2007 8:08 AM  

To Nekki:
很明顯的,http://bloggerhacked.googlepages.com/ajaxlabels.js 所用到的這個檔案,存取不到...因為"The bandwidth or page view limit for this site has been exceeded."
所以這個檔暫時被停權了,以後自己Host吧..就比較不可能遇到這樣的情形了..

Who: Nekki Class:
When: August 07, 2007 8:43 AM  

原來如此~感謝大大指正
修正完畢^^

Who: 那克魯斯 Class:
When: February 25, 2009 11:40 PM  

最近使用這些AJAX Labels會發現
產生出來的文章標題是連結到[回應]而不是文章本文

作者好像又沒有繼續更新,請問有辦法改回來嗎?

Who: Tsung-Kai Chen Class:
When: February 28, 2009 1:27 AM  

Dear 那克魯斯:
你指的改回來,是指取消拿掉此功能,還是說,修正成正常可以用的呢… ^^

Who: Tsung-Kai Chen Class:
When: February 28, 2009 2:02 AM  

Comment Test

Who: 那克魯斯 Class:
When: May 21, 2009 11:53 PM  

這是我的Blog
http://knuckleslee.blogspot.com/
這個功能我用得很滿意,可是某一天
文章列表可以正確列出來,但是點進去卻變成文章回應的rss,這問題困擾我一陣子了

Who: Tsung-Kai Chen Class:
When: May 22, 2009 12:11 AM  

@那克魯斯
主要是因為Google Blogger改了JSON的format,導致現在parse出來的格式不符之前的format,我已經很久沒在用了,要正確的話,得改一下那份source
code!
不然就回原作者Blog查看有沒有更新,或是留言的部份!

Who: 那克魯斯 Class:
When: May 22, 2009 1:16 AM  

剛剛在原作者的Blog上面看到,他自己的Blog也出現同樣的狀況,看來是沒救了
自己試著打開原始碼卻發現,完全看不懂........orz

Who: Tsung-Kai Chen Class:
When: May 22, 2009 9:07 AM  

@那克魯斯
我剛無聊的幫你Trace一下code,並且實驗了一下,你只要將ajaxlabel.js裡底下這行
---
link.href=xentry.link[0].href;
---
換成這行即可
---
link.href=xentry.link[4].href;
---