Blogger Hack | 老怪的挨踢日誌

彙整

Archive for the ‘Blogger Hack’ Category

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

2009 年 07 月 20 日 japlin 1 則迴響

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

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

2008 年 12 月 15 日 japlin 發表留言

本篇介紹如何運用 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）

二、軟體需求：

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

安裝 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 更新

七、參考文章：

分類：Blogger Hack, 軟體標籤：Blogger Hacks, 軟體, Google

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

2008 年 12 月 12 日 japlin 1 則迴響

當文章數量一多，有時要查看舊文章實在是不方便，雖然有標籤功能，雖然可以利用 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 += '&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, CSS

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

2008 年 12 月 09 日 japlin 2 留言

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

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

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

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

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

在 MyHotPost 官網上，註冊好之後，在［取得語法］那一頁最底下，有一段 JavaScript點閱數，如下圖，請先複製下來。
接著進入 Blogger 的［版面配置］–［修改HTML］–［展開小裝置範本］要打勾。
如果預計放置在每篇文章底下，有個鉛筆圖案的右邊，一般是第一列。所以請搜尋postQuickEdit，看到大約如下程式碼區段：
 　<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 程式碼)
<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）

分類：Blogger Hack 標籤：Blogger Hacks

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

2008 年 12 月 08 日 japlin 發表留言

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

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

2008 年 12 月 04 日 japlin 發表留言

在前面一篇: [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 Hack 標籤：Blogger Hacks, CSS

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

2008 年 12 月 03 日 japlin 發表留言

原本按照 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 標籤：Blogger Hacks, CSS, Google

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

2008 年 12 月 01 日 japlin 發表留言

原本參照 Fun New Run High 的介紹: 在blogger(blogspot) 標題列下加入一個水平列的功能選單(menu bar) 在 Blogger 標頭圖形底下新增一個 {HTML/Javascript}，來製作一個 Menu Bar。

遇到的問題：

在 Firefox 和 IE6 中，顯示位置會不一樣。
螢幕解析度不同時，顯示位置也會跑掉。 (如1024×768 及 1280×1024)

想要的效果：

想要讓 Menubar 能移動到標頭圖案的右上角。
在 Firefox 及 IE 中，顯示的位置要一樣。
解析度不同時，Menubar 的位置不會跑掉。

原因理解：

原文的方式採用position: absolute; (絕對位置)的方式，這樣調整好的位置，在不同的解析度下，顯示位置會跑掉，可能比較適合居中顯示的方式。
許多在 CSS 處理 Firefox 及 IE 的顯示問題，是採用相對位置(relative) 及浮動(float) 的方式解決。
DIV 會自動換行，SPAN 不會自動換行，SPAN 可以放在 DIV 之間使用。

處理方式：

將 MenuBar 的CSS 設定和顯示內容都放置在 {HTML/Javascript}，這樣方便調整多了，不用每次都得換頁到 [版面配置]—[修改HTML] 修改。
修改 position: absolute; (絕對位置)–>為 position: relative;(相對位置) 。
增加 float:left; 原文沒有。(需和 display:block/inline; 配合使用)
調整 Top、Left、Width。(其中 Left+Width 必須設定好，才不會因為 DIV 的關係超過寬度而自動換行。)
因為有背景圖，所以 border: 0px;。避免破壞畫面。
滑鼠移動到 Menubar 上方時，底色＋邊框：(藍色字)
- background-color:#61A782;
- border: 1px solid #ffffff;

修改過後，在 Firefox 及 IE6 顯示位置果然可以接受了，而在不同解析度下位置也不會亂跑了。(1024×768 及 1280×1024)

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

在 Firefox 的顯示如下:

在 IE6 的顯示如下:

相關 CSS 程式碼如下：(大部分與原文相同)

<style type="text/CSS"> #navmenubar{ display:block; float:left; position: relative; top: -126px; left: 450px; height:24px; line-height:24px; width:484px; margin:0 1px; color:#000000; border: 0px; }
#navmenubar li{ float:left; list-style-type:none; white-space:nowrap; border: 0px; } #navmenubar li a{ display:block; padding:0 10px; font-size:12px; font-weight:bold; text-transform:uppercase; text-decoration:none; background-color:inherit; color: #ffffff; } * html #navmenubar a {width:1%;}
#navmenubar .selected,#navmenubar a:hover{ text-decoration:none; font-weight:bold; color:#00ff00; background-color:#61A782; border: 1px solid #ffffff; } </style>

相關參考文章：

wowbox blog (網頁設計知識庫) — 裡面有很多 CSS 技巧教學和詳細的觀念介紹。(PS.該網站上文章還沒看完)

分類：Blogger Hack 標籤：Blogger Hacks, CSS

[Blogger Hacks] 調整及移除部分 Widget

2008 年 11 月 25 日 japlin 發表留言

最近再忙公司的事情，已經很少有時間寫相關紀錄了，每次一登入自己的版面，又總覺得這邊要改那邊要改，常常花費時間在修改版面上，每次當調整版面後想看結果，卻又發覺之間有些不錯用的小工具，經常會停留在讀取的動作，總要等他跑完，才能看到完整的結果。

我想這些小工具都是不錯用的，很多網站也都有在使用，而且有的網站讀取速度還相當不錯，所以應該是我還不熟析 Blogger Hacks 的關係吧，東加加、西測測，結果造成自己網站讀取越來越慢。

由於，短時間內，也沒精力花費在這方面的細部調整上，因此先暫時把一些小工具移除，調整及移除內容如下：

funP 小圖示 (常常讀取很慢，反正我的Blog主要是自己MEMO用的，就無所謂推不推薦啦)
Hotbox 熱門文章 (~~常常讀取很慢，甚至在 Blogger 的網頁元素上讀取也一樣~~)
(該作者已經調整及測試，速度變快很多，許多之前有問題的地方也都修正，已于2008-11-29在放上去)
MyBlogLog (自己感覺沒啥用處，也許是我不會用吧)
將［繼續閱讀懶人版］從側邊列的最下邊移到上邊，讓已Post的文章能更快的調整好。
部觀察：其實也經常很慢，甚至是所有數字都=0，~~可能因為排在［Hotbox 熱門文章］之前，所以感覺顯示快了些，暫時先保留吧~~。

其實，有時候 Blogger 本身也讀取很慢，但是除非放棄不用，不然也只能忍受，不過還好不是經常如此。

—–修正于 2008-12-04

分類：Blogger Hack 標籤：Blogger Hacks

[CSS]單圖像實現圓角，自動符合高度–[備忘]

2008 年 11 月 21 日 japlin 發表留言

文章來源：單圖像實現圓角，自動符合高度–wowbox blog (網頁設計知識庫)

該網站上可以直接執行查看效果

先MEMO下來，後續再測試應用方式。

CSS 區塊：

DIV 應用區塊：

<div class="wrap_content"> <div class="content_left"></div> <div class="content_bottom"> <div class="web_content"> 這是一個圓角矩形<br /> 圓角會隨著這裡面的內容擴張而擴張 </div> </div> </div>

原始圖檔: (來自原網站)

分類：Blogger Hack 標籤：CSS

Older Entries

老怪的挨踢日誌

彙整

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

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

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

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

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

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

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

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

[Blogger Hacks] 調整及移除部分 Widget

[CSS]單圖像實現圓角，自動符合高度–[備忘]

熱門文章

近期文章

分類

AD

其它

彙整

分享:

請按讚：

分享:

請按讚：

分享:

請按讚：

分享:

請按讚：

分享:

請按讚：

分享:

請按讚：

分享:

請按讚：

分享:

請按讚：

分享:

請按讚：

分享:

請按讚：

熱門文章

近期文章

分類

AD

其它