[自創]在blogger中使用「延伸閱讀」按鈕
因為blogger都會在列表頁中完整呈現每篇文字的內容,在舊版還可以靠國外網站來幫忙 ,但新版就沒版法了,不過還是有很多大大提供了很有效的方法,但是卻都還是要去動到HTML原始檔,頗為麻煩。
因此,就在不動到html的前提之下,自己做了個「延伸閱讀」的解決方法。優點就是不用去冒險修改html原始碼,但缺點是這個方法要在列表頁全部讀完之後才會開始有作用。因此,有興趣的人可以繼續看下去。
- 進入管理頁面
- 到「範本」管理介面
- 在「網頁元素」頁面中,的頁面底部,點選「加入網頁元素」
- 再跳出來的小視窗中,選擇「HTML/JavaScript」
- 在新增「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> - 藍色字的區塊填寫你的網址(包括最後的斜線),而綠色字則是容器的高度
- 點選「確定」之後即可觀看結果
這個作法是使用CSS的overflow屬性,在blogger中的html架構下,有用到class名為「post-body」的div標籤,將其顯示範圍加以限制,並在有用到class名為「post-footer」的div標籤下找到超連結後,加入「延伸閱讀」的按鈕。因此,並不需要動到html原始碼架構
由於剛寫出來沒多久,可能會有例外情況產生,而且也有文章開頭前面所說的,要等到頁面全部讀取完才能做動的缺點,因此把此原始碼分享,希望能給各位有能力的大大們,可以找到更兩全其美的方法。