[自創]在blogger中使用「延伸閱讀」按鈕

因為blogger都會在列表頁中完整呈現每篇文字的內容，在舊版還可以靠國外網站來幫忙 ，但新版就沒版法了，不過還是有很多大大提供了很有效的方法，但是卻都還是要去動到HTML原始檔，頗為麻煩。

因此，就在不動到html的前提之下，自己做了個「延伸閱讀」的解決方法。優點就是不用去冒險修改html原始碼，但缺點是這個方法要在列表頁全部讀完之後才會開始有作用。因此，有興趣的人可以繼續看下去。

1. 進入管理頁面
2. 到「範本」管理介面
3. 在「網頁元素」頁面中，的頁面底部，點選「加入網頁元素」
4. 再跳出來的小視窗中，選擇「HTML/JavaScript」
5. 在新增「HTML/JavaScript」的頁面下，加入以下程式碼

   <script language="javascript" type="text/javascript">
   <!--
   function checkIndex(url,height){
   var j = ""+location.href;
   var k = ""+url+"index.html";
   var ch1=j.indexOf("search?",0);
   var ch2=j.indexOf("_archive",0);
   var ch3=j.indexOf("search/label/",0);
   checkHeight=""+height;
   if(checkHeight==""){
   height=150;
   }
   if(j==url || j==k || ch1!=-1 || ch2!=-1 || ch3!=-1){
   var allPageTags=document.getElementsByTagName("div");
   var nowTagNum=0;
   var theClass="post-body";
   while(nowTagNum<allPageTags.length){
   if (allPageTags[nowTagNum].className==theClass) {
   allPageTags[nowTagNum].style.overflow="hidden";
   allPageTags[nowTagNum].style.height=height+"px";
   }
   if(allPageTags[nowTagNum].className=="post-footer"){
   getLink=allPageTags[nowTagNum].getElementsByTagName("a");
   addHtml="<div style=\"background:#efefef;padding:5px\"><a href=\""+getLink[0].href+"\" style=\"display:block;font-size:15px\">詳細內容</a></div>";
   allPageTags[nowTagNum].innerHTML=addHtml+allPageTags[nowTagNum].innerHTML;
   }
   nowTagNum+=1;
   }
   }
   }
   checkIndex('http://intermax.blogspot.com/','250')
   -->
   </script>

6. 藍色字的區塊填寫你的網址（包括最後的斜線），而綠色字則是容器的高度
7. 點選「確定」之後即可觀看結果

這個作法是使用CSS的overflow屬性，在blogger中的html架構下，有用到class名為「post-body」的div標籤，將其顯示範圍加以限制，並在有用到class名為「post-footer」的div標籤下找到超連結後，加入「延伸閱讀」的按鈕。因此，並不需要動到html原始碼架構

由於剛寫出來沒多久，可能會有例外情況產生，而且也有文章開頭前面所說的，要等到頁面全部讀取完才能做動的缺點，因此把此原始碼分享，希望能給各位有能力的大大們，可以找到更兩全其美的方法。