Archive for the ‘ WebApp ’ Category

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

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

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

缺點為:

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

安裝步驟

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

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

使用方法

      使用 "<pre>" 區塊,需將 "&" 轉換為 "&amp;"、"<" 轉換為 "&lt;"、">" 轉換為 "&gt;":
<pre class="prettyprint">
程式碼
</pre>

參考網頁

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

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

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

安裝步驟

  1. 編輯樣版,搜尋 “</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>
  2. 繼續搜尋 “<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” 的連結就會自動消失了。

  3. 儲存即可

使用方式

    你必需在 Blogger 編輯文章時使用 “修改 HTML” 模式,在要顯示/隱藏內文的部份用下列標籤包起來:

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

全部展開/隱藏全文

    你如果想要增加一個的控制項,可以用來展開或隱藏所有文章的內文,則請自行新增一個 “HTML/Javascript” 網頁元素,內容:

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

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

各大網站客服電話 (持續收集中...)

PCHome

  • 線上購物: (02)2704-0999
  • 城邦集團: (02)2500-0888

Yahoo!奇摩

  • 客服電話: (02)6639-5691
  • 總  機: (02)2365-9898
  • 傳  真: (02)2365-7302

Read more

Google 常用服務及網址

搜尋引摯

  • 搜尋引摯首頁 進階搜尋 網址登錄
  • 圖片搜尋 最先進的網路圖片搜尋工具
  • 網上論壇 建立郵寄清單和討論群組
  • 新聞 建立您自己自訂的 Google 新聞
  • Blog 搜尋 Find blogs on your favorite topics (Beta)
  • 個人化搜尋 取得與您最相關的搜尋結果
  • Google 快訊 透過電子郵件接收新聞和搜尋結果
  • Google Answers 提出問題,設定價格,取得答案
  • Co-op 自定你要的搜尋引摯
  • 網站管理

  • 網站管理員工具
  • Analytics 網站流量統計
  • 網站應用服務 GMail for your doamin
  • AdSense 廣告輪播 Discover your site’s full revenue potential
  • 網路服務

  • Google 網上論壇 (Beta)
  • Picasa Web Albums (Test)
  • Google Spreadsheets 線上電子試算表 (Beta)
  • GMail Google 在電子郵件上的革新 (開放申請)
  • orkut 與可靠的朋友所建立的社群聯繫
  • 免費網頁空間 Create your own web pages, quickly and easily (Beta)
  • 個人化首頁 其它模組
  • Google Moon
  • Google Mars
  • Blogger 現在就建立您的 Blog
  • Google Talk Web 版 Beta
  • Froogle 購物清單 利用您的喜愛產品之願望清單,做出明智的購物選擇
  • More Google Products…
  • 商業

  • Google AdWords 尋找正在搜尋您銷售產品的消費者
  • 軟體

  • Google Pack - 實用軟體集合 Beta
  • Picasa - 相片管理軟體
  • Desktop Beta
  • ToolBar
  • Google Talk Web 版 Beta
  • Google Earth Beta
  • Google Web Accelerator Beta
  • 程式開發

  • Web Toolkit
  • Google 網頁 API 提供給軟體開發人員自動查詢 Google 的工具
  • Gadgets Add Gadgets
  • Simple Filelist 簡易檔案列表程式 *

    檔案下載

    • 名  稱: Simple Filelist
    • 版  本: 1.1
    • 檔案大小: 3 KB
    • 語言介面: 英文版
    • 版本性質: Freeware
    • 釋出日期: 2006/11/20
    • 作業平台: Linux
    • 原創網站: Vixual
    • 檔案下載:

    一般網站基於安全性及隱私權…等的原因,管理者通常會將網站上的目錄瀏覽功能(Indexes)給關閉,讓訪客無法直接看到網站上放了些什麼檔案。

    但人性總是予盾的,關閉了的功能,在某些時候又會想要啟用,因為人們總是在失去的時候才感到後悔莫及...(Sorry,離題了)。因此,我就寫了這個簡單的 PHP 小程式,當我們需要在特定目錄啟用瀏覽的功能時 ,除了請管理者幫忙,或者自己修改「.htaccess」之外,只要有這個小程式就可以解決問題了。
    Read more

    [轉載]傳統編輯對部落格新手的寫作建議:一個呼籲

    轉載自: 老貓學出版


    這半年來台灣的部落格風潮,可說是越颳越興旺,許多優秀的傳統媒體寫作者,大量轉移寫作平台,開始建立自己的部落格。但這時我卻發現「會寫作」和「會寫部落格」之間,還有著相當的落差。許多人有非常棒的學養和見解,可惜文章貼出來卻讓人難以卒讀。

    不是因為見解不深刻,也不是因為文筆欠優美,而是因為文章讓人「看」不下去──文章密密麻麻,版面沒有考慮「易讀性」,讀者眼睛疲勞,讀來自然備感痛苦。你等於加設了一道辨讀文字的關卡,擋在讀者理解文意之前,讀者還沒來得及思考你說了什麼,一上站先就被缺乏易讀性的版面打敗了。

    部落格是個「一貼上就發表」(post and publish)的出版工具,從寫作到發表,沒有任何距離,不像傳統媒體,中間還有一個叫做編輯的傢伙,幫你調整段落、設定格式,讓你的文章印成鉛字以後,你越看越滿意。

    Read more

    [轉載]網路開店到底可不可行?

    轉載自: Neo's Blog


    昨天去夢想家維護系統的時候,裡面一位員工說要自己出來開網站,我建議他到奇摩拍賣先去試試,而他的想法卻是「希望有一間自己的網路商店」。

    他問了 Hinet 最便宜的開店方案,一個月也要一萬多。

    以他目前的狀況,既不懂行銷,又不懂網站,只單純的會美工及找產品,就算Hinet的只有一百元,成功的機率都不高。

    想要有自己的店面是很多創業者的夢想,但是在網路開不開店完全不是重點,開店是在實體世界才需要做的事,網路創業風潮一再被媒體及開店平台商扭曲,變成沒有自己的店面好像就沒辦法在網路上做生意。

    Read more

    doiMenu - 簡單好用的 DHTML 選單程式 *

    doiMenu 是一支簡單好用的 DHTML 選單程式,目前的版本是 1.5。

    相關網頁

    Flash Bar Code 1.0 - Flash 條碼產生器 *

    檔案下載

    這是一個簡單好用一維條碼產生器,使用 Flash 設計而成,程式使用的條碼格式是 "EAN-13" ,前三碼為國碼 (台灣為471) + 四碼廠商碼 + 五碼資料碼 + 一碼檢查碼,只要在設計網頁時,將 "Code" 參數傳給 "FBC10.swf" 就可以了。
    Read more

    一些給網站使用的 WYSIWYG 的編輯器

    網頁上的 WYSIWYG 編輯器算是以後設計網頁的趨勢...

    比較推薦的有:

    還不錯的有:

    功能較陽春的:

    很不錯,但要錢的有:

    參考網頁

    return top