最近稍微抽出了一點點的空閒時間，幫自己的 blog 新增了很久以前就想要裝的「延伸閱讀」功能。雖然現在才弄這個功能，感覺已經慢了人家好幾步了，但是總算是讓自己的 blog 又多了一點功能。
2016/5/16
2015/12/20
[Blog] Open Live Writer 接手 WLW
2009/10/20
[HowTo] 幫blog加入SyntaxHighlighter，貼code更簡單
有時候會寫一些跟程式或網頁相關的東西，之前都是醜醜的直接將程式碼貼上，幾乎沒什麼做排版的動作。前兩天看了一下人家的blog文章，看到人家分享整整齊齊的程式碼，當下決定馬上也幫我的blog裝好套件。
2009/10/15
[Blogspot] 新增"隨機文章"區塊
這兩天在網路上看到一篇裝上隨機文章(Random Posts)，加強部落格的黏著度，裡面是在講關於如何新增blogspot隨機文章區塊，因為自己的blog沒有這個功能，所以就順手加上去了。
2009/9/13
Blogspot給使用者的十週年禮物 - Read More
Blogspot在今年滿十歲了，而他們在十週年給使用者的小禮物就是"繼續閱讀"的功能。以前的Blogspot，要嘛就是一次把你所寫的內容全部呈現出來，要嘛就是要用非官方修改CSS的方式來加入"Read More"的功能。
2009/9/3
[Blogspot] Support the function ‘Cloud of Label’
這兩天從網路上看到有人提到，Blogspot終於也支援"雲標籤(Cloud of Label)"的功能，身為Blogspot的愛用者，馬上就來啟動這個功能。
2007/5/9
[Blog] 新增區塊 - My Map
因應前一陣子Google Map新推出台灣街道圖，而且又有簡單易上手的My Map功能，馬上就讓我想要將我自己去玩過的地方跟玩過的路線，做成導覽圖分享給大家，方便大家以後想要去玩的時候可以參考用，所以就想到在Blog上弄一個My Map的區塊。
目前是先放一些我比較有印象的地方，例如逢甲、鹿港的小吃，以後則會開始放一些我出去玩的路線圖，目前就有放上我這四年來去看油桐花跟賞螢火蟲的路線。不過因為手邊沒有GPS軌跡紀錄器，所以弄路線圖目前對我來說比較麻煩，必須要自己畫。而且在某些可能地圖上會沒有標明的景點，也會因為沒有精確的GPS座標，所以沒有辦法準確的定位出景點，這是目前分享上的困難。目前還沒有購入GPS軌跡紀錄器的打算，畢竟對我來說這樣的東西算是奢侈品，用到的機會並不多，所以還要再觀望，除非價格能再下降才有購入的可能。
Update(2007/5/10)：
沒想到My Map的功能同時只能顯示100個景點，這樣要做台灣旅遊景點地圖就有點麻煩了，畢竟沒辦法一次show出全部的點就沒辦法呈現出週邊相關景點，目前看起來只能依縣市做或依每次的路線做了。另外一次只能show 100個點也會造成GPS軌跡紀錄導入會有點問題，不過目前最大的問題是GPS軌跡紀錄沒有辦法直接儲存到My Map裡面呀。
2007/4/4
[HowTo] 加密你的blog文章 in blogspot
寫blog的人可能都有想過這樣的問題，因為blog是一個公開的服務，所以當寫了一些比較隱私或是帶有不能公開資訊的文章時，就會希望這些文章不要被太多人看到，可是對於使用blogspot當作自己的blog的人來說，可能就無法達到這樣的需求。
可是現在有人想出了另外一個變通的方式，就是利用加解密的方式，利用256bit AES的加密規範，使用者透過一個特殊自定的關鍵字當作加密的key，來達到加密自己所寫的特殊文章，讓這些加密過後的文章，只有特定知道解密key的人才能夠解開，並看到正確的文章內文。
這個功能使用後，加密後的文章會是一堆英數字符號組成的亂碼字串，就像是"LhLf9WB4X/XM2="這樣的亂(以上是我亂打的，如果能解出字來也很神奇)，如果有人可以直接看出這種字串解譯後的原文，請通知我，我一定把你送出國表演 :p。
因為剛好目前工作的內容剛好有接觸過這樣的東西，也不是沒想過把加解密這樣的東西用到blog上，不過因為自己能力不足，所以一直沒動手去做，現在既然有人已經幫我們做好了，我們就直接拿來用吧。修改的步驟比之前所提過的blogspot修改都要來複雜的許多，原文作者已經寫的很清楚了，如果有人對這個功能有興趣的話，就直接到原網頁去看一下怎麼修改吧。如果有了這樣的功能，以後就可以寫一些只能讓某些人才能看到的文章了，雖然現在的電腦效能都很好，但是我想我寫的文章就算加密起來，應該也不會有人會用暴力法來破我加密後的文章吧，如果有的話就太看的起我了。
相關資訊：
Kaie's Blog:[Javascript] Encrypt your private blog post
2007/3/28
Windows Live Writer plugins
之前就已經寫過一篇利用Windows Live Writer寫blog的文章，而Windows Live Writer好用的地方就是在於微軟這次有別於以往，將WLW的API給開放出來，讓大家可以根據自己的需求，設計自己需要的WLW plugins來用。
因為WLW推出已經有一段時間，網路上就越來越多WLW的plugins，當然也就有好心人架了一個將所有WLW plugins做整理的網站，以方便有需要卻不會寫程式的人可以直接使用這些plugins。不過說實話，這些plugins我用到的並不多，而且大多都大同小異，蠻多plugins是圍繞在flickr的應用，不過因為我沒有flickr，所以也就用不上。主要真的有裝的就只是「Insert Simple Table」這個而已。大家也不用每一個plugin都下載回來裝，plugins裝的多沒有用，好用常用的plugins裝幾個就ok了。
安裝WLW plugins主要有兩種方式：
- 執行檔安裝：開發的人會將程式包裝成一個執行檔，只要點兩下就可以安裝成功。
- dll安裝：有時候可能會下載到一個壓縮檔，解開之後就只有一個dll檔，這個時候就是將dll放到Program Files\Windows Live Writer\Plugins下，再重新啟動WLM就可以了。
相關連結：
電腦玩物：如何用Windows Live Writer寫blog
我都用這個寫網誌：Windows Live Writer
2007/3/27
How to : 首字大寫的排版風格 in blogspot
最近應該連上我blog的人都有發現到，我的每一篇文章的第一個字都變的比較大，其實很久以前就有看到這樣的風格，不過一直不知道要怎麼改。前幾天看到Josh's Notes裡面剛好有篇教學文章，於是馬上就套用進來使用。
基本上修改作法並不難，基本上就是修改Template就可以了。首先就是將下列的CSS加到</b:skin>前。.cap {
float:left;
color:white;
background:#00CCFF;
border:1px solid;
font-size:60px;
line-height:60px;
}
接下來在寫文章的時候用<span class="cap">和</span>把第一個字包起來就可以了。<span class="cap">第一個字</span>
2007/1/9
How To : "read more" for blogger
如果有在用blogger在寫blog的人，一定都會發現blogger並不像一些BSP或是blog程式一樣，有支援"read more"，也就是"繼續閱讀"的功能，但是其實有一些方式可以幫blogger加入這樣的功能。
因為新版blogger提供了一些可以直接去改網頁程式的template方式，而我們也可以利用這樣的途徑來修改，不過記得再修改前都先講你原先的template儲存一份，以防之後修改有問題的時候，可以復原整個blog template。首先我們先打開管理介面"Edit HTML"的頁面，然後在下面我們就可以看到現在你blog所使用的template程式。然後將上面的"Expand Widget Templates"的選項打勾，因為這樣我們才可以看到全部的template程式碼。之後我們就在template之中找出</b:skin>這個tag，在它之後加入下面這些程式碼：
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
span.fullpost {display:inline;}
</style>
<b:else/>
<style type='text/css'>
span.fullpost {display:none;}
</style>
</b:if>
然後再搜尋<data:post.body/>這個tag，改成以下的程式碼：
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <data:post.body/> <br/><a expr:href='data:post.url'> read more... </a>
</b:if>
這樣大致上就完工了，再把修改後的template儲存起來就可以了。之後在寫文章的時候，再把要隱藏文字的部份用<span class="fullpost"></span>給包起來就可以了，如下面的程式碼所示：
<span class="fullpost">這裡是要被隱藏的內容</span>
這樣做也不是沒有缺點，缺點就是每次在寫文章都要自己切換成編輯HTML的模式去加入fullpost的tag，而且之前的舊文章就要手動一篇一篇改才行。另外就是如果你文章沒有很長，並不想要用fullpost的tag來包，可是在首頁的文章下方，還是會出現"read more . . . "這樣的連結，會讓人家以為還有更多的內容。不過這樣的修改作法已經算是相當簡單易懂，對於一般的使用者是蠻容易修改的方式。每一個作法都有其優缺點，就看你比較能夠接受怎樣的作法囉，青菜蘿蔔都有人愛嘛。在此感謝METAMUSE的教學。
相關連結：
[METAMUSE] - Blogger Beta 中 Read More 與 Archive 只顯示標題 作法
2006/12/29
解決AdSense for search輸入中文亂碼
在Google AdSense中，有一樣是AdSense for search。一開始只是將JavaScript加入我的右側欄位裡面，結果昨天測試發現居然輸入中文會變亂碼，導致無法正常做search的動作。
今天簡單查了一下，因為我的網站是繁體中文，所以我將AdSense for search編碼設定為Big5。本來這樣應該是沒有問題的，後來我去檢視我的blog頁面原始檔，我才發現原來blogspot已經將頁面編碼設定成UTF-8了，所以就會導致我搜尋框的編碼設定與網頁不符合，造成亂碼的問題。
修改其實很簡單，只要重新設定一下AdSense for search就可以了。如上圖藍色框的網站編碼設定，直接改成UTF-8之後，再重新貼上新的JavaScript就可以了。不然也可以直接修改原本的JavaScript，將Big5改為UTF-8就可以了，如下所示。
原本是<input type="hidden" value="pub-1579914887200223" name="client"></input>
<input type="hidden" value="1" name="forid"></input>
<input type="hidden" value="big5" name="ie"></input>
<input type="hidden" value="big5" name="oe"></input>
<input type="hidden" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof"></input>
<input type="hidden" value="zh-TW" name="hl"></input>
修改成
<input type="hidden" value="pub-1579914887200223" name="client"></input>
<input type="hidden" value="1" name="forid"></input>
<input type="hidden" value="UTF-8" name="ie"></input>
<input type="hidden" value="UTF-8" name="oe"></input>
<input type="hidden" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1" name="cof"></input>
<input type="hidden" value="zh-TW" name="hl"></input>
2006/12/25
How to : Block Snap Preview Anywhere™ by your browser
好吧，這是自打嘴巴的一篇文章。剛剛上篇提到，怎麼把Snap Preview Anywhere™加到自己的網站裡面，結果這一篇就是教大家怎麼利用你的browser，把這樣的功能給擋掉。
其實這樣的功能一開始的確會蠻炫蠻好玩的，不過等到新奇感一過，你就會覺得這樣的功能其實真的蠻煩的，因為每個連結都會出現一大塊的縮圖，就連基本的Yahoo之類的都在縮，有時的確也會想說幹嘛要有這樣的功能，還讓我在load網頁多花時間，所以我裝完幾天之後，就把這樣的功能給拿掉了。
不過當然自己拿掉這樣的功能，別人的還是存在，所以只好利用browser來幫你這個忙了。Firefox比較簡單，直接用AdBlock這樣的plugin把http://spa.snap.com/snap_preview_anywhere.js?*這樣的網址給擋掉就可以了。
相關連結：
gslin - 把Snap Preview Anywhere™給擋掉
JeffHung - Block Snap Preview Anywhere™
[METAMUSE] - Get Annoying Snap Preview Anywhere™ Out of Your Browser
How to : Add Snap Preview Anywhere™ on your blog
最近在瀏覽網頁的時候，常常都會看到一些即使連結縮圖的功能，感覺蠻炫的。後來則看到ijliao那邊看到這個功能的介紹，感覺蠻好玩的，就去試裝了一下。其實這樣的功能並不是加裝什麼plugin，而是靠Snap這個網站。
連上之後，填入一些資料，如網站URL跟email等，就可以得到下面這樣的JavaScript code，把這段code複製回自己的網站，看是要放在頁首header還是頁尾footer都可以，反正放在可以放JS的地方應該就可以讓這樣功能run起來。
<script id="snap_preview_anywhere" src=" http://spa.snap.com/snap_preview_anywhere.js?ap=1&key=c8109b6730cce4fd507c7a3f99882c95&sb=1&domain=demonchang.blogspot.com/" defer="defer" type="text/javascript"></script>
相關連結：
2006/12/22
Windows Live Writer
最近在網路上看到這個由微軟開發的寫blog工具，趁星期六日無聊就裝起來玩一下，剛好有支援我現在寫blog的blogspot，正好可以用來測試。
Live Writer檔案不大，大概只有3MB，安裝的速度也很快。簡單的設定過程如下：
1. Welcome訊息
2. 選擇你的BSP系統，當然除了Live Spaces之外，都歸類到其他。像我所使用的是blogspot，就選擇其他囉。
3. 填入blog的URL跟你的使用者帳號/密碼
4. 按"Next"之後，就可以看到Live Writer正在連接到你的blog，去將目前blog所使用的一些網頁Layout抓回來，確實的做到WYSIWYG，讓你利用Live Writer寫blog就像直接在網頁上撰寫一樣。
5. 如果成功的話，你就可以看到如下面的一些blog設定囉，看到這個就代表成功了，不過我忘了抓失敗的訊息視窗 :p
6. 設定完之後，重新啟動Live Writer，你就可以看到如下面的視窗，就可以直接開始寫blog了，寫完之後，再按上面的"Publish"，就可以把寫好的文章發表到你的blog了。
Live Writer的基本設定就是WYSIWYG，所以就像一般寫文章一樣。不過你也可以點選上方的"Web Layout"，將編輯區切換成"HTML Code"的編輯方式；裡面還有一個"Update Weblog Style"，可以重新抓取你blog的template設定。
另外使用Live Writer還有一個好處，就是你可以直接把你寫的文章，除了Publish到你的blog之外，還可以存檔備份一份在你的電腦，並不用再特別連上blog去做備份。
不過也不能說Live Writer就真的這麼好用跟完美，至少我現在還沒找到要怎麼去更新我已經Publish的文章，然後再重新發佈，如果要修改就得連到網站管理去修改，不過這樣就會失去文章的同步性。另外，因為Live Writer主要是支援Live Spaces，所以並沒有完全支援blogspot的一些功能，例如你不能幫文章加label，所以每次都要利用網頁的管理介面，去編輯文章再加入label，這一點是蠻麻煩的。目前只支援一些social bookmarks，如technorati、del.icio.us . . . 等。
不過基本上來說，這個工具還是蠻好用的，所以大家還是可以試著去用用看囉。
相關連結：
2006/12/21
How to : add Picasa Web Albums in your blogger
在我失去自己放在學校的無限大相簿之後，我就一直找不到地方放我的一些照片，而且對於我這樣喜歡狂拍照片的人來說，相簿空間不夠大根本就不想用，不過當然介面操作跟功能性也是有關係的。關於目前網路上的相簿，之前比較過一些，大家有興趣的話可以參考這一篇，免費相簿比一比。
後來我決定使用Picasa Web來當我目前的網路相簿，不過只有250MB的空間對我來說實在有點少，連我想要加錢增大相簿空間都不行，因為現在只開放給美國的人可以付費加大，或許該考慮一下flickr。
進入正題，Picasa Web不愧為Google的一員，也開始支援JSON的功能，所以馬上就有人寫出可以將放在Picasa Web相片弄成slide show的方式，放到你自己的blogger上。
連到這個PWA Widget Creator，填入一些相簿相關的資訊，然後你就可以得到一段HTML code。然後再進入你的blogger，新增一個"HTML/Javascript”的widget，貼上code，一切就這麼簡單，你的blogger就可以有你相片的slide show了。
相關連結：
2006/12/16
How to : share your Google Calendar in blogger
Google Calendar是Google推出的行事曆服務，讓你可以利用它來做個人的行事曆管理。Google Calendar的好用，就是你可以在網路上輕易的跟大家一起分享你的行事曆，而且在上面你還可以加入各式的行事曆，例如農曆、台灣假日，就連F1比賽的行事曆都有，你都可以輕鬆的就把這些行事曆訊息加入到你自己的行事曆中。
Google Calendar的好用，還是要大家自己體會才可以。我們還是進入正題，教大家怎麼把你的Google Calendar放到blogger上跟大家分享。
- 先登入你的Google Calendar，在你要分享的行事曆旁邊選擇"分享這個行事曆(share this calendar)"，然後選擇分享這個行事曆給每個人(Share all information on this calendar with everyone)這個選項。
- 設定好了之後，再連到Google Embeddable Calendar Helper這個網頁，填入你的Google Calendar帳號跟要分享的行事曆名稱還有一些行事曆大小的設定，然後點"更新 URL(Update URL)"按鈕。之後在下面就會出現一段HTML的程式碼，還有你也可以在下面看到你選擇的Google Calendar設定的預覽(Preview)。
- 之後再到你的blogger，新增一個"HTML/JavaScript"的widget，然後將剛剛上面的那一段HTML的程式碼填進去，儲存之後就完成了，
不過把這樣的行事曆放在右側，似乎有點過小了，資訊沒有辦法很直覺的就看清楚，還是需要再點連結才能看到完整的資訊。
相關連結：
2006/12/15
How to : 新增Google search blog文章widget
這跟前一篇應該算是相關的，因為如果你把NavBar隱藏之後，可能就少掉了NavBar所提供的搜尋文章功能，所以這時就可以新增Google search的widget在右側的功能列。
先新增一個"HTML/JavaScript"的widget，然後填入title及下列程式碼。
<form id="searchthis" action="http://YourID.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Search" class="blue" type="submit"/>
<br/>By Google (Show result in this Blog) </form>
之後你就可以在右側看到新增的Google Search的widget了。
相關連結：
Kaie's blog - Peek-A-Boo Navbar and Google Ajax BlogSearch box
How to : 隱藏blogger頁面的NavBar
blogger在頁面的最上面，放置了一個NavBar，提供了blogger的小廣告跟搜尋引擎的功能，不過因為有的時候一直在上面有點礙眼，而且可能跟使用者精心設計的template style會不合，所以既然不能砍掉它，那就把他隱藏起來好了。
在CSS裡面加入下面的CSS Code：
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
儲存template之後，你就可以發現最上方的NavBar不見了，當你滑鼠游標移到原本位置時，NavBar才會出現，如此也可以方便讓人還是可以去使用NavBar上面的功能。
相關連結：
Kaie's blog - Peek-A-Boo Navbar and Google Ajax BlogSearch box
How to : 在blog文章中嵌入程式碼 in blogger
有的時候當我們在寫一些程式教學的文章的時候，難免會想要在blog當中放進一些程式，但是如果要把程式碼當做一般文字編輯，往往會造成讀者的閱讀不易，所以我們可以透過下面的CSS方式來輕鬆解決這樣的問題。
在"修改HTML"的地方，在範本中加入下列程式碼。
CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New; font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}
){kind=link}
之後在寫blog的時候，如果要加入片段的程式碼，只要用<code></code>把程式碼放在tag之間就可以了。
另外我們還有可能會有一些參考連結的文章內容，為了要特別標示出引用文章的片段，我們可以加入下面的CSS，然後用<reference></reference>的方式來把引用文字放在tag中間。
REFERENCE {
display: block; /* fixes a strange ie margin bug */
font-family: Verdana;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}
){kind=link}
參考連結：
Kaie's blog - A Cool blockquote for "Code style" and some blogging tips
訂閱：
文章 (Atom)