Josh's Note

2007年2月28日

來取一個有Web 2.0味道的名字吧!

處於Web 2.0的時代，凡事都要有Web 2.0的痕跡；我之前在Ajax Loading Gif 線上產生器所介紹的網站，它在Banner上面有加上一個“BETA”的圖樣，旁邊還註解：「Hay! This Service is Web 2.0」，除了加上“BETA”字樣之外，最好還要有圓角的按鈕，就像我在更勁爆的「超級無腦安裝Blogger外掛功能」中所使用的一樣，另外再取一個有Web 2.0味道的名字也不錯喔！

Web 2.0 Name Generator就是一個線上名稱產生器。看看下面的列表，是不是有Web 2.0的味道：

Yanu
Topicfly
Blueopia
Taba
Realclub
23storm
Vimia
Yojo
Twiyo
Digibridge
Voovee
Flipware
42bridge
Zazu
Mybird
Chatshots
Truva

還沒想到好的名字，到Web 2.0 Name Generator來找一個吧！

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下的編碼錯誤。

我在這將方法稍做解釋：
１、進入編輯範本，打開小裝置範本，將下列程式碼加入]]></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。

２、接著尋找下列程式碼：

<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>

３、在範本中找到你的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>

４、你可以到原作者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

2007年2月24日

讓comments也能顯示文章標題

最近滿多人在問，要如何在comments也顯示文章的標題？如果用feed和json的方法，很抱歉，目前似乎只能抓到文章內容，另外在Beautiful Beta中的Widget Installation and Downloads Page這裡的“Recent comments widget”，能夠依照網址來抓取標題，但是遇上中文標題就沒用了，因為目前Blog文章的網址是依照你文章標題的英文字來取的。

之前曾在水瓶子那裡看過他所用的方法：

先抓取 comments 的 feed，內有標題的網址，再抓取藉由 comments 發佈到 gmail 信箱然後轉發到另一個部落格的 posts feed 去比對網址，取回標題。

覺得有點複雜而沒有採用，因為最近滿多人在問，所以又到他那去看了一下，發現他用上述的方法後，因為被Blogger.com認為是spam而檔掉，所以改採用新的方式：

先抓取 comments 的 feed，內有標題的網址，然後再抓取 posts 的 feed 兩個去比對

而且也做成了元件提供大家使用，只要將下列二行放置到“新增html/javascript”的widget中即可：

<script>g_szBlogDomain='xxxxx.blogspot.com'; </script>
<script src="http://js.writers.idv.tw/rc.js"></script>

《記得要將紅色部份改為你的Blog網址》

資料來源：
JSON 應用（２）：最新迴響的標題

2007年2月23日

有雜誌風格的Blog文章

如果你平時有在看雜誌，你會發現雜誌的文章有一個共同的特點，那就是文章的第一個字通常會比較大；這幾天過年看了不少雜誌，我就在想說能不能把這個特色套用在Blog上呢？

之前我曾經用良人的大秘寶 -> [筆記]在文章裡顯示優質的程式碼區來顯示程式碼，再參考53 CSS-Techniques You Couldn’t Live Without的第10個方法，所以這一次我就套用他的方法。

只要在範本的]]></b:skin>之前加入下列的CSS：

cap {
float:left;
color:white;
background:#00CCFF;
border:1px solid;
font-size:60px;
line-height:60px;
}

以後在發表文章時，只要將文章的第一個字用<cap>和</cap>包起來，這樣看起來就滿有雜誌文章的味道。

2007年2月22日

Ajax Loading Gif 線上產生器

在Web 2.0的網站，或多或少都會使用Ajax，Ajax loading gif generator這個網站，能夠讓你線上製作Loading時的動畫。以下是各種類型的展示：

在這個網站一共有27種類型可供選擇，你只需設定幾個選項就可以了。

Indicator type：選擇圖示的類型
Background color：設定背景顏色
Transparent background：是否使用透明背
Foreground color：設定圖示顏色

當你設定好上列的四個選項，按下「Generate It」，你所設定的結果可以在下方的Preview中預覽，接下來只要按下「Download It」就能把圖示存在你的硬碟中。

2007年2月17日

有Web 2.0味道的Template

當你聽到Web 2.0的時候，第一個想到的是什麼？我第一個想到的是「圓角」。

Rounder原本是二欄式Template，Hoctro's Place將它改為三欄式，並提供下載，一共有四款。

Rounder #1:

Rounder #2:

Rounder #3:

Rounder #4:

喜歡這四款Template嗎？到這裡下載來使用吧。

2007年2月16日

更勁爆的「超級無腦安裝Blogger外掛功能」

「無腦安裝Blogger外掛功能」

是在Benjamin那看到他給我這支安裝程式取的名字，真是有夠勁爆。

所以小弟本人再接再厲，再推出更加勁爆的

「超級無腦安裝Blogger外掛功能」

昨天我只是把一些我認為必需要有的設定放上去，讓使用者自行決定，其他一些細部設定就直套用預設值，今天閒來無事，把程式拿出來再改過，加入了一些細部設定，讓你安裝之後更有個人風格，新增的細部設定如下：

繼續閱讀可以自行選擇以文字或圖示來顯示
widget展開、折收也可以選擇文字或圖示顯示
作者回應的文字顏色可自行設定
Label cloud可自行設定最大/最小字體及顏色
sidebar的Icon能自行設定（預設四組）

完成這一個widget之後，再來找下一次目標。

當然，如果找到，我也會無私的分享出來的。

UpDATA 2/13：
將原先的All in One安裝也加入，請自行選擇。
UpDATA 2/16：
因為阿土伯於2/15將blogger_ext2版本更新到 0.6.1，所以Josh我於今天將安裝程式也做了更新，想將更新的內容加入你的Blog，只須將原安裝的widget刪除，再點擊下方圖示重新安裝即可。

更新內容：
新增三組表情符號集（YAHOO、MSN、BEN Jamin），自行選擇安裝
新增Label Cloud顯示文章篇數

已有新版本發佈，請參閱「超級無腦安裝Blogger外掛功能」功能更新