彙整
【Blogger Hacks】MyHotPost 問題 和 測試 GoingUp! 紀錄
[WLW] 使用 Windows Live Writer ＋ SyntaxHighlighter 整合編輯 (美化顯示在Blog文章中的程式碼)
本篇介紹如何運用 Windows Live Writer 和 SyntaxHighlighter (高亮度彩色程式碼關鍵字)的整合，一起來編輯文章中的程式碼，讓你文章中的程式碼更容易觀看，就如同現在經常看到的程式編輯器一樣，會將你的程式碼中的指令、關鍵字…等，用不同的顏色來顯示。
備註：寫著寫著沒想到此篇文章卻變的很長，不容易觀看，也想不到一篇文章居然修修改改了一星期，因此稍微編排一下段落，文章分為以下幾個段落：
一、前言 (通常 前言=廢話，可跳過)
二、軟體需求
三、安裝及設定步驟
四、在 Windows Live Writter 插入程式碼的操作
五、在 Blogger 的配合設定 (更新于 2008-12-17)
六、優缺點
七、參考文章
一、前言：
每次在文章中想要秀出程式碼，總是覺得不方便，早期是採用 <code>…</code> (可參考之前的文章: 將程式碼顯示在Blogger上) 的方式，但是每次都得要作好幾道步驟：轉碼、切換HTML編碼、用 code 標籤包起來、貼上程式碼、每一行最後加上 br 換行、切換網頁檢視、挑關鍵字、改顏色…，才能在文章中秀出比較可看的程式碼，實在是非常的不便和麻煩。
雖然很早就知道有 SyntaxHighlighter 這個好工具，但是有幾個原因讓我一直沒有更換：
- 程式碼之間可用 Textarea or Pre 標籤如下格式包起來。（詳細作法請參考文章中1~4項的介紹。）這種作法和我之前採用的 code 標籤方式類似 (可參考之前的文章: 將程式碼顯示在Blogger上) ，都必須將程式碼的前後用標籤包起來，而 code 標籤算是最簡單的方式，沒有分辨程式語法及彩色關鍵字功能，一切得完全靠自己手動。下圖的顯示就是用 code 標籤的處理結果：(2008-12-17更新)
<textarea name='code' class='程式碼的語法名稱'>
...程式碼...
</textarea>or
<pre name='code' class='程式碼的語法名稱'>
...程式碼...
</pre> - 需要將 Javascript 放置在自己的網頁空間，但是 MSN 及 Google Sites 都不支援放置Javascript和呼叫，我又懶的申請其他空間。
- 使用 Windows Live Writer 編輯文章時，還是得切換檢視方式。（在[版面配置]及[HTML編碼]二邊切換＋編輯）
後來雖然有安裝測試 InsertCode，但是整體上操作還是感覺有些不方便。
直到看到 LiveWriter SyntaxHighlighter Plugin–點部落 的介紹，才決定測試及改成SyntaxHighlighter 的方式。（目前使用 SyntaxHighlighter 1.5.1）
二、軟體需求：
- Microsoft .NET Framework (2.0 以上)
- Windows Live Writer (2008 中文版)
- SyntaxHighlighter for Windows Live Writer (2.0 英文版)
三、安裝及設定步驟如下：
- 安裝 SyntaxHighlighter for Windows Live Writer ，打開網頁後，在下圖中的位置下載安裝檔案，然後再執行安裝即可。(安裝後為英文版 2.00，另外該軟體似乎為日本人寫的，有興趣朋友可以下載Source Code研究。)
- 打開 Blogger 的[版面配置]–[修改HTML]，將下列CSS語法放在 ]]></b:skin> 前面。或是先行下載http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Styles/SyntaxHighlighter.css 再將內容貼上。（測試過採用link方式直接連結Google的CSS檔案，卻不能正確顯示）（因程式碼有點長，所以預設為收合狀態，可按 + expand source 展開）
.dp-highlighter { font-family: "Consolas","Courier New",Courier,mono,serif; font-size: 12px; background-color: #E7E5DC; width: 99%; overflow: auto; margin: 18px 0 18px 0 !important; padding-top: 1px; /* adds a little border on top when controls are hidden */ } /* clear styles */ .dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span { margin: 0; padding: 0; border: none; } .dp-highlighter a, .dp-highlighter a:hover { background: none; border: none; padding: 0; margin: 0; } .dp-highlighter .bar { padding-left: 45px; } .dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar { padding-left: 0px; } .dp-highlighter ol { list-style: decimal; /* for ie */ background-color: #fff; margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */ padding: 0px; color: #5C5C5C; } .dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li { list-style: none !important; margin-left: 0px !important; } .dp-highlighter ol li, .dp-highlighter .columns div { list-style: decimal-leading-zero; /* better look for others, override cascade from OL */ list-style-position: outside !important; border-left: 3px solid #6CE26C; background-color: #F8F8F8; color: #5C5C5C; padding: 0 3px 0 10px !important; margin: 0 !important; line-height: 14px; } .dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div { border: 0; } .dp-highlighter .columns { background-color: #F8F8F8; color: gray; overflow: hidden; width: 100%; } .dp-highlighter .columns div { padding-bottom: 5px; } .dp-highlighter ol li.alt { background-color: #FFF; color: inherit; } .dp-highlighter ol li span { color: black; background-color: inherit; } /* Adjust some properties when collapsed */ .dp-highlighter.collapsed ol { margin: 0px; } .dp-highlighter.collapsed ol li { display: none; } /* Additional modifications when in print-view */ .dp-highlighter.printing { border: none; } .dp-highlighter.printing .tools {display: none !important;} .dp-highlighter.printing li {display: list-item !important;} /* Styles for the tools */ .dp-highlighter .tools { padding: 3px 8px 3px 10px; font: 9px Verdana,Geneva,Arial,Helvetica,sans-serif; color: silver; background-color: #f8f8f8; padding-bottom: 10px; border-left: 3px solid #6CE26C; } .dp-highlighter.nogutter .tools { border-left: 0; } .dp-highlighter.collapsed .tools { border-bottom: 0; } .dp-highlighter .tools a { font-size: 9px; color: #a0a0a0; background-color: inherit; text-decoration: none; margin-right: 10px; } .dp-highlighter .tools a:hover { color: red; background-color: inherit; text-decoration: underline; } /* About dialog styles */ .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; } .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma,Verdana,Arial,sans-serif !important; } .dp-about td { padding: 10px; vertical-align: top; } .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; } .dp-about .title { color: red; background-color: inherit; font-weight: bold; } .dp-about .para { margin: 0 0 4px 0; } .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; } .dp-about .close { font-size: 11px; font-family: Tahoma,Verdana,Arial,sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; } /* Language specific styles */ .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; } .dp-highlighter .string { color: blue; background-color: inherit; } .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; } .dp-highlighter .preprocessor { color: gray; background-color: inherit; } - 再把下列語法放在 </head> 前面。（因程式碼有點長，所以預設為收合狀態，可按 + expand source 展開）
<!-- syntaxhighlighter 1.5.1 --> //<!-- 此連結CSS的方式，不知道為何不能正確顯示，但是位址是正確的 //<link href='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> //--> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shCore.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushVb.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushSql.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushXml.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPython.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCss.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/tags /1.5.1/Scripts/shBrushCpp.js' type='text/javascript'/> //<!-- //window.onload 事件會在整個 HTML 頁面 (包含圖片等) 載入完成 //後，才進行執行。但若是您先前也有程式使用 window.onload 的話 //，這將是會把前一個 window.onload 的動作給覆蓋。 //此段說明內容來自:德瑞克(Derrick) 網址: http://sharedderrick.blogspot.com/2007/12/blogger-syntaxhighlighter.html //--> <SCRIPT type='text/javascript'> //<![CDATA[ window.onload = function () { dp.SyntaxHighlighter.ClipboardSwf='http://syntaxhighlighter.googlecode.com/svn/tags /1.5.1/Scripts/clipboard.swf'; dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); } //]]> </SCRIPT>
四、在 Windows Live Writter 插入程式碼的操作如下：
- 點選 WLW 功能表上的[插入]–[Code]，或是右側邊的 ［插入 Code］。如下二圖：
- 當出現下圖的視窗後，就可以貼上程式碼及調整設定了，操作如下圖說明：
- 按OK之後，會把剛剛貼上的程式碼當成一個［物件區塊］，放在WLW編輯的文章中，而程式碼的周圍會出現一個虛線框，如下圖:
- 當你點選在編輯文章中的程式碼區塊時，就會如上圖出現一個虛線框，而在 WLW 的右側邊欄，則會出現一些可調整顯示的相關功能設定，如下圖：
- 以上就是設定 Blog 文章中的程式碼方式。
五、在 Blogger 的配合設定：(更新于 2008-12-17)
在 [設定］–［格式］檢查一下如下畫面的設定：轉換分行符號 請選（否），不然會在 </p>、<ol>、</ol>…的後面自動再多加一個 <br /> 換行符號。調整過後，幾乎就能和WLW看到的一樣了。（讓我奇怪的是，以前都不會如此，當然以前我也沒見過轉換分行符號的效果，現在終於看到了。 =.=）
六、優缺點：
優點：
- 不用在WLW切換檢視，再手動加入或修改語法。（幾乎是所見即所得）
- 不用另找空間存放 Javascript 然後再做呼叫了。（直接套用 Google 的程式。）
- 不用再手動調整一些語法顏色。（如果相關註解寫的夠清楚，也是很容易閱讀的。）
缺點：
- 無法針對程式碼中的一些Code 標上特別的顏色。例如：想特別用顏色註明增加/修改的部份。 這時候可以多花點心思在程式碼的註解上了，這不也正是一個程式設計師的好習慣之ㄧ嗎。
- 程式區塊上方的功能表不是中文。畢竟是直接套用 Google 上的 Javascript，有興趣的朋友可以到SyntaxHighlighter下載完整的程式回來研究，在功能表顯示的部份是在 shCore.js 這個檔案內，可以參考 YEHYEH 網站上提供的 shCore中文化 下載，不過該網站上的版本似乎是 1.5，而該作者也有作一些修正，建議不要直接和1.5.1版本混合套用。
- 過長的程式碼，須手動調整一下，才會比較美觀。在IE6中，超過頁面的程式碼會自動折行顯示；但是在 Firefox 卻是會不會自動折行顯示，而是在程式碼區塊最底下顯示一條滾動條。（在ZBLOG利用dp.SyntaxHighlighter進行語法高亮(轉)有提到可以調整 Textarea 和 Pre 標籤的CSS樣式來解決此問題，另找時間測試。而該文雖是轉來的，但是因為原文卻已經找不到了，只好僅放上該連結。）–2008-12-17 更新
七、參考文章：
- 如何在Google Blog中用SyntaxHighlighter–成長來自學習
- 在 Google Blogger 中使用 SyntaxHighlighter–彭嘉宏的學習筆記
- SyntaxHighlighter 語法高亮標記–lan 懶惰蟲筆記
- 用SyntaxHighlighter在Blog做程式語法教學說明–喬伊的天空
- plugin_syntaxhighlight–blogger-ext2
- plugin_syntaxhighlighter–Thinking More…
- LiveWriter SyntaxHighlighter Plugin–點部落
- SyntaxHighlighter for Windows Live Writer
- Blogger dp.SyntaxHighlighter斷行問題解決方法–YEHYEH
- ZBLOG利用dp.SyntaxHighlighter進行語法高亮(轉) (簡體) (2008-12-17 add)
[Blogger Hacks] 讓Blogger有文章分頁功能
當文章數量一多，有時要查看舊文章實在是不方便，雖然有標籤功能，雖然可以利用 Google 自訂搜尋作出站內文章搜尋功能，但是總覺得少了什麼。
後來看到 Google、Yahoo、Digg 等網站，才猛然發現原來少了文章分頁的功能，但是似乎在 Blogger 上採用的不多，因此搜尋測試了好幾天。
參考文章：
- Blogger Accessories – Page Navigation Hack for Blogger (第一版：一般網路上常介紹的方式)
- Blogger Accessories – Page Navigation Menu Widget for Blogger (第二版: 只使用一個 {HTML/Javascript} Widget )
- Woork – Perfect pagination style using CSS
- WowboxBlog – 24款實用的翻頁頁碼CSS代碼
- Mis-Algoritmos – Some styles for your pagination
- [CSS] 多種分頁樣式範例 (上一篇的中文介紹)
- Blogger Buster – Numbered Page Navigation for Blogger (該文開頭的橘色按鈕有倒影的圖很想要，可惜範例介紹的不是該Style)
- [Blogger]為文章區加上方便瀏覽的頁數按鈕 (上述的中文介紹內容，其實也和第一項一樣)
我是採用上述第2項的方式，再調整CSS設定，方法如同上述第2項所介紹的方式，在此簡略概述一下：
- 到［版面配置］–>［網頁元素］–>任何一個有［新增小工具］的地方–>新增一個{HTML/Javascript}。
- 在 {HTML/Javascript} 中貼上原始碼–>[儲存]。
- 再將該 {HTML/Javascript} 網頁元素，用滑鼠左鍵拖曳到［網誌文章］區塊的[編輯]功能的底下。(原網站Blogger Accessories有提供動態的操作示意圖，應該很容易看懂，本來想將該圖展現在文章內，可惜怎麼測試都不成功。)
我的原始碼如下:
CSS 區段：
<style>
.showpageArea {
padding: 0 2px;
margin-top:5px;
margin-bottom:5px;
font-size:11px;
height:25px;
}
.showpageArea a {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
color: #000000;
font-size:11px;
font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
line-height:24px;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #339966;
color: #000000;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
}
.showpageNum {
font-size:11px;
font-weight: bold;
text-decoration: none;
height:25px;
}
.showpageNum a {
padding: 3px 6px !important;
padding: 2px 6px 2px 6px;margin:0px 4px;
border: 1px solid #339966;
color: #000000;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
line-height:24px;
}
.showpageNum a:hover {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
color: #000000;
background-color: #bcb;
padding: 2px 6px 2px 6px;
margin: 2px;
line-height:24px;
}
.showpageNum a:link {
text-decoration: none;
border: 1px solid #339966;
color: #0066cc;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
margin: 2px;
line-height:24px;
}
/*目前的頁次*/
.showpagePoint {
padding: 2px 8px 2px 8px;
margin: 2px;
font-weight: bold;
border: 1px solid #339966;
color: #000;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
background-color: #bcb;
height:25px;
line-height:24px;
font-size:11px;
font-weight: bold;
}
/*第一頁、上一頁、下一頁、最後一頁 的CSS*/
.showpage a:link {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
color: #0066cc;
background-color: #FFFFFF;
line-height:24px;
padding: 2px 6px 2px 6px;
margin: 1px;
font-size:11px;
font-weight: bold;
text-decoration: none;
height:25px;
line-height:24px;
}
.showpage a:hover {
border: 1px solid #339966;
border-bottom:3px solid;
border-bottom-color:#339966;/*底線顏色*/
color: #000000;
background-color: #bcb;
font-size:11px;
font-weight: bold;
text-decoration: none;
height:25px;
line-height:24px;
}
</style>
Javascript 區段：
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
// 每一頁的文章數，和Blogger設定配合
var pageCount=8;
var displayPageNum=3;
var firstPageWord = '第一頁';
var endPageWord = '最後一頁';
var upPageWord ='上一頁';
var downPageWord ='下一頁';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){thisNum = postNum;}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){thisNum = postNum;}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;background-color: #FFFFFF;" class="showpage">頁次：'+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){html ='';}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){html ='';}
if(blogPager){blogPager.innerHTML = html;}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>
除了 Javascript 區段沒啥變動(英文顯示改成中文顯示而已)，CSS區段我是用 Try Error 的方式改出來的，後續應該還會再做修改，也很難保證有排列順序和語法錯誤的地方。所以，請盡量採用原文的 CSS 去調整成自己想要的 Style。其中，有中文註解的地方是我加上去的，僅是個人的理解＋備忘，僅供參考。(它的CSS不好改，或者我比較笨)
此段程式碼，我換了不同的顯示方式，是採用C # Code format這個網站轉出來的，目前測試的結果，會有超過寬度不能自動換行問題。但是如果使用Postable網頁轉碼＋Code標籤，會把 Javascript 的 “+" 轉不見，怕有將原程式碼轉貼 Lost 的地方。
——Update 2008-12-15
測試安裝SyntaxHighlighter for Windows Live Writer 2.00，沒有預期的效果，才發現必須在 Blogger 裡增加掛載了 SyntaxHighlighter 系列的 .js。
由於不想在這篇文章延伸測試和主題不搭的功能，暫時改成由 Online syntax highlighting for “Java" 轉碼的 HighlightCode 顯示。整理測試OK之後，再開另一篇文章敘述。
尚待解決問題：
Blogger 問題：雖然我在 Blogger上設定每頁文章顯示為8篇，但是點選標籤(側邊欄的標籤Widget)時，卻是一開就20篇文章，只有點底下的 Pagination 分頁才能依照設定顯示每一頁8篇文章。這應該是 Blogger 本身的問題，尚未找到適切的設定可以調整。
[Blogger Hacks]測試 MyHotPost 及增加每篇文章的點閱次數
之前看到 HotBox (熱盒子) 的作者公告，說他受到 MyHotPost 的刺激而決定提早改版，因此，不禁想看看 MyHotPost 是什麼咚咚。
Google 了一下找到 MyHotPost 取得你的熱門文章 這篇介紹，也開始動手安裝測試。安裝步驟很簡單，該篇文章介紹的還不錯，圖文並茂簡單明瞭，我這裡就不畫蛇添足了。
後來，其實 HotBox (熱盒子)已經改的不錯了，所以也只是把貼紙貼上而已。雖然有測試過一些展現的小工具，但是沒多久也拿掉了，一個熱門文章的 Box 我認為夠用了。
但是，如果想知道每一篇文章的點閱次數，HotBox (熱盒子) 似乎就有所不足了。
底下介紹運用 MyHotPost 將每一篇文章都加上點閱次數。
- 在 MyHotPost 官網上，註冊好之後，在［取得語法］那一頁最底下，有一段 JavaScript點閱數，如下圖，請先複製下來。
- 接著進入 Blogger 的［版面配置］–［修改HTML］–［展開小裝置範本］要打勾。
- 如果預計放置在每篇文章底下，有個鉛筆圖案的右邊，一般是第一列。所以請搜尋postQuickEdit，看到大約如下程式碼區段：
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span> </div>- 把剛剛複製的 Javascript 程式碼，加在 </span>…</div> 之間，前後再加上 span 標籤防止被換行，程式碼大約如下：(紅字部分請改為自己的 Javascript 程式碼)
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
<span>點閱數： <script charset='UTF-8' src='http://myhotpost.kengao.tw/jscript/pinfo/824427bd4189a1f5573f97b1c222454e' type='text/javascript'/></span>
</div>- 這樣就OK了。
以上作法，除了在測邊列加入一張 MyHotPost 小貼紙，以及增加一段 Javascript，就不需要再增加其他的外掛 Widget 了。
唯一美中不足的是，MyHotPost 及 HotBox 在同一篇文章的點閱次數是不同的，畢竟是二位不同的作者寫的外掛Widget，而且可能計算的基礎會不同。
另外，如果想看到每篇文章的正確點閱數，必須打開該篇文章才能看到。在首頁上的文章 List 底下顯示的都只會是 點閱數: 1。（2008-12-22）
處理 IE6 不能顯示 PNG 透明背景的問題 (及 Google Sites 問題)
不知道為什麼，今天的網站突然開不出來，每次開到底下狀態列顯示［完成］，畫面就突然消失了，變成一片空白。即使進入 Blogger 的網頁元素，狀況也一樣，網頁元素全部看不見。
後來嘗試著把一些元件(Widget)，圖片及Javascript連結一樣一樣測試去除，最後才發現，原來是之前放在 Google Site 的 Javascript 檔案的問題，移除之後一切就正常能開啟了。(真是，忙了一個上午)
其實 Google Sites 並不允許直接放置 Javascript 檔案(.js)上去，我是將副檔名改成 .txt 放上去的，然後在網站程式碼裡，宣告為 Javascript 呼叫引用。
知道問題之後，只好嘗試著直接將 Javascript 程式碼寫在 Head 區域裡。
我想原因可能是：Google Sites 不再允許你把放上去的檔案，當作 Javascript 呼叫了。
以下為一段處理 PNG 檔案的 Javascript，目的是為了解決在IE6無法顯示 .png 的透明背景。之前的文章 在 MenuBar 上的圖片處理問題 有做介紹。
程式碼如下：(此段程式碼放在 </Head> 前面，紅色字必須記得加上去)
<SCRIPT type='text/javascript'>
//<![CDATA[
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function fixPNG(myImage)
{
if ((version >= 5.5) && (version < 7) &&
(document.body.filters))
{
var imgID = (myImage.id) ? "id='" + myImage.id + "'":""
var imgClass = (myImage.className) ?
"class='" + myImage.className + "'":""
var imgTitle = (myImage.title) ?
"title='" + myImage.title +"'":"title='" + myImage.alt + "'"
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" "width:" + myImage.width
+ "px; height:" + myImage.height
+ "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + myImage.src
+ "\',sizingMethod='scale');\"></span>"
myImage.outerHTML = strNewHTML
}
}
//]]>
</SCRIPT>
使用時，在 <img 標籤裡面加上 onload="fixPNG(this)" 即可。
[Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(2)
在前面一篇: [Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(1) 中，遇到的問題：
缺點：標頭的下方和 Post 區域之間，會多出一列空白。(IE多出的空白高度是Firefox的2倍)
這幾天一直在做調整和測試，總算有點成果。紀錄如下：
- 原本是直接在 Blogger 上的標頭的[網頁元素]上，直接放上 Title 背景圖，現在已移除。而移除的方式： [版面配置]–[網頁元素]–[標頭調整]–[編輯] 把背景圖移除。
- 把原本的上邊 Title 背景圖改放在 Outer-wrapper 的 CSS 區段。
- 區段程式碼如下：紅字部分為增加的部份。
#outer-wrapper {
width:850px;
margin:0px auto;
margin-top:20px; /* 原本在 Header-wrapper 區段與螢幕上緣的間距 */
text-align:$startSide;
font: $bodyFont;
background:url("http://sites.google.com/site/japlinchen/dang-an-gui/Head-03.gif?attredirects=0") no-repeat;
}
- 修改及調整 Head-wrapper 區段的設定。
- 區段程式碼如下：紅字部分為增加的部份。
#header-wrapper {
margin-top:20px;
*margin-top:0px;/*for IE6*/
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:0px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
background:transparent;
/*背景顏色改為透明，才能完整顯示背景圖*/
}
- 調整 Menubar 位置的部份，主要增加 margin-top 和 *margin-top (for IE)。
IE6的問題(尚待處理問題)：
在 Firefox 上已經都能正常顯示，上邊(Title) 及下邊(Main) 之間的間距也都如預期；但是在 IE6 上還就是會多出一段間距。不過至少比之前的間距少很多了。
再找時間針對 IE6 作調整吧！
——以下於 2008-12-05 新增
在 #main-wrap1 及 #sidebar-wrap 區段加入 *margin:-10px 0 0; /*for IE6*/
以#main-wrap1 為例:
#main-wrap1 {
...
/* Header 和 Body 之間的間隙 */
margin:15px 0 0; /*margin:框線外緣以外的距離。順序:下右上左*/
padding:0 0 10px; /*padding:內容-框線內緣的距離。順序:下右上左*/
...
}IE6 似乎會把 margin+padding 加在一起，我試著只調整過 margin:0px 0 0; 還是會有多出間距，但是，當扣掉 padding 的 10px 之後就OK了。
所以，加入後的程式碼大約如下：
#main-wrap1 {
...
/* Header 和 Body 之間的間隙 */
margin:15px 0 0; /*margin:框線外緣以外的距離。順序:下右上左*/
*margin:-10px 0 0; /*專門給IE6看的*/
padding:0 0 10px; /*padding:內容-框線內緣的距離。順序:下右上左*/
...
}
[Blogger Hacks] 換掉 Google 自訂搜尋的醜醜按鈕
原本按照 Google 自訂搜尋的語法，［搜尋］的按鈕實在很醜，如下圖：
不管怎麼調整，常常都會是破壞畫面的兇手。
現在想將該醜醜的按鈕，換成圖片方式來顯示，方法很簡單，如下：
將原本的搜尋指令，如下：
<input value="搜尋" name="sa" type="submit"/>
置換成：
<input type="image" src="你的圖片位址" onClick="document.formname.submit()">
即可。
另外，我是採用CSS定義整個搜尋區塊的顯示，再用 DIV 配合使用。這樣比較方便處理文字與圖形的對齊問題，CSS定義如下：
<style type="text/CSS">
#searchbar{
display:block;
float:left;
position: relative;
top: 4px;
left: 120px;
width:300px;
margin:0 1px;
color:#ffffff;
border: 0px;
vertical-align:middle; /*to firefox 讓圖片文字垂直居中*/
}
</style>
而原本的 Google 自訂搜尋 Code，前後用 DIV 包起來，如下：
<div id="searchbar">
...[Google 自訂搜尋引擎]程式碼...
</div>
