Archive for the ‘ WebApp ’ Category

將 Funp 加入 Sociable 的書籤清單中

Sociable 是一個 WordPress 的外掛程式,專門用在 Blog 的文章上顯示特定的網路書籤,供訪客收藏,長得就像這個樣子:

可惜的是,Sociable 內建的 92 個書籤裡卻少了大家愛用的 Funp (幸好還有 Hemidemi MyShare),以下的方法說明如何把 Funp 加入 Sociable 的書籤清單中。
Read more

從 Blogger 轉移到 WordPress 的技巧

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

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

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

Read more

下載本站的 Template

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

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

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

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

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

讓 FCKeditor 瀏覽圖檔時,可以顯示縮圖

FCKeditor 雖然有提供很多種程式語言的檔案瀏覽程式,讓你可以很方便地上傳及插入遠端伺服器上的圖檔,但在瀏覽檔案的同時,我們最需要用到的圖檔卻不能顯示縮圖,感覺很不方便 (應該是故意留了一手)。

雖然官方網站上有建議使用 CKFinder 這支外掛程式來管理伺服器上的檔案,但 CKFinder 卻不是免費的。

思考了一下,雖然我的 PHP 很爛,但只是要做個縮圖的功能應該還難不倒我,於是就花了幾個小時把縮圖的功能實做出來。原理很簡單,只是先在相同目錄下產生 ".thumb.gif" 的縮圖檔,在列示時將縮圖顯示出來。

Read more

解決當 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>

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

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

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

修改步驟

  1. 編輯 Blogger 樣板,並 “展開小裝置範本”。
  2. 在 <Style> 區塊內加入:
    #Label1 ul { font-family:Arial; padding:0px; text-align:justify; }
    #Label1 li { display:inline; }
  3. 搜尋 </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 行用來調整顏色變化。

  4. 繼續搜尋 <body>,在標籤內的 onload 事件加入:
    parseTag();
  5. 繼續搜尋:
    <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>
  6. 存檔完成。

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
    • 將上方的”label“換成 Blogger 上的標籤名稱即可。

  • blogger 的留言的 ATOM/RSS 網址為:
    • http://vixual.blogspot.com/feeds/comments/default
    • http://vixual.blogspot.com/feeds/comments/default?alt=rss

如何讓 blogger 不自動載入 ajax

    在 <body> 的下一行加上:

    <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>

讓網頁的「外部超連結」自動開啟在新視窗

在編輯網頁時,如果要讓某個超連結 (Link) 開啟在新的瀏覽器視窗,我們可以在超連結加上「href="_blank"」屬性,但如果超連結很多,要一個一個加上去畢竟麻煩!!

以下的程式碼可以幫你把網頁內所有針對「外部」的超連結自動設為在新視窗開啟。

一般網頁

  1. 將下列程式碼加到網頁的 <head> 區段:
    <script type="text/javascript">
    function parseLink(){
      var tagA = document.getElementsByTagName( "a" );
      re = new RegExp( "^(http://" + document.domain + ")|(javascript:)", "i" );
      for( var i=0; i < tagA.length; i++ ){
        if( !tagA[i].href.match( re ) ){ tagA[i].target = "_blank"; }
      }
    }
    </script>
  2. 在 <body> 標籤內的 onload 事件加入:
    parseLink();

    Ex:

    <body onload="parseLink();">

WordPress 外掛程式

如果你的網站是用 WordPress 架設,可直接在控製台搜尋並安裝「Open external links in a new window」這個外掛程式 (版本: 1.3.1 作者: Kristian Risager Larsen),這樣就不用添加任何程式碼了。

另外需注意,如果本外掛程式與其它像 LightBox、FancyBox...之類的圖片燈箱特效的程式一起使用,有可能會造成同時顯示燈箱特效,又同時將圖片開啟於新視窗!!

Blogger 的樣版下載網站

Blogger 可用的樣版

  1. Mashable
  2. Final Sense
  3. Blogcrowds
  4. Blogger Templates
  5. Free Templates

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

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

  1. 顯示行號
  2. 支援12種程式語言
  3. 模組化載入需要的程式語言
  4. 支援 “<pre>” 及 “<textarea>” 區塊
  5. 純文字檢視
  6. 複製到剪貼簿
  7. 直接列印程式碼

缺點就是載入速度較慢。

安裝步驟

  1. 修改 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 上,你可以視情況下載回來放到自己的伺服器)

  2. 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; }
  3. 儲存即可

使用方法

  • 方法一 - 使用 “<textarea>” 區塊,需將 “&” 轉換為 “&amp;”:
    <textarea name="code" class="程式語言">
    程式碼
    </textarea>
  • 方法二 - 使用 “<pre>” 區塊,需將 “&” 轉換為 “&amp;”、”<” 轉換為 “&lt;”、”>” 轉換為 “&gt;”:
    <pre name="code" class="程式語言">
    程式碼
    </pre>

參考網頁

return top