jump to navigation

A better way to create expandable post summaries in Blogger December 11, 2005

Posted by wangyin in Uncategorized.
12 comments

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.

Advertisements

WordPress 的问题 December 8, 2005

Posted by wangyin in Uncategorized.
4 comments
  1. 为什么有时候中文中间会多空格?似乎 wordpress 存盘时自动处?空格的时候出问题了。
  2. 怎样让?边的连接??滚动呢?