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

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

    • terry
    • 04/12. 2009 3:34下午
    Using Mozilla Firefox Mozilla Firefox 3.0.8 on Windows Windows XP

    你好,我照你的方法成功隱藏內文,但請問能將readMore...改成「繼續閱讀」中文顯示嗎?...:)

    • citypig
    • 04/12. 2009 6:39下午
    Using Mozilla Firefox Mozilla Firefox 3.0.8 on Windows Windows XP

    可以的,請在第二個安裝步驟的第二個程式碼區段,將所有的: 'Read more &gt;&gt;' 以及 '&lt;&lt; Less' 改成你要的中文即可。

    • terry
    • 04/13. 2009 12:30上午
    Using Mozilla Firefox Mozilla Firefox 3.0.8 on Windows Windows XP

    可以了,謝謝....:)

    • Lee
    • 06/06. 2010 3:57下午
    Using Google Chrome Google Chrome 5.0.375.55 on Windows Windows 7

    請問一下 我照您的做法的確做出隱藏內文的效果了

    但是首頁裡面每一篇文章卻都沒有Read More的連結
    只能靠點標題進去內文

    • 辣妹新
    • 06/27. 2011 8:38下午
    Using Google Chrome Google Chrome 12.0.742.100 on Windows Windows 7

    泥好,從搜尋引擎找到版大的專業文,我最近為了部落格搬家的事在煩惱
    到底要選擇痞客邦或是Blogger好…

    基本上,痞客只有一個「滑鼠移向圖片會縮放」的問題困擾著我而已
    而Blogger只要有「文章分類」及「隱藏內文繼續閱讀」的功能我就可以開始使用

    但是我按照版大上述的作法,還是不能夠成功,就從標籤內的「onload」事件開始就無法找到了,希望能夠尋求版大的幫助,指引在下一條明路,感激不盡。

    附上我的二個部落格網址給版大參考:
    痞客邦:http://pilishinchan.pixnet.net/blog
    Blogger:http://pilishinchan.blogspot.com/

    期望能得到指點的新。

  1. No trackbacks yet.

return top

%d 位部落客按了讚: