2007年1月15日 星期一

繼續閱讀功能


文章出處:http://tomky.blogspot.com/2006/11/blogger-beta.html


最開始最開始,請一定要備份你的範本!不然出了事就很麻煩了。請點選「下載完整模版」來備份,一旦出問題即可以上傳以回復至原來的範本。

首先,我們要將要隱藏的文章部分的CSS設定為不顯示,並將所需要的JavaScript置入,請將以下的code放到範本的head區裡面:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.post #hiden{
display:none;
}
</style>
<script type='text/javascript'>
function has_id_hiden(postid) {
var elm = document.getElementById(postid);
var nodelist=elm.childNodes ;
var i=0;
while(i != nodelist.length){
if (nodelist.item(i).id=='hiden')
return true;
i++;
}
return false ;
}
</script>
</b:if>

在此請先存檔一次,如果順利過關表示你的code是沒問題的。
接著請按下「展開小裝置範本」,一般人會想要放的位置應該是文章內文的最後面吧?如果是,請在裡面尋找類似的code

<p><data:post.body/></p>


在找到以後,請將他改成以下的code:(其中中文的部分是可以自由修改的喔^^


<p>
<div expr:id='"doc_"+data:post.id'>
<data:post.body/>
</div>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<script type='text/Javascript'>
if(has_id_hiden('doc_<data:post.id/>')==true) {
document.write("<a expr:href='data:post.url' title='
繼續閱讀'>繼續閱讀</a>");
}
</script>
</b:if>
</p>

基本上,這樣就完成囉!請儲存以後去看看你的Blog有沒有正常運作囉!

如果是新手但仍賞光採用我的code的人,在放入這些code以後,在撰寫文章時只要將想隱藏的部分用hiden標記給夾起來,在首頁就不會出現囉:

要顯示的部分
<div id='hiden'>
要隱藏的部分
</div>

雖然可能已經過時了,但仍希望所有的舊Blogger使用者都能藉此快速的轉換到Beta版來,享受一下即時發布的爽度!如果以後有空,我會寫一篇關於新舊版範本的比較和注意事項,如果有空,如果有空

ps. 以上的code是假設你只有在"首頁"需要這個功能,如果你希望在Label下也有這樣的功能的話,請將所有的<b:if cond='data:blog.url == data:blog.homepageUrl'>改成<b:if cond='data:blog.pageType == "index"'>即可。