Yin Wang’s Blog

The Blogger help contains a way to create expandable post summaries, but the result is not quite satisfactory. There are two shortcomings:

1. The “more…” signs are display below each post, whether you indict it should be summarized or not.
2. Users should enter there text in such an ugly way:


Here is the beginning of my post. <span class="fullpost">And here is the rest of it.

To get rid of the “more…” indicator from unwanted places. We can use a feature of CSS called “adjacent sibling selectors”. We put an anchor with class “more” after our <span class=”fullpost”></pre>. So the final HTML of the post looks like:


Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span><a class="more">more...</a>


To achieve this goal, we first modify the template so that the area around <$BlogItemBody$> looks like this:


<div>
<$BlogItemBody$></span><a class="more" href="<$BlogItemPermalinkUrl$>" title="read the full article...">more...</a>
</div>


Note that I’ve added an ending <pre></span></pre> so that we don’t need to enter manually into our post.

Second, add the following into your style sheet:


a.more{display:none;}
<MainOrArchivePage>
span.fp {display:none;}
span.fp + a.more{display:inline;}
span.fp + div + a.more{display:inline;}
</MainOrArchivePage>

<ItemPage>
span.fp {display:inline;}
</ItemPage>


When writing a new post, insert <span class=”fullpost”> wherever you need “more…”

Done.

1. 为什么有时候中文中间会多空格？似乎 wordpress 存盘时自动处�空格的时候出问题了。
2. 怎样让�边的连接��滚动呢？