Blogger 繼續閱讀功能改良
一般在blogger上使用繼續閱讀功能的方式都是在想要隱藏的文章上放上tag，然後再利用css的display:none來隱藏該篇文章，由於display:none所隱藏的部份，不論是在IE或是Firefox下瀏覽，一樣都會把隱藏部份下載到cache，所以如果首頁的文章過長或是圖片過多，一樣會影響到首頁的瀏覽速度。
所以這篇利用Javascipt，把想要隱藏的文章直接remove掉，提高首頁的讀取效率，並且還具有Read More標籤適時才出現的功能。
首先進入編輯html，請記得把Expand Widget Templates打勾，然後在<head>間放入Javascript code
<script type="text/Javascript">
function hidePost(postUrl)
{
var label=document.getElementById("fullpost");
if(label!=null){
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","Read More");
eA.appendChild(document.createTextNode("...Read More"));
eB = document.createElement("p");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
label.parentNode.appendChild(eB);
label.parentNode.removeChild(label);}
}
</script>
接下來找到
用下面的code取代它
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.url/>');</script>
</b:if>
</b:if>
最後，把想要隱藏文章部份的tag中，加入id="fullpost"就完成了，即
<div id="fullpost">//隱藏部分的文章</div>
所以這篇利用Javascipt，把想要隱藏的文章直接remove掉，提高首頁的讀取效率，並且還具有Read More標籤適時才出現的功能。
首先進入編輯html，請記得把Expand Widget Templates打勾，然後在<head>間放入Javascript code
<script type="text/Javascript">
function hidePost(postUrl)
{
var label=document.getElementById("fullpost");
if(label!=null){
eA = document.createElement("a");
eA.setAttribute("href",postUrl);
eA.setAttribute("title","Read More");
eA.appendChild(document.createTextNode("...Read More"));
eB = document.createElement("p");
eB.setAttribute("id","read-more");
eB.appendChild(eA);
label.parentNode.appendChild(eB);
label.parentNode.removeChild(label);}
}
</script>
註:背景為綠色部分，可自行更改
接下來找到
<p><data:post.body/></p>
用下面的code取代它
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.url'>
<script type='text/javascript'>hidePost('<data:post.url/>');</script>
</b:if>
</b:if>
最後，把想要隱藏文章部份的tag中，加入id="fullpost"就完成了，即
<div id="fullpost">//隱藏部分的文章</div>
留言