純 CSS 的 Blogger 繼續閱讀功能 - 部落格

（註：「純 CSS」只是說沒用到 javascript 而已）

繼續看下去前，請先注意以下幾點：

一、要比較新的瀏覽器才能起作用，純文字瀏覽器當然也不行。
二、使用上很麻煩，你只能參考而已，有時複製了也不一定能用。
三、每頁第一篇「一定」會顯示全文，而後面有弄繼續閱讀的「一定」會隱藏一部分。
四、真的看不懂也不會用的，可以不必勉強學這個，好用的還有很多的。


----

首先在模版裡幫 CSS 加上這堆規則（為好看而加的行開頭的空格並無影響）：

/* 很挑瀏覽器的純 CSS 「繼續閱讀」功能 */
.GoBackTop
{
display:none
}
.hentry + .hentry .content-show-and-hide + .GoBackTop ,
.hentry + * + .hentry .content-show-and-hide + .GoBackTop
{
display:block
}
.hentry + .hentry .content-show-and-hide * ,
.hentry + * + .hentry .content-show-and-hide *
{
display:none
}
.hentry + .hentry .content-show-and-hide + .GoBackTop ,
.hentry + * + .hentry .content-show-and-hide + .GoBackTop
{
text-align:right
;
margin: 1.8em 1em 0 0 !important
}
.hentry + .hentry .content-show-and-hide + .GoBackTop a:after ,
.hentry + * + .hentry .content-show-and-hide + .GoBackTop a:after
{
content:".....後續完整文章請點此"
}


然後進各篇文章的原始碼編輯模式，
照下面這方式為內文寫入 HTML 來隱藏文章：
用 [ 跟 ] 包住的是說明文字，修改時得連 [] 一起拿掉，
然後 GoBackTop 那裡要跟下行接的，記得要接緊 # 別參空格。

<p>要顯示的文，這裡用 p 元素包著當說明例。</p>

<!-- 開關內文 --><div class="content-show-and-hide"
id="[注意這裡要使用獨一無二的 id 名稱(一定要英文字開頭)]">

<p>被隱藏的文，這裡用 p 元素包著當說明例。</p>

<!-- 開關內文 --></div>

<p class="GoBackTop"><a href="[該文章的獨立頁面網址，跟下行接起來。]
#[對應前面 class="content-show-and-hide" 那段的 id 名稱]"></a></p>


以上的 CSS 跟 HTML 部分，都可以視使用情況，
自行改用適當的元素、id、class、頁內書籤的名稱，
CSS 規則跟 HTML 內容也能隨需要修改，
本文只是當個範例而已，不太適合無腦使用。



----
想看展示效果，或有其它意見的，可以來以下頁面，PTT 我比較少上的。
http://atelier-wini.blogspot.com/2008/12/blog-post_07.html

--