2007年2月26日

Blogger Hacked: AJAX Labels Reloaded

經使用在我Blog的Header下方的Tab的人,一定知道可以預覽該Label的前五篇文章,我是利用Kaie's Blog[AJAX] AJAX Labels Cloud再上如何將你的Label做成Tabs所製作而成,今天在原作者Deepak那發現他又將Ajax Label的功能加強,不但增加分頁的功能,讓預覽不再只限於五篇,而且安裝更方便,並且修正在IE下的編碼錯誤。

我在這將方法稍做解釋:
1、進入編輯範本,打開小裝置範本,將下列程式碼加入]]></b:skin>之前:#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;}
將下列程式碼加入</head>之前:<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; //ON by default
var feedLabel = "標籤訂閱";
var catLabel = "標籤:";
var closeLabel = "[x]關閉";
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

其中紅色部份可以自行設定,maxresults – 每一頁所顯示的筆數,navFlag – “1”表示開啟分頁“0”表示關閉;如果你之前已經有如入Ajax Label請跳到步驟4。

2、接著尋找下列程式碼:<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>


3、在範本中找到你的Label1這個widget,找到下列的程式碼:<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>


4、你可以到原作者Blog的步驟4,按下來新增一個Html/Javascript的widget以便顯示Ajax Label的搜尋結果,並儲存範本;或者自行新增,將下列程式碼加入你自行新增的widget內:<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"><a name="sres"></a>
<div class="search-close" onclick="javascript:Element.hide('search-result')">
<script type="text/javascript">document.write(closeLabel);</script>
</div><div id="show-result"></div>
<div class="search-close" onclick="javascript:Element.hide('search-result')">
<script type="text/javascript">document.write(closeLabel);</script></div></div>

如果你之前曾經加入過Ajax Label,請先移除舊的widget,再進行此步驟。

因為之前的版本最多只能顯示5筆,所以我才保留Label Cloud,另外再加入一個Tab來使用Ajax Label,套用這個版本後,可能要考慮將Tab移除或者將Tab轉為其他用途了。
UpData:2/27
修正一些顯示上的錯誤,如果你在2/27以前曾參考本文,請重新進行步驟2、3、4。
參考資料:Blogger Hacked: AJAX Labels Reloaded

16 則留言:

  1. 你好,我最近订阅了你的blog,我是个新手啦,你讲的这些太高深,我也搞不太懂,我想请教一个问题,写blog的时候要引用别人的文章怎么像你那样加上背景啊?就比如如果是代码你就会加上一个框框,左边会写明是code,如果是引用也会有个背景,里面是个大大的引号,这些要怎么用呀,我只要会用那个大大的引号的背景就可以了,嘿嘿,先谢谢啦!

    回覆刪除
  2. 關於引用的背景,通常範本內的css有一段為.post blockquote,只要在這一段裡面加入“background: url("背景圖連結位址") ;”就可以了,詳細部份你可以看我的原始碼,尋找”.post blockquote”。

    回覆刪除
  3. 應該是完全按照您介紹的方法修改的代碼,可是還是不行~~~ 能不能MAIL您 給您看看我修改之后的HTML

    我主要是對第一步把握不大 怕加錯地方 但是看您的意思是加在< head >...< /head >之间 似乎又没有错误~

    不过我是对代码不熟悉的 也怕是哪里没注意加错了~~~

    回覆刪除
  4. http://www.box.net/public/rac49agf2v


    這就是我剛才說的修改后的HTML 了 你若有時間幫我看看 謝謝了~~~
    :)

    回覆刪除
  5. 忘記和您說了 我用的是
    http://metamuse.blogspot.com/2007/01/blogger-template-gadget-10-aol-engadget.html

    這里的Gadget 1.1 SKINS
    之后自己基本沒有改動。

    你介紹的這個東東太有用了 誘人ING...

    回覆刪除
  6. 暈~~~忘記了 我的mail:cn1tang@gmail.com

    回覆刪除
  7. 恩 好鳥 后事都交代完鳥~~~~ 拜托了

    回覆刪除
  8. http://ttist.blogspot.com/
    這是我的BLOGGER
    汗 后事沒交代干凈。。。。。。

    回覆刪除
  9. 嘿嘿,不好意思,我还是没能搞定,我把我的那段
    .post blockquote {
    margin:1em 20px;
    }
    .post blockquote p {
    margin:.75em 0;
    }
    直接替换成了你的
    .post blockquote {
    background-position:-10px -7px;
    border: 1px dashed #FFC600;
    margin: 20px 10;
    padding: 0 10px 0 25px;
    background: url("c") 5% no-repeat #FFF8DD;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;

    }.post blockquote p {
    margin: .75em 0;
    }
    -________-|||
    因为我实在是一窍不通
    不知道这样是否行的通?如果可以的话为什么我的引用还是没有图片呢,如果不可以到底要怎么做呢,如果你觉得描述起来太麻烦就不要描述了,还是要谢谢你!

    回覆刪除
  10. 回樓上的:
    background: url("c") 5% no-repeat #FFF8DD;這一行中的“c”要填入圖片的連結位址,按這裡下載。把圖片放到網路空間(例如:Google Pages),再填入網址。

    回覆刪除
  11. 我已经改成了
    .post blockquote {
    background-position:-10px -7px;
    border: 1px dashed #FFC600;
    margin: 20px 10;
    padding: 0 10px 0 25px;
    background: url("http://xiaonuanka.googlepages.com/quote.png") 5% no-repeat #FFF8DD;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;

    }.post blockquote p {
    margin: .75em 0;
    }
    怎么还是不行,写blog的时候还需要另外做什么吗?

    回覆刪除
  12. 呃....我觉得像我这样的菜鸟是不是还是不要玩儿blog比较好...5555~~~

    回覆刪除
  13. TO xiaonuanka:
    將要顯示引用的文章段落反白選取,再按下編輯器上方工具列的“引用文字”按鈕,或者用下列的方法:
    <blockquote>文章段落</blockquote>

    回覆刪除
  14. 哈哈,终于搞定了,之前我也用了“引用文字”按鈕,只是每次我都是预览看看效果,预览是看不到效果的,晕,只有发表了才能看到,所以我一直以为自己没有成功,多谢你啦!!~

    回覆刪除
  15. 抱歉,請問要如何才能像您發表文章中的程式碼區塊,也就code區塊!
    勞煩了

    回覆刪除