Archive for the ‘ WebApp ’ Category

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

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

在編輯網頁時,如果要讓某個超連結 (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>

參考網頁

在 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
  • return top