彙整

Posts Tagged ‘Blogger Hacks’

【Blogger Hacks】MyHotPost 問題 和 測試 GoingUp! 紀錄

2009 年 07 月 20 日 1 則迴響

很久沒更新網站了,大約停了半年,昨天更新了二篇文章之後,才發現 MyHotPost 網站出現問題了。 閱讀更多…

分類:Blogger Hack 標籤:

[WLW] 使用 Windows Live Writer + SyntaxHighlighter 整合編輯 (美化顯示在Blog文章中的程式碼)

2008 年 12 月 15 日 發表留言

本篇介紹如何運用 Windows Live WriterSyntaxHighlighter (高亮度彩色程式碼關鍵字)的整合,一起來編輯文章中的程式碼,讓你文章中的程式碼更容易觀看,就如同現在經常看到的程式編輯器一樣,會將你的程式碼中的指令、關鍵字…等,用不同的顏色來顯示。

備註:寫著寫著沒想到此篇文章卻變的很長,不容易觀看,也想不到一篇文章居然修修改改了一星期,因此稍微編排一下段落,文章分為以下幾個段落:

一、前言 (通常 前言=廢話,可跳過)

二、軟體需求

三、安裝及設定步驟

四、在 Windows Live Writter 插入程式碼的操作

五、在 Blogger 的配合設定 (更新于 2008-12-17)

六、優缺點

七、參考文章

一、前言:

每次在文章中想要秀出程式碼,總是覺得不方便,早期是採用 <code>…</code> (可參考之前的文章: 將程式碼顯示在Blogger上) 的方式,但是每次都得要作好幾道步驟:轉碼切換HTML編碼用 code 標籤包起來貼上程式碼每一行最後加上 br 換行切換網頁檢視挑關鍵字改顏色…,才能在文章中秀出比較可看的程式碼,實在是非常的不便和麻煩。

雖然很早就知道有 SyntaxHighlighter 這個好工具,但是有幾個原因讓我一直沒有更換:

  1. 程式碼之間可用 Textarea or Pre 標籤如下格式包起來。(詳細作法請參考文章中1~4項的介紹。)這種作法和我之前採用的 code 標籤方式類似 (可參考之前的文章: 將程式碼顯示在Blogger上) ,都必須將程式碼的前後用標籤包起來,而 code 標籤算是最簡單的方式,沒有分辨程式語法及彩色關鍵字功能,一切得完全靠自己手動。下圖的顯示就是用 code 標籤的處理結果:(2008-12-17更新)
    <textarea name='code' class='程式碼的語法名稱'>
    ...程式碼...
    </textarea>

    or

    <pre name='code' class='程式碼的語法名稱'>
    ...程式碼...
    </pre>

  2. 需要將 Javascript 放置在自己的網頁空間,但是 MSN 及 Google Sites 都不支援放置Javascript和呼叫,我又懶的申請其他空間。
  3. 使用 Windows Live Writer 編輯文章時,還是得切換檢視方式。(在[版面配置]及[HTML編碼]二邊切換+編輯)

後來雖然有安裝測試 InsertCode,但是整體上操作還是感覺有些不方便。

直到看到 LiveWriter SyntaxHighlighter Plugin–點部落 的介紹,才決定測試及改成SyntaxHighlighter 的方式。(目前使用 SyntaxHighlighter 1.5.1)

 

二、軟體需求:

  1. Microsoft .NET Framework (2.0 以上)
  2. Windows Live Writer (2008 中文版)
  3. SyntaxHighlighter for Windows Live Writer (2.0 英文版)

 

三、安裝及設定步驟如下:

  1. 安裝 SyntaxHighlighter for Windows Live Writer ,打開網頁後,在下圖中的位置下載安裝檔案,然後再執行安裝即可。(安裝後為英文版 2.00,另外該軟體似乎為日本人寫的,有興趣朋友可以下載Source Code研究。)image
  2. 打開 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; 
    }
    

  3. 再把下列語法放在 </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 插入程式碼的操作如下:

  1. 點選 WLW 功能表上的[插入]–[Code],或是右側邊的 [插入 Code]。如下二圖:image  image 
  2. 當出現下圖的視窗後,就可以貼上程式碼及調整設定了,操作如下圖說明:WLW-SyntaxHighlighter-02 
  3. OK之後,會把剛剛貼上的程式碼當成一個[物件區塊],放在WLW編輯的文章中,而程式碼的周圍會出現一個虛線框,如下圖:image
  4. 當你點選在編輯文章中的程式碼區塊時,就會如上圖出現一個虛線框,而在 WLW 的右側邊欄,則會出現一些可調整顯示的相關功能設定,如下圖:image
  5. 以上就是設定 Blog 文章中的程式碼方式。

五、在 Blogger 的配合設定:(更新于 2008-12-17)

在 [設定]–[格式]檢查一下如下畫面的設定:轉換分行符號 請選(),不然會在 </p>、<ol>、</ol>…的後面自動再多加一個 <br /> 換行符號。調整過後,幾乎就能和WLW看到的一樣了。(讓我奇怪的是,以前都不會如此,當然以前我也沒見過轉換分行符號的效果,現在終於看到了。 =.=)

image

六、優缺點:

優點:

  1. 不用在WLW切換檢視,再手動加入或修改語法。(幾乎是所見即所得)
  2. 不用另找空間存放 Javascript 然後再做呼叫了。(直接套用 Google 的程式。)
  3. 不用再手動調整一些語法顏色。(如果相關註解寫的夠清楚,也是很容易閱讀的。)

缺點:

  1. 無法針對程式碼中的一些Code 標上特別的顏色。例如:想特別用顏色註明增加/修改的部份。 這時候可以多花點心思在程式碼的註解上了,這不也正是一個程式設計師的好習慣之ㄧ嗎。
  2. 程式區塊上方的功能表不是中文。畢竟是直接套用 Google 上的 Javascript,有興趣的朋友可以到SyntaxHighlighter下載完整的程式回來研究,在功能表顯示的部份是在 shCore.js 這個檔案內,可以參考 YEHYEH 網站上提供的 shCore中文化 下載,不過該網站上的版本似乎是 1.5,而該作者也有作一些修正,建議不要直接和1.5.1版本混合套用。
  3. 過長的程式碼,須手動調整一下,才會比較美觀。在IE6中,超過頁面的程式碼會自動折行顯示;但是在 Firefox 卻是會不會自動折行顯示,而是在程式碼區塊最底下顯示一條滾動條。(在ZBLOG利用dp.SyntaxHighlighter進行語法高亮(轉)有提到可以調整 TextareaPre 標籤的CSS樣式來解決此問題,另找時間測試。而該文雖是轉來的,但是因為原文卻已經找不到了,只好僅放上該連結。)–2008-12-17 更新

七、參考文章:

  1. 如何在Google Blog中用SyntaxHighlighter–成長來自學習
  2. 在 Google Blogger 中使用 SyntaxHighlighter–彭嘉宏的學習筆記
  3. SyntaxHighlighter 語法高亮標記–lan 懶惰蟲筆記
  4. 用SyntaxHighlighter在Blog做程式語法教學說明–喬伊的天空
  5. plugin_syntaxhighlight–blogger-ext2
  6. plugin_syntaxhighlighter–Thinking More…
  7. LiveWriter SyntaxHighlighter Plugin–點部落
  8. SyntaxHighlighter for Windows Live Writer
  9. Blogger dp.SyntaxHighlighter斷行問題解決方法–YEHYEH
  10. ZBLOG利用dp.SyntaxHighlighter進行語法高亮(轉) (簡體) (2008-12-17 add)

[Blogger Hacks] 讓Blogger有文章分頁功能

2008 年 12 月 12 日 1 則迴響

當文章數量一多,有時要查看舊文章實在是不方便,雖然有標籤功能,雖然可以利用 Google 自訂搜尋作出站內文章搜尋功能,但是總覺得少了什麼。

後來看到 Google、Yahoo、Digg 等網站,才猛然發現原來少了文章分頁的功能,但是似乎在 Blogger 上採用的不多,因此搜尋測試了好幾天。

參考文章:

  1. Blogger Accessories – Page Navigation Hack for Blogger (第一版:一般網路上常介紹的方式)
  2. Blogger Accessories – Page Navigation Menu Widget for Blogger (第二版: 只使用一個 {HTML/Javascript} Widget )
  3. Woork – Perfect pagination style using CSS
  4. WowboxBlog – 24款實用的翻頁頁碼CSS代碼
  5. Mis-Algoritmos – Some styles for your pagination
  6. [CSS] 多種分頁樣式範例 (上一篇的中文介紹)
  7. Blogger Buster – Numbered Page Navigation for Blogger (該文開頭的橘色按鈕有倒影的圖很想要,可惜範例介紹的不是該Style)
  8. [Blogger]為文章區加上方便瀏覽的頁數按鈕 (上述的中文介紹內容,其實也和第一項一樣)

我是採用上述第2項的方式,再調整CSS設定,方法如同上述第2項所介紹的方式,在此簡略概述一下:

  1. 到[版面配置]–>[網頁元素]–>任何一個有[新增小工具]的地方–>新增一個{HTML/Javascript}
  2. {HTML/Javascript} 中貼上原始碼–>[儲存]。
  3. 再將該 {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 += '&nbsp;<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 Hack 標籤:,

[Blogger Hacks]測試 MyHotPost 及增加每篇文章的點閱次數

2008 年 12 月 09 日 2 留言

之前看到 HotBox (熱盒子) 的作者公告,說他受到 MyHotPost 的刺激而決定提早改版,因此,不禁想看看 MyHotPost 是什麼咚咚。

Google 了一下找到 MyHotPost 取得你的熱門文章 這篇介紹,也開始動手安裝測試。安裝步驟很簡單,該篇文章介紹的還不錯,圖文並茂簡單明瞭,我這裡就不畫蛇添足了。

後來,其實 HotBox (熱盒子)已經改的不錯了,所以也只是把貼紙貼上而已。雖然有測試過一些展現的小工具,但是沒多久也拿掉了,一個熱門文章的 Box 我認為夠用了。

但是,如果想知道每一篇文章的點閱次數,HotBox (熱盒子) 似乎就有所不足了。

底下介紹運用 MyHotPost 將每一篇文章都加上點閱次數。

  1. MyHotPost 官網上,註冊好之後,在[取得語法]那一頁最底下,有一段 JavaScript點閱數,如下圖,請先複製下來。 image
  2. 接著進入 Blogger 的[版面配置]–[修改HTML]–[展開小裝置範本]要打勾。
  3. 如果預計放置在每篇文章底下,有個鉛筆圖案的右邊,一般是第一列。所以請搜尋postQuickEdit,看到大約如下程式碼區段:
  4.  <!-- quickedit pencil -->
     <b:include data='post' name='postQuickEdit'/>
      </span> <span class='post-backlinks post-comment-link'>
       <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:post.showBacklinks'>
         <a class='comment-link' expr:href='data:post.url &quot;#links&quot;'><data:top.backlinkLabel/></a>
         </b:if>
        </b:if>
      </span> </div>
  5. 把剛剛複製的 Javascript 程式碼,加在 </span>…</div> 之間,前後再加上 span 標籤防止被換行,程式碼大約如下:(紅字部分請改為自己的 Javascript 程式碼)
  6.  <!-- quickedit pencil -->
     <b:include data='post' name='postQuickEdit'/>
      </span> <span class='post-backlinks post-comment-link'>
       <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:post.showBacklinks'>
         <a class='comment-link' expr:href='data:post.url &quot;#links&quot;'><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>
  7. 這樣就OK了。

以上作法,除了在測邊列加入一張 MyHotPost 小貼紙,以及增加一段 Javascript,就不需要再增加其他的外掛 Widget 了。

唯一美中不足的是,MyHotPost 及 HotBox 在同一篇文章的點閱次數是不同的,畢竟是二位不同的作者寫的外掛Widget,而且可能計算的基礎會不同。

另外,如果想看到每篇文章的正確點閱數,必須打開該篇文章才能看到。在首頁上的文章 List 底下顯示的都只會是 點閱數: 1。(2008-12-22)

分類:Blogger Hack 標籤:

處理 IE6 不能顯示 PNG 透明背景的問題 (及 Google Sites 問題)

2008 年 12 月 08 日 發表留言

不知道為什麼,今天的網站突然開不出來,每次開到底下狀態列顯示[完成],畫面就突然消失了,變成一片空白。即使進入 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 Hack 標籤:,

[Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(2)

2008 年 12 月 04 日 發表留言

在前面一篇: [Blogger Hacks] 在 Blogger 標頭圖形上任意移動 Menubar 位置(1) 中,遇到的問題:

缺點:標頭的下方和 Post 區域之間,會多出一列空白。(IE多出的空白高度是Firefox的2倍)

這幾天一直在做調整和測試,總算有點成果。紀錄如下:

  1. 原本是直接在 Blogger 上的標頭的[網頁元素]上,直接放上 Title 背景圖,現在已移除。而移除的方式: [版面配置]–[網頁元素]–[標頭調整]–[編輯] 把背景圖移除。
  2. 把原本的上邊 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;
      }
  3. 修改及調整 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;
      /*背景顏色改為透明,才能完整顯示背景圖*/
      }
  4. 調整 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 Hack 標籤:,

[Blogger Hacks] 換掉 Google 自訂搜尋的醜醜按鈕

2008 年 12 月 03 日 發表留言

原本按照 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>

分類:Blogger Hack 標籤:, ,
%d 位部落客按了讚: