2006年7月9日星期日

使用DIV+CSS美化Blogger主页

提示:
本方法仅可用于旧的Blogger模板,并不对新版“布局”功能有效。希望这个消息不要扫了您的兴,如果需要新版的修改方法,还请您另辟蹊径。


让Blogger主页显示得更简洁,可以通过以下代码限制每篇帖子显示的内容多少。
< MainOrArchivePage>
< DIV STYLE="height:150px; border:0px; overflow:hidden; text-overflow:ellipsis">
< /MainOrArchivePage>
<$BlogItemBody$>
< MainOrArchivePage>
< /DIV>......
< BR>
< a href="<$BlogItemPermalinkUrl$>">[阅读全文]< /a>
< /MainOrArchivePage>
为了防止Blogger发布时自动解析代码,每个“<”后面都加了空格,实际应用时请删除。下同。
以上代码只会显示每篇帖子高度150像素内的内容,这样的效果会应用于主页、存档页,而帖子页仍然是完整内容。
但是这样只能“隐藏”多于的内容,也就是说,完整的帖子还需要下载到本地让浏览器执行,所以这样不能够提高主页和存档页的打开速度,只能达到“美观”、“整洁”的目的。我想这样也足够了吧。因为我觉得BloggerSpaces的服务器速度还是挺不错的。
效果就和我的这个Blogger一样。

Update:
*说明:
使用方法如下,你会看到Blogger模板设置中有类似的代码
< div class="post-body">
< p>
<$BlogItemBody$>
< /p>
< /div>
内容大致如此,可能不同模板会有不同格式设置。
你需要做的就是使用以上提供的新代码替换到其中的<$BlogItemBody$>字段,保存设置,重新发布即可。

#其他链接:
利用Span类美化Blogger,显示帖子摘要
此文章在BloggerSpaces Groups中的链接