Blogger | Vixual

從 Blogger 轉移到 WordPress 的技巧

本站已經由 Google 的 Blogger 轉移到 WordPress，這是轉移到 WordPress 之後的第一篇文章。

用過 WordPress 之後才知道 WordPress 的好，WordPress 相對於 Blogger 的優點如下:

像標籤雲、搜尋、繼續閱讀、最新文章、最新留言、分頁…等等基本功能，已經內建在 WordPress 裡了，不需要辛辛苦苦去改範本、研究程式碼，而 Blogger 往往因為手動加了這些功能，而變得極為擁腫。
可以上傳圖片、影片、音樂…等檔案，以往這些在 Blogger 裡，都需要再尋找額外的網頁空間存放，並且 WordPress 上傳的圖片會自製縮圖。
對於讀取權限的控管，WordPress 可以做到完全公開、公開給特用用戶、單篇密碼保護、禁止搜尋引摯、完全隱藏。
WordPress 已經內建幾個知名部落格系統的轉移工具，當然包括 Blogger。
WordPress 同時有免費線上部落格(BSP)及部落格架站程式。
WordPress 的佈景主題(Themes)更多、更漂亮。
琳瑯滿目的外掛程式，很難找不到你想要的功能。

下載本站的 Template

訪客留言要索取本站的 Template，不過他沒有留下 E-Mail，所以我就直接打包釋出給大家下載。

這是 Blogger 的 Template，而不是 WordPress 的 Template。

這個 Template 的原始版本應該是來自 Designfruit 及 Blogcrowds，我把這個 Template 改成 Blogger 可用，並且是「不限寬度」的版本，也加入了一些我自己寫的 Script，如果覺得改得還可以的，請直接取用。

下載位址: vixual-blogger-template.zip (裡面包含所有圖檔及其它資源)

安裝至 blogger 時須選取「展開小裝置範本」，將 template.txt 的內容全部貼上即可，裡面很多連結至 http://citypig.googlepages.com/ 的項目，請自己上傳、更改至自己的網路空間，本站下次如有改版，可能就會全部刪除了。

另外，這個 Template 在 IE 下是有 Bug 的，如果螢幕不夠寬，內容的部份會跑到側邊欄的下面，就等待 CSS 能力比較強的人來解決了。

WebApp

17 Apr 2008
Write comment

解決當 Blogger 的 "隱藏全文/繼續閱讀" 功能因為點選較新或較舊的文章而失效的狀況

在 Blogger 加入「隱藏全文/繼續閱讀」的功能之後，會因為點選 Blogger 下方的 "較新" 或 "較舊" 的文章連結而導致功能失效!!

會失效原因是因為你在點 "較新" 或 "較舊" 的連結時，所要切換的內容會以 AJAX 的方式載入，而大家所寫的「隱藏全文/繼續閱讀」都是以 JavaScript 所寫的，當 AJAX 直接切換內容時，並沒有觸發到用 JavaScript 所寫的程式，所以，我們要做的就是讓 AJAX 的這個功能失效。

修改 Blogger 範本，點選「展開小裝置範本」，找到下列原始碼，這些原始碼就是新舊文章的連結，將「紅色」的字串去掉，最後再存檔即可:

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

WebApp

Blogger

17 Sep 2007
Write comment

將 Blogger 中的標籤改成標籤雲(Tag Cloud)

當 Blogger 中的文章一多，標籤也跟著變多，而 Blogger 的標籤元件就會變得落落長，不好看也不好搜尋。

這時候如果改成「標籤雲」就會是一個不錯的作法。在標籤雲中運用字體大小及顏色的變化，就可以很快的找你要的標籤。

修改步驟

編輯 Blogger 樣板，並「展開小裝置範本」。

在 <Style> 區塊內加入:

#Label1 ul { font-family:Arial; padding:0px; text-align:justify; }
#Label1 li { display:inline; }

搜尋 </head>，在上一行加入:

<script>
function parseTag(){
  var tagA = document.getElementsByTagName('a');
  for(var i=0; i<tagA.length; i++){
    if(tagA[i].id == 'tag'){
      var tag = tagA[i];
      var width = tagA[i].title;
      tag.style.fontSize = 14 + parseInt(width/5);
      tag.style.color = 'rgb(0,0,' + width*5 + ')';
    }
  }
}
</script>

其中的第 8 行可用來調整字體大小，第 9 行用來調整顏色變化。

繼續搜尋 <body>，在標籤內的 onload 事件加入:
```
parseTag();
```

繼續搜尋:

<li>
  <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>
  <b:else/>
    <a expr:href='data:label.url'><data:label.name/></a>
  </b:if>
  (<data:label.count/>)
</li>

取代成:

<li>
  <b:if cond='data:blog.url == data:label.url'>
    <a id="tag" expr:title='data:label.count' expr:href='data:label.url'><u><data:label.name/></u></a>
  <b:else/>
    <a id="tag" expr:title='data:label.count' expr:href='data:label.url'><data:label.name/></a>
  </b:if>
</li>

存檔完成。

WebApp

Blogger

14 Sep 2007
Write comment

blogger 資料整理

RSS 相關

blogger 的 ATOM/RSS 預設是依更新時間排序，網址為:
- http://vixual.blogspot.com/feeds/posts/default
- http://vixual.blogspot.com/feeds/posts/default?alt=rss
如果要讓它依發表時間排序，網址須改為:
- http://vixual.blogspot.com/feeds/posts/default?orderby=published
- http://vixual.blogspot.com/feeds/posts/default?alt=rss&orderby=published
Label(標籤)的 RSS 網址:
- http://vixual.blogspot.com/feeds/posts/default/-/label
blogger 的留言的 ATOM/RSS 網址為:
- http://vixual.blogspot.com/feeds/comments/default
- http://vixual.blogspot.com/feeds/comments/default?alt=rss

如何讓 blogger 不自動載入 ajax

<script type='text/freezescript'>
_WidgetManager._Init=function(){};
_WidgetManager._SetPageActionUrl=function(){};
_WidgetManager._SetDataContext=function(){};
WidgetManager._SetSystemMarkup=function(){};
WidgetManager._RegisterWidget=function(){};
</script>

如何讓版面依內文或列示載入不同項目

判斷是否為內文:

<b:if cond='data:blog.pageType == "item"'>
載入的項目
</b:if>

判斷是否為文章列示:

<b:if cond='data:blog.pageType != "item"'>
載入的項目
</b:if>

WebApp

Blogger

21 Aug 2007
Write comment

Blogger 的樣版下載網站

Blogger 可用的樣版

02 Aug 2007
1 comment

在 Blogger 中使用 dp.SyntaxHighlighter 顯示程式碼

db.SyntaxHighlighter 是一支不錯的程式碼高亮度顯示程式，特點為:

顯示行號
支援12種程式語言
模組化載入需要的程式語言
支援「<pre>」及「<textarea>」區塊
純文字檢視
複製到剪貼簿
直接列印程式碼

缺點就是載入速度較慢。

安裝步驟

修改 blogger 樣板，搜尋「</body>」，在「上方」加入(你可以選擇你要的語言載入即可):

<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shCore.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPhp.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushJScript.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushSql.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushXml.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushDelphi.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPython.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushRuby.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCss.js'></script>
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCpp.js'></script>
<script class='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

(因為「偷吃步」的關係，程式直接連到 dp.SyntaxHighlighter 的 SVN 上，你可以視情況下載回來放到自己的伺服器)

dp.SyntaxHighlighter 原本已經有一個 CSS 檔了，但如果將這個 CSS 檔以「Link」的方式載入，卻無法正常顯示。所以，請自行增加下列 CSS 到 blogger 樣板的 CSS 區段:

/*dp.highlighter*/
.dp-highlighter {
  font-family: "Consolas", "Courier New", Courier, mono;
  font-size: 12px;
  background-color: #E7E5DC;
  width: 99%;
  overflow: auto;
  margin: 18px 0px 18px 0px;
  padding-top: 1px; /* adds a little border on top when controls are hidden */
  border:1px inset;
  max-height:200px;
}
.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 */
  list-style: decimal-leading-zero; /* better look for others */
  background-color: #fff;
  margin: 0px 0px 1px 45px; /* 1px bottom margin seems to fix occasional Firefox scrolling */
  padding: 0px;
  color: #5C5C5C;
}
.dp-highlighter.nogutter ol {
  list-style-type: none !important;
  margin-left: 0px;
}
.dp-highlighter ol li,
.dp-highlighter .columns div {
  border-left: 3px solid #6CE26C;
  background-color: #f8f8f8;
  padding-left: 10px;
  line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div {
  border: 0;
}
.dp-highlighter .columns {
  color: gray;
  overflow: hidden;
  width: 100%;
}
.dp-highlighter .columns div {
  padding-bottom: 5px;
}
.dp-highlighter ol li.alt {
  background-color: #fff;
}
.dp-highlighter ol li span {
  color: Black;
}
/* 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;
  text-align1: right;
  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;
  text-decoration: none;
  margin-right: 10px;
}
.dp-highlighter .tools a:hover {
  color: red;
  text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; 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; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; 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; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; }
.dp-highlighter .string { color: blue; }
.dp-highlighter .keyword { color: #069; font-weight: bold; }
.dp-highlighter .preprocessor { color: gray; }

儲存即可

使用方法

方法一 - 使用「<textarea>」區塊，需將「&」轉換為「&」:
```
<textarea name="code" class="程式語言">
程式碼
</textarea>
```
方法二 - 使用「<pre>」區塊，需將「&」轉換為「&」、」<」轉換為「<」、」>」轉換為「>」:
```
<pre name="code" class="程式語言">
程式碼
</pre>
```

參考網頁

使用 google-code-prettify 顯示程式碼

29 Jul 2007
Write comment

在 Blogger 中使用 google-code-prettify 顯示程式碼

google-code-prettify 是一支不錯的程式碼高亮度顯示程式，特點為:

支援 15 種程式語言(但某些語言似乎還沒完成)
程式僅兩個檔案
載入速度較快

缺點為:

跟 IE 的相容性比較不佳，在 IE 內複製程式碼時無換行符號
無行號顯示
僅支援 "<pre>" 區塊
程式碼過長時不會自動顯示捲軸 (可透過修改 CSS 解決)

安裝步驟

修改 blogger 樣板，搜尋 "</head>"，在 "上方" 加入

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script>

(因為 "偷吃步" 的關係，程式直接連到 google-code-prettify 的 SVN 上，你可以視情況下載回來放到自己的伺服器)

繼續搜尋 "<body>"，在標籤內的 onload 事件加入:
```
prettyPrint();
```
儲存即可。

使用方法

使用 "<pre>" 區塊，需將 "&" 轉換為 "&"、"<" 轉換為 "<"、">" 轉換為 ">":

<pre class="prettyprint">
程式碼
</pre>

參考網頁

使用 dp.SyntaxHighlighter 顯示程式碼

28 Jul 2007
2 comments

在 Blogger 的文章中加入 "隱藏內文/繼續閱讀" 功能

Blogger 中的文章因為沒有「隱藏內文」及「繼續閱讀」的功能，所以就會把整個網頁拉得很長，較不利於閱讀。並且，如果文章內有很多圖片的話，那載入的時間就會變得很長。

以下的內容是我參考其它 Blogger 的做法所做的改良，主要的不同，就是我覺得其它 Blogger 在載入時會先顯示全文，再做隱藏，視覺上的效果比較不好，我把它改成一開始就會隱藏內文了，也可以避免自動載入內文的圖片。

安裝步驟

編輯樣版，搜尋「</head>」，在其上方加入:

<b:if cond='data:blog.pageType != "item"'>
<style>
#fullpost { clear:both; display:none; }
#read-more { float:left; color:#FFFFFF; background-color:#00FF00; border:1px outset; padding:2px; text-decoration:none; font-weight:bold; font-family:Arial; }
</style>
</b:if>

繼續搜尋「<body>」，在標籤內的 onload 事件加入:

if(window.readMore){readMore();}

繼續在下一行加入:

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var tagSpan = document.getElementsByTagName('span');
var more1 = new Array();
var more2 = new Array();
function readMore(){
  var x = 0;
  for(var i=0; i&lt;tagSpan.length; i++){
    if(tagSpan[i].id == 'fullpost'){
      more1[x] = tagSpan[i];
      var readMore = document.createElement('a');
      readMore.setAttribute('id','read-more');
      readMore.setAttribute('href','javascript:toggleMore('+x+')');
      readMore.setAttribute('onclick','toggleMore('+x+');return false;');
      readMore.appendChild(document.createTextNode('Read more &gt;&gt;'));
      more2[x] = more1[x].parentNode.insertBefore(readMore,more1[x]);
      x++;
    }
  }
}
function toggleMore(theElement,theStatus){
  if(theStatus == true || more1[theElement].style.display=='' || more1[theElement].style.display=='none'){
    more1[theElement].style.display = 'block';
    more2[theElement].innerHTML = '&lt;&lt; Less';
//  more2[theElement].parentNode.removeChild(more2[theElement]);
  }else{
    more1[theElement].style.display = 'none';
    more2[theElement].innerHTML = 'Read more &gt;&gt;';
  }
}
function expandAll(theStatus){
  for(var i=0; i&lt;more1.length; i++){
    toggleMore(i,theStatus);
  }
}
</script>
</b:if>

請注意一下程式碼的第 25 行，如果將前面的註解拿掉，則訪客展開內文之後，」Read more」的連結就會自動消失了。

儲存即可

使用方式

前文
<span id="fullpost">
欲隱藏的內文
</span>

全部展開/隱藏全文

<input id="expand-all" onclick="if (window.expandAll){expandAll(this.checked)}" type="checkbox">
<label for="expand-all">Expand All</label>

解決「隱藏內文/繼續閱讀」失效的問題

解決當 Blogger 的「隱藏全文/繼續閱讀」功能因為點選較新或較舊的文章而失效的狀況

WebApp

Blogger

28 Jul 2007
5 comments

Vixual

Posts Tagged ‘ Blogger ’

從 Blogger 轉移到 WordPress 的技巧

下載本站的 Template

解決當 Blogger 的 "隱藏全文/繼續閱讀" 功能因為點選較新或較舊的文章而失效的狀況

將 Blogger 中的標籤改成標籤雲(Tag Cloud)

修改步驟

blogger 資料整理

RSS 相關

如何讓 blogger 不自動載入 ajax

如何讓版面依內文或列示載入不同項目

Blogger 的樣版下載網站

Blogger 可用的樣版

在 Blogger 中使用 dp.SyntaxHighlighter 顯示程式碼

安裝步驟

使用方法

參考網頁

在 Blogger 中使用 google-code-prettify 顯示程式碼

安裝步驟

使用方法

參考網頁

在 Blogger 的文章中加入 "隱藏內文/繼續閱讀" 功能

安裝步驟

使用方式

全部展開/隱藏全文

解決「隱藏內文/繼續閱讀」失效的問題

INFORMATION

人都來了，不按個讚怎麼說得過去 ^_^

簡繁轉換

熱門文章

文章分類

友站連結

近期迴響

贊助商連結

其它

Posts Tagged ‘ Blogger ’

修改步驟

RSS 相關

如何讓 blogger 不自動載入 ajax

如何讓版面依內文或列示載入不同項目

Blogger 可用的樣版

安裝步驟

使用方法

參考網頁

安裝步驟

使用方法

參考網頁

安裝步驟

使用方式

全部展開/隱藏全文

解決 「隱藏內文/繼續閱讀」 失效的問題

INFORMATION

簡繁轉換

熱門文章

文章分類

友站連結

近期迴響

贊助商連結

其它

解決「隱藏內文/繼續閱讀」失效的問題