Friday, March 23, 2007

讓Blogger有繼續閱讀功能,有效增加網頁讀取速度!

讓Blogger也能有繼續閱讀的功能,有效增加網頁讀取速度喔!
這個方法有別於css中的display:none,而是用JavaScript來達成的~


參考文章來自:Chagg's 嘴砲日記 水瓶子部落

說明:
css中使用標籤與display:none來使文章得以隱藏,但終究是一種掩耳盜鈴的方法。因為瀏器(IE or FireFox)仍然會預先將資料載入cache裡暫存(Blog上所有的東西仍要下載),因此只俱美觀效果,對於網頁讀取速並無增加作用。
下面這種JavaScript的方法則是利用程式碼與標籤標示出瀏灠器(IE or FireFox)不需讀取的部份作為隱藏,等到滑鼠點下"繼續閱讀..."才會讀取隱部分。對於瀏灠Blogger的速度大大提升不少(尤其對有大量圖片的Blog來說:P)。
附註:使用FireFox瀏灠時需注意FireFox對JavaScript的問題(是否要加裝java plugin)

方法:
登入blogger-->範本-->修改HTML-->展開小裝置範本(打鉤)
然後在head(可以用ctrl+f 協助搜尋) 之後貼上以下程式碼:

<script type='text/Javascript'>

function hidePost(postUrl)

{

var label=document.getElementById(&quot;fullpost&quot;);

if(label!=null){

eA = document.createElement("a");

eA.setAttribute(&quot;href",postUrl);

eA.setAttribute(&quot;title","讓我看個夠吧!");

eA.appendChild(document.createTextNode("閱讀全文..."));

eB = document.createElement("p");

eB.setAttribute(&quot;id","read-more");

eB.appendChild(eA);

label.parentNode.appendChild(eB);

label.parentNode.removeChild(label);}

}

</script>



然後再找到 data:post.body 換成下面的程式碼:
<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>

儲存範本~
最後到 設定-->格式-->文件範本 貼上:
<div id="fullpost">

//要隱藏的內容放這裡

</div>

以後發表文章的時候,把要隱藏的部分放在<div id="fullpost">和</div>之間就可以啦!

3 comments:

  1. 非常感謝~!我正在苦惱呢,Blogger有時就是太過自由了,一些功能都要使用者自己去寫哩,哈哈

    ReplyDelete
  2. hi

    你好,不好意思,請問我可以把你寫的script放在我的blog裡面嗎?當然一定會附上貴網頁連結與作者大名的!

    ReplyDelete