2008年3月5日 星期三

詳見全文(繼續閱讀)使用方法 -for- Blogger

加入書籤: HemiDemi MyShare Baidu Google Bookmarks Yahoo! My Web Del.icio.us Digg technorati furl

Mr.J Sir 改良後的文章 詳見全文功能
Step1: 首先,將 程式1,程式2 放在
</head>
之前。
程式1: 用來設定CSS

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
span.fullpost {display:inline;}
</style>
<b:else/>
<style type='text/css'>
span.fullpost {display:none;}
</style>
</b:if>

程式2: 用來判斷是否要出現 詳見全文 的連結

<script type='text/javascript'>
function hidePost(PostId,PostUrl) {
var Post = document.getElementById("hidePost-"+PostId);
var PostContent = Post.innerHTML;
if(PostContent.indexOf("fullpost")!=-1){
Post.innerHTML="<br/><div><a href='"+PostUrl+"'> 詳見全文... </a></div>";
}else{
Post.innerHTML="";
}
}
</script>

Step2: 找到
<div class='post-header-line-1'/>



<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

把這三行之間程式內容(包括這三行)替換成 程式3
程式3: blogger中,顯示文章內容的程式碼

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<data:post.body/>
<span expr:id='"hidePost-" + data:post.id'><data:post.body/></span>
<script type='text/javascript'>
hidePost('<data:post.id/>','<data:post.url/>');
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Step3: 避免點選較舊文章 可能會失效的情況。
找到以下程式碼,將以下刪除線的部份,從程式裡移除掉。
移除前後得差別在於,點選較 新的文章/較舊的文章 ,瀏覽器顯示的網址,不再是 http://yorblogname.blogspot.com,而是網址加上一大串的參數。
yorblogname:你的部落格名稱

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

Step4: 可以在 blogger的 設定/格式 中,填入以下內容,當每次要寫新文章時候,就會預設出現,不用自己再key 一遍。

文章摘要的部分
<span class="fullpost">這裡是要隱藏的部分</span>

改寫的部份,其實就是判斷文章內容是否有出現 fullpost這個字,如果有的話,表示有使用到 <span class="fullpost">,則就應該要出現改良詳見全文的連結。

沒有留言:

EasyReadMore