BlogAD部落格廣告聯播網

如果你將頁面往下拉，你會發現在我的Sidebar發現BloggerAds的廣告，BloggerAds一個專屬於部落格的廣告模式，和BloggerAds相同的，BlogAD也是專屬於部落格的廣告模式，BlogAD是由原生數位行銷所成立的專業網路廣告媒體公司，申請條件也沒太大的限制，只要是繁體中文的部落格即可，由於收入須要開立扣繳憑單，所以另一條件就是必須要有台灣的國民身份證，只要符合上述二個條件就能申請加盟。

另外在BlogAD的加盟須知中有幾點很重要：

• 部落格內容不包含色情、鼓吹犯罪、專營軟體下載、惡意毀謗他人、違反善良風俗、觸犯法律、盜版軟體、違反著作權法等內容。
• 部落格內容完整並具有明確的主題。
• 部落格內容使用繁體中文為主要語系。
• 您擁有台灣的身份證或營利事業登記證（如以公司名義申請）。
  

S.S.AD.(Stay Second Ad)
而BlogAD除了有一般的點擊計費廣告之外，另外還有一種S.S.AD.(Stay Second Ad)–以秒計費廣告機制，「以秒計費廣告機制」指的是當網友點選以秒計費廣告，並在廣告網站停留一定的秒數後，就能得到廣告獎金，而以秒計費廣告會比一般點擊計費廣告獎金來的高。

下線招募機制
和同樣是部落格專屬的BloggerAds不同的一點，就是BlogAD有提供「下線招募機制」，當你加入BlogAD後，會有一組下線招募的連結網址，當有人透過這組連結加入BlogAD就會成為你的下線，當有人在你的下線網站點擊廣告時，你也會獲得廣告獎金，下線的寬度深度有二層，寬度則是無限，讓你的除了自己Blog的廣告之外，更多了另一種收入。

還有一點很重要，BlogAD對於無效點擊的規定相當嚴格，而且對於帳號停權也有一定的規範：

1. 在您加入BlogAD時會記錄您的IP，若一天內使用相同IP點擊廣告3次以上並當月累計超過3天，BlogAD會於此公佈數據及帳號並立即停權，您的所得將退還廣告主。
2. 在您加入BlogAD時會記錄您的IP，若在一個月內相同IP點擊廣告10次以上，BlogAD會於此公佈數據及帳號並立即停權，您的所得將退還廣告主。
3. 在您加入BlogAD時會記錄您的IP，若一天內有類似IP點擊廣告3次以上並累計超過3天，BlogAD會於此公佈數據及帳號並立即停權，您的所得將退還廣告主。
4. 若一天內有相同IP點擊超過3次以上，但此IP與申請時的IP不同，BlogAD會與您聯繫並告知數據，雙方達到合理的認知後，將扣除此點閱獎金，您的所得將退還廣告主。
5. 若一天內有類似IP點擊超過6次以上，但此IP與申請時的IP不同，BlogAD會與您聯繫並告知數據，雙方達到合理的認知後，將扣除此點閱獎金，您的所得將退還廣告主。
6. 若您日報表點閱量超過曝光量並當月累積2天以上(含)，在BlogAD程式正常運作情況下，BlogAD會於此公佈數據及帳號並立即停權，您的所得將退還廣告主。
7. 若您日報表點閱率超過2%並當月累積10天以上(含)，在BlogAD程式正常運作情況下，BlogAD與您聯繫並告知數據，及尋找問題點，若為以上條款等不當點擊造成，BlogAD會於此公佈數據及帳號並立即停權，您的所得將退還廣告主。

而獎金發放的下限是500元，請款日為當月10日之前，獎金款項會在當月25日匯進你的帳戶，請款之前你必須將你的身份證掃描為圖檔以e-Mail附加檔案的方式寄到service@blogad.com.tw，或者將影本寄到台北縣234永和市永元路95巷8號3樓 原生數位行銷有限公司收，完成才能於當月25日收到獎金。

現在就申請加入BlogAD吧！

Google AdSense以外的選擇

有愈來愈多的部落客在自己的部落格投放Google AdSense的廣告，但是除了Google AdSense之外也有愈來愈多的選擇，目前就Josh所知道的有BloggerAds、博客來AP策略聯盟夥伴、興奇大聯盟計畫、酷比Admedia等等，其中BloggerAds和是專屬於部落格網站上的廣告模式，算是比較特別的。

至於申請的條件各有不同，有的條件比較嚴格，以下個別列出：
BloggerAds：

1. 限繁體中文的部落格。
2. BloggerAds部落客廣告位置必須放置在Blog顯目的位置，以維持Blog廣告整體效益。
3. 提供的廣告可分為商業廣告及公益廣告。
   

或許是因為剛起步，所以目前所能提供商業廣告有限，而撥放公益廣告並不會有收益，目前還須繼續觀察。

博客來AP策略聯盟夥伴：
共有三種合作方式：

1. 獨家仲介金行銷引薦
   在合約期間內，貴網站除了博客來外，不與博客來銷售業務競爭之網站合作，回饋金較高(書籍４％、雜誌２％、影音２％、美妝２％、親子２％、衣飾２％、創意生活２％、玩藝２％、美食２％)
2. 非獨家仲介金行銷引薦
   在合約期間內，貴網站除了博客來外，會與博客來銷售業務競爭之網站合作，回饋金較少(書籍２％、雜誌２％、影音１％)
3. 無仲介金行銷引薦
   博客來提供資訊授權供合作網站於合約期間內使用，包含商品圖片、商品基本資料；博客來不提供任何回饋金給貴網站。
   

Josh試著要申請，但每次填完資料，就只會出現“輸入的資料有問題，請重新再試！”，但就是不知道是那邊的資料出現問題，已寫信去詢問了。

興奇大聯盟計畫：
這一個算是比較不一樣，你可以自己選擇要在網站上刊登的廣告類型，當有人點擊在你網站上的廣告，連結網站到興奇科技的Monday興奇購物，一旦完成一筆交易後，依據「商品屬性類別」與「付款方式」之不同而有1%~3%的利潤。

酷比Admedia：

1. 繁體中文網站
2. 以「內容」為主的優質網站
3. 非羶色腥、暴力、種族歧視、違背善良風俗或涉及不法的網站
4. 單月網頁瀏覽頁次達 150 萬次以上

光是第四點就會讓很多人不符合申請條件，提供給各位做個參考。

以上四種是除了Google AdSense以外，在你經營網站的同時也能創造收入的方式。

誤點AdSense不用再回報了

相信有使用AdSense的人，對於這個消息一定很高興，過去Josh我也曾經發生過這樣的情形，有時後一不小心就會點到自己的AdSense，以往發生這樣的情形，Josh一定會將發生的時間記錄下來，並且去信Google AdSense小組通報，而且Google AdSense也一定會回信：「感謝您通知我們關於您廣告上的點擊資訊。 我們非常感謝您的誠實以及對避免造成此類點擊的努力。」但是心裡總會有些擔心，深怕會被停權。

而Googel AdSense也許是收到太多這一類形的信件，在Google AdSense Blog中Accidents happen一文就表明，此後誤點事件不必再回報，雖然相關的點擊還是會在報告中顯示，但是會總收入中扣除。

也許有人點擊自己的廣告是因為對於廣告的內容有興趣，但Josh強烈建議不要有這一類的行為，Google AdSense有提供一個AdSense預覽工具，如果真的對於自己網箁上的廣告有興趣，利用AdSense預覽工具就好，千以不要點擊。

至於AdSense預覽工具的安裝方式也很簡單：

1. 在AdSense 預覽工具的連結另存新檔。
2. 在所下載的檔案點擊二下。
3. 在接著跳出來的確認視窗選擇「是(Y)」。
4. 重新啟動IE。
5. 在想要觀看的AdSense點右鍵，選擇「Google AdSense Preview Tool」即可。

AGLOCO開放ViewBar下載

當Josh在淺談AGLOCO™曾提過，AGLOCO是透過在用戶端安裝一個Viewbar軟體，Viewbar是一個小小的工具列，當您上網的時候它就位於螢幕或流覽器視窗的底部。用戶上網時，Viewbar軟體就是AGLOCO為用戶賺錢的工具，當AGLOCO在招收會員時，Viewbar因為研發延遲的關係，並沒有同步開放下載。

然而稍早之前，AGLOCO表示將開放Viewbar下載，但是每天只有5000個名額，並且會以信件通知用戶，前幾天josh我終於收到通知下載的信件，但是卻無法連上AGLOCO的網站，F5連發也還是無法連上，之後在Typed ROBIN這才知道，原先官方規劃每天5000個人下載，是怕網站爆掉，但是卻惹惱了一堆會員，使的官方不得不開放全面下載，也就是說在我收到信件的同時，有大約80萬以上的人也同時收到了，這也就是為什麼我一直連不去的原因，但是在耐心和F5連發的攻勢之下，Josh終於把Viewbar給下載了。

Viewbar的安裝檔案只有2262KB，而且安裝過程還是中文的，而Viewbar可以選擇放置在畫面的下方或是頂端，昨天晚上(6/6)稍微試用一下，發現雖然Viewbar上還沒有廣告，但現在就已經開始在累積時間了，昨晚Josh已經累積了2.8個小時，如果你已經加入AGLOCO，你可以在“My account”中找到下載的按紐，如果你還沒加入，現在就加入AGLOCO吧！

FeedBurner繁體中文介面

前幾天在登入FeedBurner後，在畫面的右上角的Languages選項內，突然出現了繁體中文的選項，誰知過沒多久切換的選項卻消失了，但畫面中卻多了這幾行字：More choices are coming soon. Where did Chinese go? We heard your feedback and we're taking it back to the shop for more work. Thanks for having your say!根據我四處探聽的結果，似乎是因為FeedBurner在翻譯上面出現了一些問題，所以先將切換成中文的選項拿掉，等翻譯得更完美之後才會再出現。

可是Josh我才不會這麼快就放棄，所以我試出了一個方法，很容易就能切換成中文；首先，進入Languages的頁面，將English這個選項的網址Copy下來，如下：https://www.feedburner.com/fb/a/switchlang;jsessionid=2BC14900DC6F9102B6720DF2E6C1D74C.app2?locale=en_US，接著將網址中的“en_US”換成“zh_TW”，如此一來，整個介面就換成中文了，是不是很容易！是的話還不快去換成中文介面。

非常艷麗的Templates：FinalSense.com

偶然在老男人的令人驚豔，免費的Blog模版那裡看到他所介紹的這個網站Finalsense.com，發現這個網站所提供的Blogger Templates還真不是普通的漂亮，而且所有的Templates都可以直接套用，像我在Josh's Lifetags就直接套用了Sunset這一個Template，而Finalsense.com所提供的Template每一個都很賞心悅目，例如下圖的Coffee Cup：

當然漂亮的不只這一個，實在是太多了，我也就不一一列出，讓各位自行去挖寶吧。

Josh所用的FireFox附加元件

昨天在新買的Sata-2硬碟裝上作業系統，往後就要使用新硬碟做為系統磁碟，因為舊的IDE硬碟已經三歲了，而且這一陣子追了太多影集，硬碟容量嚴重不足，所以才去敗一顆大容量的硬碟回來，繼然作業系統重新安裝，當然FireFox也要重新安裝，有使用Firefox一定會順便裝上一些附加元件，在這裡記錄一下我所安裝的附加元件，可以當成改天重裝Firefox附加元件的依據也能提供給各位做個參考，至於Firefox我都是，這樣比較方便。

Firefox的附加元件大部份可以到Firefox Add-ons這找到，而我所用的附加元件大致如下：

1. 名稱：IE Tab
   功能：直接在Firefox嵌入IE核心，方便瀏覽一些IE Only的網站
   下載：按此下載


2. 名稱：Tab Mix Plus
   功能：強化 Firefox 分頁瀏覽的能力
   下載：按此下載


3. 名稱：Gmail Manager
   功能：方便管理多個Gmail帳號，並且能在打開Firefox自動檢查信件
   下載：按此下載


4. 名稱：Show Picture
   功能：在Firefox的右鍵加入顯示圖片的選項
   下載：按此下載
   


5. 名稱：ScribeFire Blog Editor
   功能：Blog離線編輯器
   下載：按此下載


6. 名稱：Firebug
   功能：一個功能非常強大的Plgin，網頁設計的最佳輔助工具
   下載：按此下載


7. 名稱：Download Statusbar
   功能：免去下載管理員時常跳出來的煩惱
   下載：按此下載


8. 名稱：Adsense Notifier
   功能：直接在狀態列顯示Google AdSense的收入
   下載：按此下載


9. 名稱：Web Developer（中文修改版）
   功能：另一個網頁設計的輔助工具
   下載：按此下載


10. 名稱：GUtil!
    功能：將各種Google服務集合起來的附加元件
    下載：按此下載
    

Firefox的好，Josh我不說相信大家都知道，當我用了Firefox之後，就直的不想再回頭去用IE了。

Blogger線上編輯文章自動儲存

雖然有很多離線的編輯器支援Blogger，但是我還是比較習慣用線上編輯，而使用線上編輯文章時，我的習慣是當文章編輯到一個段落時，會先儲存為草稿，以免手賤不小心將分頁關掉（我是用FireFox），這個習慣是在剛開始用Blogger一個多月後才有的，然而以後再也不用擔心這個問題了，根據Blogger Buzz的最新訊息Auto-savory Blogger Posting，往後當你使用線上編輯時，太約每2分鐘，Blogger就會自動將你的文章儲存為草稿，還滿不錯的。

只是上面那二個按鈕位置互換，一時之間還有點不太適應。

收到新版Google Analytics的轉換信件

自從知道Google Analytics更新使用介面後，就很期待能早點收到Google Analytics的帳戶更新通知，我在Google Analytics更新介面曾提過，Google Analytics在將所有現有的 Analytics (分析) 帳戶移轉到新的 Google Analytics (分析)介面後，會以電子郵件通知，今天5/18總到收到帳戶移轉的通知，信件內容大致如下：

很高興宣佈，我們已推出新版本的 Google Analytics (分析) 報告介面。由於您是現有的使用者，因此您將會自動升級，而不需要採取任何動作。若要使用這個新版本，請至這裡登入您的帳戶，然後按一下任一個設定檔旁邊的 [檢視報告] 連結。

為了協助您順利轉換，以下列出一些有用的資源和注意事項。此外，您可以按一下帳戶中任何設定檔之[檢視報告]連結下方的[先前介面]，繼續使用舊的報告介面至少一個月的時間。除了下列版本資訊中詳列的改善之外，不論您選擇哪一個介面，都不會影響您的資料和組態設定，且仍會以重新設計之前的方式繼續追蹤您的資料。

有哪些新功能？

在新的版本中，我們重新設計了您的報告，讓重要數據清晰易懂，並且易於使用。以下是一些您會發現的新功能：
- 以電子郵件傳送和匯出報告：排程或傳送特定 (ad-hoc) 模式的個人化報告電子郵件，並以 PDF 格式匯出報告。
- 自訂控制主頁：您不再需要費時瀏覽所有報告。將所需資訊放置在自訂的[控制主頁]上，以便以電子郵件寄給其他人。
- 趨勢和長期圖表：選取日期範圍並比較特定時段，同時注意長期的趨勢。
- 內容相關的說明提示：每一份報告中均提供內容相關的說明和轉換大學提示。

新介面比先前介面涵蓋更多的功能。此外，報告中的連結可讓您輕鬆瀏覽相關資訊及尋找資料。

下列資源可協助您透過使用新的 Google Analytics (分析) 介面獲得最大效益：

- 報告搜尋器工具：可協助您查看來自先前介面的資料位於新版本內的哪個位置(您也可以在報告左側的導覽工作表中找到此連結)：連結
- 產品導覽：連結
- 說明中心：包含與新版本相關的文章：連結
- 支援：如果您在使用新本版時遇到問題，但在 [說明中心] 找不到解答，您可以透過 [說明中心] 網頁底部的 [與我們聯絡] 連結聯絡我們的支援小組，或聯絡「Google Analytics (分析) 授權顧問」以取得進一步的支援。您可以在此處找到「Google Analytics (分析) 授權顧問」：連結l
- Analytics (分析) 說明論壇：如果您想要與其他人討論新版本或取得專家的提示，請造訪「Google 網上論壇」的「Analytics (分析) 說明論壇」(英文版)，網址是：
連結

在控制主頁的部分最大的不同，就在於新版的Google Analytics可以自設選擇要在控制主頁顯示的項目，而各個報告的擺放位置也可以自行決定，而在個別的報告頁面中，可以選擇將報告匯出為PDF、XML、CSV、TSV這四種格式的檔案；或是將報告以E-MAIL寄出，而且還可以透過排程將報告定時寄出；也可以將該報直接新增到控制主頁以方便觀看。
新版Google Analytics比起舊版Google Analytics，使用起來除了有更多的功能，相關資料的報告連結也能讓你更快速地找到相關的報告。

Google Analytics更新介面

就在昨天（5/8），Google Analytics Blog公佈了一則訊息：「接下來的幾個星期，我們會將所有現有的 Analytics (分析) 帳戶移轉到新的 Google Analytics (分析) 介面。我們會在移轉您的帳戶後，以電子郵件通知您。 您將有一整個月的時間可以選擇使用原來的介面或是新介面。在移轉期間，我們的服務將不會中斷，且不論您選擇的是哪一個介面，都可以查看所有的資料。」

而Google Analytics的新版本還會新增以下幾個新功能：

• Email and export reports: Schedule or send ad-hoc personalized report emails and export reports in PDF format.
  （以電子郵件傳送和匯出報告：排程或傳送特定模式的個人化報告電子郵件，並以 PDF 格式匯出報告）
  
• Custom Dashboard: No more digging through reports. Put all the information you need on a custom dashboard that you can email to others.
  （自訂控制主頁：您不再需要費時瀏覽所有報告。將所需資訊放置在自訂的「控制主頁」上，以便以電子郵件寄給其他人）
  
• Trend and Over-time Graph: Compare time periods and select date ranges without losing sight of long term trends.
  （趨勢和長期圖表：選取日期範圍並比較特定時段，同時注意長期的趨勢）
  
• Contextual help tips: Context sensitive Help and Conversion University tips are available from every report.
  （內容相關的說明提示：每一份報告中均提供內容相關的說明和轉換大學提示）

當我看完新版本的展示後，覺得新的版本真的很不錯，現在很期待能早點收到介面轉換的E-mail。

資料來源：
New Version of Google Analytics!

Blogger-ext2討論群組

阿土伯–Blogger-ext2的原作者，Blogger-Ext2是以jQuery為基礎的開發的簡單Blogger系統擴充程式，能讓使用者在接觸到最少的Template/Javascript程式，便能讓您的Blogger得到功能的擴充，也是Josh我的外掛安裝程式的原始來源，阿土伯現在在Google Groups開了一個Blogger-ext2的討論群組，如果當各位有任何有關Blogger-Ext2使用上的問題或者對於Blogger-Ext2的功能擴充有任何的意見，都可以到這個討論群組來尋求幫助和分享。

Blogger-ext2討論群組
繼續閱讀懶人加強版
輕鬆擴充Blogger 功能：Blogger_ext2.js (jQuery way)!

淺談AGLOCO™

目前在網路賺錢這一方面最熱門的不外乎是Google AdSense，但是網路賺錢這一個構想早在90年代就有人提出來的，當時讓我印象最深的就是AllAdvantage.com，AllAdvantage.com透過用戶端所安裝ViewBar，當用戶上網，ViewBar就會偵測到，依據用戶瀏覽的習性來播放廣告，讓用戶依據上網的時間來賺取以每小時為單位來計算的金錢，而事實証明，AllAdvantage.com在前12個月的經營所創造的利潤高過歷史上任何一家網路營業或廣告公司。但是當網路廣告市場和網路理財市場在2000－2001年間衰落時，AllAdvantage.com還是倒了，主要原因AllAdvantage.com所能賺到的利潤不能夠滿足會員的迅速增長，但AllAdvantage.com還是付出來近1億美元給用戶。

AGLOCO™在官網的解釋就是A Global Community that is owned by its member，一個所有成員共有的全球平台，是由AllAdvantage.com的創始人和幾位斯坦福的MBA所共同提出的想法，AGLOCO™的目標是從用戶在網路上活動所產生的價值中獲取很大一部分並用現金返還給用戶，如下圖：


而用戶除了注冊並下載安裝ViewBar程式之外，完全不用付出任何的金錢，目前在Google上搜尋 AGLOCO™時已經有照過300萬筆的資料，而在台灣的部落客也有滿多迴響，首推Typed ROBIN，在他的Blog對於AGLOCO™有滿多詳盡的介紹。

當我在AGLOCO™上稍微了解了一下運作情形後，覺得AGLOCO™或許可以為我們這種常常上網的人，提供一個賺外快的機會吧！Typed ROBIN這個專講網路賺錢的部落格現在在舉辦一個「我幫你拉AGLOCO™下線！」活動，你不必是他的下線也可以參加，或許這就是你加入AGLOCO™的契機。

Google Reader整合Gmail，更容易分享

這個新功能是Official Google Reader Blog在5/2所發佈，所以當我知道時好像已經Lag了三天，不過我還是上Google Reader去試用了一下，覺得這個功能還滿方便的，而且在收件人那一欄還會依照你所輸入的字在GMail的通訊錄上直接作搜尋的動作，讓你能快速選擇收件人，而且寄出去的信件格式就和你在Google Reader上所看到的一樣。

而且在信件的尾部還幫你加上原文的連結、訂閱的連結。

Google整合各種Web服務的腳步，真的愈來愈多了，聽說下一個目標就是要整合Google AdSense，真的讓人滿期待的。

資料來源：There are people who don't use feed readers?

Hackosphere: Neo for everyone!

今年一月份我才正式接觸到Blogger，當初在網路上到處尋找適合的Blogger Template時，在Hackosphere那看到他的Template時，就覺得很棒，Hackosphere的Template是利用AJAX進行頁面的讀取，而原作者Ramani還以US$10來販售這個Blogger Template。

而我剛才完成Template的更換就到處逛逛，當逛Hackosphere時，發現Ramani已經將這個Template釋出提供下載，有興趣試試這個速度非常之快的Template者，可以套套看。

Hackosphere: Neo for everyone!

Template更換完成

終於將自己設計的Template套上了，這個Template和前二次改版不同的地方，就是我將Header從最上方收到Sidebar的上方，因為Sidebar多了一個Header，空間會變得不夠，所以我將Footer分割為三個區塊，這三個區塊正好可以放置“最新文章“、“Label Cloud“、“最新意見”。

此外為了整個版面的整齊，便將AJAX Label拿掉，但又怕“最新文章“、“Label Cloud“、“最新意見”會有人找不到，於是參考了這一篇，在頁面左邊加入了Navigation Icon，這樣就能快速捲動到Footer的那三個區塊，搞到現在有點累了，過幾天再把檔案丟上來。

Google Map 有台灣的街道圖了

今天早上是王建民這個球季首次先發，起了個大早準時守在電視旁觀看，可惜輸球了，話說王去年四月也才拿下一勝，所以現在才一敗而已，也不用太在意，當我看完球賽後，興致一來就想看看Yankee Stadium，於是就上Google Map去瞧瞧，接著就將地圖轉到台灣，當Zoom in到一個程度後，發現Google Map上的台灣竟然出現了高速公路，如下圖：

雖然有一段時間沒上Google Map，也不知道是原本就有還是新增的，於是乎就繼續Zoom In下去，因為我住台中，所以就往台中地區Zoom In，就我對地圖的認識，梅花外框的是國道，盾形外框的是省道，現在Google Map連省道也有標示了，如下圖：

接著再 Zoom In就出現了台中市的棋盤式街道圖，除此之外，我想曾經從外縣市騎車或開車進入台中火車站週邊的人，一定會對台中火車站週邊的單行道很有印象，現在Google Map上連單行道的行進方向也有清楚的標示出來，如下圖：

為了了解Google Map的詳細度，所以又把地圖移往台中市西屯區，想不到竟然連巷弄也有，往常我在網路都是使用UrMap進行查詢，所以我特地來比較一下兩者的詳細程度，地圖選用台中逢甲大學週邊–西安街以南、逢甲路以北、福星以西及烈美街以東的區域進行比較，比較如下：

第一張是Google Map在地圖模式放到最大，第二張是UrMap地圖模式放到最大，兩張的大小都是560×600，經由比較可以發現Google Map的Zoom In程度比UrMap較大，接著換衛星地圖，如下：
第一張Google Map的衛星地圖和地圖模式一樣，而UrMap的衛星地圖最大只能到“10”，兩者相比，又是Google Map勝出，不過UrMap有一點倒是贏了Google Map，UrMap結合了104人力銀行、Kijiji 台灣、1111人力銀行工作機會和許多的地標，讓搜尋更加便利，而Google Map的搜尋方面還不是很完善，目前用中文只能搜尋到縣市名稱和比較有名的地標，不過能在Google Map上看到台灣也有街道圖也算是不錯了。

New Templates For Josh's Note

快一個星期沒發新的文，主要是因為正在自己設計一個新的Template，這次最主要的變動，就是把Header收到Sidebar的正上方，這樣做除了可以讓整個版面看起來更簡單，文章區和Sidebar的分別更是一目瞭然，而且Footer也去掉，改用三個區塊替代，Sidebar還是維持同樣的設計，整個版面看起來還滿有個人風格，現在正在進行Css的微調，目前完成的版面配置如下圖：

這是我第一個自行設計的Templates，自己覺得還算滿意，等完成後再提供下載分享。

自行架設Ftp伺服器備份Blogger文章

前幾天曾提過如何利用HiNet FTP空間備份Blogger的文章，然而對於不是使用HiNet的人來說，除非能找到一個Ftp空間來進行備份，否則只有自行架設一個Ftp伺服器才能來進行備份，至於架設Ftp的伺服器有很多，例如Windows的IIS、雷電FTPD、GuildFTPd、Serv-U等等，而我這一篇所實作的軟體則是Serv-U，個人覺得Serv-U設定很簡單而且好用。

目前Serv-U最新版本為6.4，因為在這我只是要做個備份，並不是真正要架一個Ftp伺服器，所以我在這僅提供4.2版+中文化給大家，請先下載Serv-U 4.2英文版及Serv-U 4.2 中文化檔案。

首先請先執行Serv-U 4.2英文版的安裝檔案，安裝過程在此不加詳述，當你安裝到最後時，如下圖：
因為還要進行中文化的動作，所以先將“Start Serv-U Administrator program”這一項取消選取，按下“Finish”並將右下常駐的Serv-U取消常駐，接著執行中文化的檔案，完成後於桌面執行Serv-U。

當Serv-U執行後，會跑出一個設定精靈，你可以依下面的列表設定或自行設定：

1. 顯示選單圖示：是
2. 啟動伺服器
3. 你的IP位址：動態IP請空白，固定IP可填可不填
4. 網域名稱：前面說過，架這個伺服器只是要備份，所以直接按下一步
5. 系統服務：不
6. 匿名帳號：不
7. 使用者帳號：是
8. 帳號名稱：請自行設定
9. 帳號密碼：請自行設定
10. 起始目錄：選擇一個目錄做為登入FTP直接開啟的目錄
11. 鎖定起始目錄：避免麻煩，選“是”
12. 管理權限：選擇系統管理者以取得伺服器的最大權限
13. 完成

以上步驟完成後，你可以登入剛才所架設的Ftp伺服器看看，在網址列輸入“ftp://你的IP/”，輸入帳號、密碼就能登入了。（如果你有使用防火牆，請記得將port 21打開）

接下來的步驟和如何利用HiNet FTP空間備份Blogger的文章差不多，在這再一次簡述一下。

Ⅰ、在「控制主頁–範本–修改HTML」頁面中，備份範本，並在頁面下方將範本回復成傳統範本：

Ⅱ、在「控制主頁–設定–發佈」的頁面中選擇Ftp發佈：

Ⅲ、進行連線的設定，其中“FTP伺服器”請填入你的IP位址，下方的帳號、密碼則填入之前安裝Ftp伺服器時所設定的帳號、密碼：


Ⅳ、儲存設定後，點選“立即重新發佈”，完成後你會發現所有的文章，已經備份到你的硬碟上。

完成備份，照例要回復成備份前的格式：

1. 在「控制主頁–設定–發佈」中將發佈模式換回blogspot.com
2. 在「控制主頁–範本–自定設計」進行升級
3. 在「控制主頁–範本–修改Html」將之前所備份的範本上傳

關於Ftp備份Blogger，大致就是這樣，也許其他的 BSP為了搶Blogger的使用者，會提出更方便的備份方法，但是對於Blogger的忠實用戶，學會Ftp備份真的很重要。

如何利用HiNet FTP空間備份Blogger的文章

要備份Blogger的文章，其實不用一篇一篇剪下貼上，Blogger本身有提供FTP發佈的方法，所以可以用FTP來進行備份，前提是必須有Ftp的空間或是Ftp伺服器；如果你的ADSL是使用HiNet，HiNet本身就有提供一個Ftp的空間給用戶，如果沒有Ftp空間，也可以自行架設一個Ftp伺服器，架設Ftp伺服器首推「Serv U」，架設的方法改天再寫一篇專文，現在先介紹如何利用HiNet的Ftp空間來備份Blogger的文章，因為根據Google Analytics的分析，有將近五成訪客是使用HiNet。


想要利用Ftp進行備份，首先必須將Blog的訪問權限設定為“任何人”，你可以在「控制主頁–設定–權限」進行變更。


接著還需要將範本恢復成傳統範本，也就是恢復成舊的Blogger格式，所以在進行這一步時，最好將範本備份，而恢復成傳統範本的選項可以在「控制主頁–範本–修改HTML」頁面中最下方找到。


當完成上述的設定時，就可以在「控制主頁–設定–發佈」的頁面中，看到Ftp發佈的選項，連線方式有二種：Ftp和sFtp，目前HiNet似乎無法使用sFtp進行連線，建議選擇Ftp即可。


接下來要進行連線的設定，如下圖：

1. 這裡是以HiNet做示範，所以在“FTP伺服器”請填入“upload.myweb.hinet.net“
2. Blog URL填入欲進行備份的Blog網址（包含“Http://”）
3. Ftp路徑則填入Ftp伺服器要放置備份檔案的資料夾名稱，也可不填
4. 在頁面下方輸入會員帳號和密碼
   
5. 儲存設定後會在頁面上出現“立即重新發佈”，點擊它進行備份
   

完成備份後，接著就是要Blog恢復成之前的格式，首先就是在「控制主頁–設定–發佈」中將發佈模式換回blogspot.com，接著到「控制主頁–範本–自定設計」進行升級，升級完後再將之前所備份的範本上傳，完成上述動作，你的Blog就會恢復成原本的模式，而且所有的文章也完成了備份。

至於沒有HiNet Ftp空間的朋友，請耐心等候，過幾天再來介紹如何自行架設一個FTP伺服器來進行備份。

「繼續閱讀懶人加強版」無腦安裝完成（UpData 4/8）

在徵求原作者同意後，我便開始製作「繼續閱讀懶人加強版」的自動安裝頁面，利用清明節的假期，外面又冷的不想出門，待在家裡把這個安裝頁面完成，這個「繼續閱讀懶人加強版」能夠自動套用而不必再加入任何特殊標記就能夠有“繼續閱讀”的功能，主要的功能如下：

繼續閱讀方面：

1. 可選擇延展/收合(Expand/collapse)或直接連結兩種方式
2. 可自訂繼續閱讀顯示文字
3. 自動判定文章內容階層，不會有切不完整的情況發生
4. 可設定各頁面（首頁、標籤(tag)分類頁、blog存檔頁)
5. 不同的檢視方式，有三種：全文、摘要、標題
   

檢視方式快速切換：

1. 自動產生「全文|摘要|標題」的連結，可直接點選並快速切換檢視方式
2. 連結名稱可自訂
3. 擺放位置可自訂（需改範本HTML）

但是這「繼續閱讀懶人加強版」無法和和阿土伯的繼續閱讀功能並存，所以我下一個動作就是要將這兩者整合，如果你等不及了，就先用吧!

UpDATA 4/8：
已將「繼續閱讀懶人加強版」整合入「超級無腦安裝Blogger外掛功能」裡面，阿土伯版和懶人版只能二選一進行安裝，而原本單獨安裝懶人版的方式也保留。

UpDATA 4/14：
增加「只有繼續閱讀」的安裝方式。

---

下方的圖示將會帶你到快速安裝頁面，
在該頁面上選擇「繼續閱讀懶人加強版」的標籤

---

文章參考：
[BLOGGER]繼續閱讀懶人加強版(for Blogger New) 最新版本 v1.4.2(2007.3.15)
[BLOGGER]繼續閱讀懶人加強版 - 完整安裝 教學
[BLOGGER]繼續閱讀懶人加強版 - 只安裝繼續閱讀 教學
[BLOGGER]繼續閱讀懶人加強版 - 參數設定說明

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

因應阿土伯的blogger_ext2版本更新至0.6.2版，利用了點時間將安裝程式做了更新，因為改的很匆忙，沒有Debug很徹底，如果各位在用安裝使用後有發生錯誤，請留言給我，待週末有空時一併來處理，這個版本新增了社群書籤的功能，而在安裝頁面中，我有把各個社群書籤分開，讓使用者可以自行選擇想要加入那一個社群的書籤按鈕，這一次我利用阿土伯的blogger_ext2 0.6.2版加入安裝程式的新功能如下：

• NavBar原先只能完全隱藏，blogger_ext2 0.6.2版新增浮動隱藏和完全隱藏的選項
• 新增社群書籤功能，預設放置位置在post-icons這個<span>區塊的後面，以<span>區塊包起來，預設class為post-bookmarks。
• 共有七個社群書籤可供自行選擇，HEMiDEMi預設為選取。

如果你曾經安裝blogger_ext2之前的版本，請先將舊的widget刪除，再安裝最新的版本。

UpDATA 4/8：
已將「繼續閱讀懶人加強版」整合入「超級無腦安裝Blogger外掛功能」裡面，阿土伯版和懶人版只能二選一進行安裝，而原本單獨安裝懶人版的方式也保留。

---

下方的圖示將會帶你到新的blogger_ext2快速安裝頁面

---

文章參考：
輕鬆擴充 Blogger 功能: Blogger_ext2.js (jQuery way)!
部落格會笑了！Blogger Smiley！
blogger_ext2.js 加速篇–全面換用Google Code
blogger_ext2.js 0.6 版本發表
自由選擇你想安裝blogger_ext2的功能
blogger_ext2.js 0.6.1 版本發表
更勁爆的「超級無腦安裝Blogger外掛功能」
blogger_ext2.js 0.6.2 版發表

Blogger新增二個內建Widget

Blogger Buzz是Blogger發佈最新訊息的平台，所以我如果有想到的話，都會去Blogger Buzz看看，今天上去看了一下，果然，Blogger又有新功能，那就是新增了二個內建的網頁元素–Newsreel和Video Bar，這兩個新的網頁元素的共同點就是利用Google AJAX Search API技術來進行搜尋。


Newsreel的來源是Google News，再利用你所設定的Keyword來進行搜尋，Keyword可以設定多組，而且會以Keyword來做出分頁的效果，而且還會依照你所擺放的欄位而呈現不同的樣式。如下：



而Video Bar的來源則是Google Video 和 YouTube，也是依照你所設定的Keyword進行搜尋。


有興趣的可以裝看看。

Google AdSense Inside The PostⅡ

稍早之前我在Google AdSense Inside The Post中已提過如何將Google AdSense放入文章之中，但是AdSense和文章之間總是會有一片空白的地方，如果想要讓Google AdSense和文章緊密的結合在一起，能夠辦得到嗎？答案是肯定的。

之前我是將Google AdSense的程式碼放在“post-header-line-1”這個DIV區塊中，這個Div區塊的下方，你會發現另一個Div區塊–<div class='post-body'>，再往下可以看到“<p><data:post.body/></p>”這一行，根據Blogger Help–版面配置資料標記的說明，可以知道post.body所顯示的是文章的內容，於是我便開始試驗將Google AdSense移到<div class='post-body'>這個區塊裡面的結果。

首先我把Google AdSense的程式碼放在“<p><data:post.body/></p>”這一行的前方，但是所得到的結果和之前的方法一樣，如下圖：


接下來我將Google AdSense的程式碼移到“<p>”和“<data:post.body/></p>”之間，但是AdSense和文章雖有結合，但卻不是我想要的結果，如下圖：


於是我在範本新增一個CSS的class，內容如下：
.ad {
float:left;
}
這個樣式主要是要讓「標籤元素向左靠，文字圍繞在右邊」，再將Google AdSense以一個Div包起來，並將這個Div的class指定為新增的這個樣式，如下：
<div class='ad'>
（Google AdSense 程式碼）
</div>
這樣所呈現出來的就是我想要的結果，如下圖：


如你所見，Google AdSense和文章完美的結合在一起了。

• 這裡只有簡單寫出Google AdSense程式碼所放置的位置，一些需要修改的地方不再重述，請參考Google AdSense Inside The Post。
  
• 這個方法比較適用於正方形的的Content，儘量不要用橫幅的Content。

Google AdSense Inside The Post

據我所知，Blogger在文章內是不能加入JaveScript的，正因如此，也就不能直接將Googld AdSense的程式碼放在文章內，因此只能透過修改範本方法來達成，所以首先就找出想放置AdSense的Div區塊代碼，我利用FireFox附加元件–Web Developer找到文章內容上方有一個“post-header-line-1”的Div區塊可以利用，這個Div正好位於文章內容的正上方，如下圖：



但是Google AdSense的計劃政策有規定，同一個網頁最多只能顯示三個廣告組和一個連結組，要避免違反這個規定，就必須設為首頁不顯示，而根據Blogger Help–版面配置的小裝置標記的說明，用<b:if cond='condition'> 可以做到，至於詳細做法如下：

1. 先在範本中找到<div class='post-header-line-1'/>


2. 到Google AdSense產生你所想加入的AdSnese程式碼，通常產生的程式碼如下：
   <script type='text/javascript'><!--
Google AdSense Code
//-->
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
   紅字部份依設定而有所不同，另外還需將藍色部份稍做修改，將<以＆ｌｔ；（因半形會被另外解讀，故以全形取代）取代，將>以＆ｇｔ；（因半形會被另外解讀，故以全形取代）取代，代碼轉換可以到這裡所介紹的網站進行


3. 因為不想在顯示放在文章內的AdSense，所以必須將AdSense的程式碼以<b:if cond='data:blog.pageType == "item"'>和</b:if>包起


4. 完整的Code大至如下所示：
   <div class='post-header-line-1'/>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'><!--
Google AdSense Code
//-->
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
</b:if>
   藍色部份記得要依照步驟2進行修改
   
5. 完成後所呈現的結果如下圖：

Gmail繁中也可以收外部信件了

利用Gmail收外部信件，原本必須將使用語言轉換為英文才能使用，我之前就已經把我所有外部信件全部都設定好了，不過每次要收外部信件時，都要把使用語言換來換去，所以我常常一個多星期才收一次信，但是不知道什麼時候，繁中的Gmail也能收外部信件，我也是今天進到帳戶才發現的，設定方法很簡單，下面我來做個小小的說明。

1. 首先登入Gmail，進入畫面右上角的“設定”，選擇“帳戶”這個分頁標籤：
   
   
   
2. 在畫面下方可以發現多了一個“從其他帳戶取得郵件”，之前只有使用語言切換為英文時才會出現，現在繁體中文也可以了，選擇“新增其他郵件帳戶”來設定外部信箱：
   
   
   
3. 接著輸入外部信箱的位址，再按下一步：
   
   
   
4. 接下來填入剛才所輸入帳戶的密碼，而在下方有四個選項可供選擇；第一個可以將信件保留在原郵件Server上，第二個則是讓Gmail連線到郵件Server時以SSL進行進線，第三個是當信件收到Gmail時可以為該信件加入一個標籤以供辨別，第四個則是當信件收取到Gmail時不會在收件匣顯示，而直接封存：
   
   
   

如果要再加入新的郵件帳戶，只需再重覆以上四個步驟即可，Gmail最多可以設定5個外部信件帳戶，我現在所有的信件已經全部用Gmail收取了。

至於為什麼要全部用Gmail收呢？因為我外部的信箱有三個是用HiNet的，而HiNet的垃圾郵件之多是有目共睹的，而其他的信箱想免除垃圾郵件的困擾還要自己手動設定，試問各位每天有那個閒功夫將每一封的垃圾郵件加入黑名單嗎？至少Gmail在垃圾郵件的郵件的篩選這一方面真的不錯，我現在除了IE之外，可以也可以將Outlook封存了。

利用JavaScript加密文章內容

曾經使用過有名大站的人，或許會很喜歡它的文章密碼鎖定這個功能（至少我一些朋友不肯離開有名大站就是因為Blogger沒有這個功能），我曾經在Blogger Hacks的Wiki上看到一個「Encrypted blog posts」，這是一個利用JavaScript將文章內容以Advanced Encryption Standard (AES) 256 bit加密，就以我那低空飛過的密碼學的認識來說，安全性是足夠的，加密過後的文章會以不規則的英文顯示，當你想要看原始的文章內容，則需要輸入一串加密時所使用的Key（自行設定的字串），所以當你忘記key的內容，就無法看到原始的文章內容。

當初之所以沒有用這個Hack，是因為我覺得既然要在Blog上PO文又何必怕被人看呢？但是在跟朋友強力推薦Blogger時，卻又常常被以文章沒有保密的功能而加以回絕，昨天因RaRaYA的留言又讓我想起了這個Hack，於是決定將這個Hack的用法寫出來，順便看能不能打動我的朋友也加入Blogger的行列。

我在這裡有做了一篇Demo，建議各位先去看看，如果覺得這個效果不錯，再往下看這的Hack的做法。

1. 前面提過這Hack是利用JavaScript以AES 256 bit將文章加密，所以第一步就是要將加密/解密用的Javascript加入範本中，所以請將下列的程式碼加入範本的</head>之前：
<script src='http://vincentcheung.googlepages.com/blogjscrypt.js' language='JavaScript'></script>

2. 到這個網頁將文章加密；“key”的欄位可自行輸入，也可以按自動產生，但是key的內容請一定要留著，因為文章的解密一定要用，如果忘記key的內容，我想大概也沒有人能解出原來的文章內容。


3. “Plain Text”這個欄位輸入想要加密的文章內容，按下會在下方的“Cipher Text”產生加密過後的字串。


4. 而要在Blog內顯示的做法，就像我在Demo頁面有二種，一種是顯示加密過後的內容，一種是隱藏加密過後的內容，方法如下：
   方法一（Demo1）：
   <a href="javascript:Decrypt_text('unique_name');">Decrypt text（文章解密）</a>
<div id="unique_name">這裡輸入步驟3所產生的字串</div>
   
   方法二（Demo2）：
   <a href="javascript:Decrypt_text('unique_name', '這裡輸入步驟3所產生的字串');">Show encrypted text（顯示加密過後的字串）</a>
<div id="unique_name"></div>
   而當你要解密時，按下上面所產生的連結時，會出現一個字串輸入視窗，將步驟2的key輸入就會將字串解密為原來的文章，所以當你只想讓特定的人士觀看你的文章時，只需要將步驟2的“key”給那個人即可，而不知道“key”的人所看到的不過就是一堆不相關英文字串，這樣就能有文章保密的效果了。
   

• 在步驟4中“unique_name”代表的是Div的ID，請儘量取一個不會和別的Div重覆的名字。紅字部份一定要填入“Cipher Text”的內容，這是文章解密的依據。
• “key”的內容一定要備份。

Hacks In Lifetags：Label/Archive Page's View

離上次修改Josh's Lifetags已經快半個月了，剛好晚上睡不著，就來繼續之前的工作；我在Hacks In Lifetags：Read More有提到過我是用直接展開的方式，其中還有另一個考量，在文中第一個步驟有加載一個JavaScript，而這個JavaScript也可以用在這個Hack上面，這是我在文中所沒有提到的。

Peek-A-Boo的修改方法如下：（參考文章：Peek-A-Boo view of posts in label/archive pages）
1、加載JavaScript（如果已經有的話請略過）
<script type='text/javascript'
src='http://www.anniyalogam.com/widgets/hackosphere.js' />
2、這個步驟有點複雜，所以我將全部的程式碼貼上：
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td><td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td></tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>
將紅色部份加入範本內即可。

然而，如果你只想在Label/Archive的頁面只Show出文章的Title而不想Show出文章內容，作法則是更簡單。
1、首先找到下面的程式片段：（參考文章：New hack to improve your label/archive pages）
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>
2、將上列的紅色部份以下列程式碼取代：
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

以上兩種方法，提供給各位做參考。

AdSense繁體中文支援論壇

對於Google AdSense也許很多人還有很多疑問，除了在各個專門探討Google AdSense的網站或Blog尋找解答之外，現在又多了一個新的管道；在Google 網上論壇中Google AdSense開了一個繁體中文的支援論壇，也許可能才開始不久吧，群組人數只有60個，但這對於AdSense的繁體中文使用者來說卻是個好消息，相對於AdSense的簡體中文論壇人數已經有四千多人，繁體中文的支援論壇只能算是一個剛出生的小Baby。

Google AdSense支援論壇（繁體中文）
Google AdSense支援論壇（簡体中文）

在Blogger加入表格會出現空白列

偶然之間所遇到的一個問題，當你在Blogger的文章中加入表格時，如果照正常的html語法的寫作方式的話，會發現在表格之前無端的出現一大片的空白列，以我的測試用Blog為例：正常語法，該表格的html語法如下：

<table width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

解決方法其實非常簡單，只要將表格的每一個標籤之間的空格全部刪除，如下：
<table width="200" border="1"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td>
</tr><tr><td> </td><td> </td><td> </td></tr></table>
就可以將多出來的空白列去掉了，修改後的結果。

Blogger和Picasa已整合

雖然Blogger Buzz在3月8日就己經發佈這個消息，不過我一直沒時間去看看他所謂的整合是怎麼一回事，今天利用了一點時間看了一下，卻發現沒什麼改變，想了一下，決定把「語言偏好設定」改為“English(United States)”，再進去相簿看看。

沒想到“語言”這麼一改可不得了，想不到Blogger和Picasa的整合竟是這麼徹底，因為我之前在Blogger上傳的圖片，現在在Picasa全部找得到，這下子可不得了，有些圖片因為修改的關係，曾經上傳了3、4次，而在Picasa也有3、4張相同的圖片，不過還好Picasa的空間已經提高到1GB，所以不是得大的問題，只不過這下子又有新的事要處理了，要另外再找時間把重覆的圖片修掉。

有雜誌風格的Blog文章ⅡFor Internet Explorer

由於我之前在有雜誌風格的Blog文章的方法在IE下顯示有問題，想要在IE顯示出這個效果，我想只有使用<span>再指定class。為什麼要用<span>呢？因為<SPAN>...</SPAN>所包圍起來的物件不會換行，這樣才會有我想要的效果出現。

方法如下：
1、加入以下css於]]></b:skin>之前：
.cap {
float:left;
color:white;
background:#00CCFF;
border:1px solid;
font-size:60px;
line-height:60px;
}
在這我只是在cap前多加了一個“.”

2、編輯文章時第一個字要用<span class="cap">和</span>包起來。

其實這兩個方法差不多，只不過要打的字多了一些，我個人比較懶了一些，只好委屈一下用IE的朋友了，畢竟IE已經被我遺忘很久了。

Hacks In Lifetags：Read More

話說我前幾天又開了一個Blog，之前曾思考過Josh's Note所要走的方向，是要走綜合路線呢？還是單純的就以Blogger的設計、修改等等的資源為主，幾經熟慮後，我決定以後者為未來Josh's Note的方向，所以又開了一個Josh's Lifetags，就是為了將二者的性質做區別。

而Josh's Lifetags所使用的樣版正以我在The Blogger WorkShop所找到的樣版，主要是因為這個樣版沒有加入任何的Hacks，所以我可以邊動手加入邊在這邊做記錄，除了自己能做筆記之外，還能提供給剛接觸Blogger的朋友做個參考。

今天我先對“Read More”來做修改。

通常“Read More”可以分為二種，一種是將隱藏的文章段落直接展開，另一種連到該文章的頁面，為了比較這二種對於頁面載入的時間，所我決定將這二種一個一個加入，再決定要使用那一種。而載入時間的計算就使用FireBug這個Firefox的附加元件。

首先是直接展開的方法；參考文章：Blogger hack: Expandable posts with Peekaboo view

1、將下列程式加入</head>之前：
<script type='text/javascript' src=
'http://www.anniyalogam.com/widgets/hackosphere.js' />
2、尋找下列的程式：
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>
將紅色部份取代為
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
3、尋找<div class='post-body'>，在下方加入：
<b:if cond='data:blog.pageType == "item"'>
4、尋找<p><data:post.body/></p>在下方加入下列程式：
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
5、將文章段落想隱藏的部份用<span id="fullpost">和</span>包起來。

再來換連結的方法；參考文章：Blogger Beta 繼續閱讀功能改良

1、將下列程式加入</head>之前：
<script type="text/Javascript">
function hidePost(postUrl)
{
var label=document.getElementById("fullpost");
if(label!=null){
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","Read More");
eA.appendChild(document.createTextNode("...Read More"));
eB = document.createElement("p");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
label.parentNode.appendChild(eB);
label.parentNode.removeChild(label);}
}
</script>
2、尋找<p><data:post.body/></p>，在下方加入：
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.url/>');</script>
</b:if>
</b:if>
3、將文章段落想隱藏的部份用<div id="fullpost">和</div>包起來。

接著來比較二者的差別：
直接展開：
連結：由上面二個圖可以發現二者載入所花的的時間其實差不多（載入時都有將暫存清除），由此可知，隱藏起來的段落還是有下載到Cache之中，但是就以文章的瀏覽的方便性來說，以直接展開的方式較為方便，因此我決定直接展開的方法來做為Josh's Lifetags的“Read More”功能。

另外Read More還有以外掛的方式，可以參考更勁爆的「超級無腦安裝Blogger外掛功能」，以及一個同樣是以外掛的方式，但是不需在文章編輯時加入特殊標籤，而是以文章的行數來自動隱藏，請參考[BLOGGER]繼續閱讀懶人加強版(for Blogger New) 最新版本 v1.4.1。

來取一個有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來找一個吧！

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

讓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 應用（２）：最新迴響的標題

有雜誌風格的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>包起來，這樣看起來就滿有雜誌文章的味道。

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」就能把圖示存在你的硬碟中。