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中的链接

9 条评论:

  1. 页面的排列更有规则,更好看,的确比那种方法好

    回复删除
  2. 很美观,而且通过代码可以调整显示篇幅的大小,很好的代码,收下

    回复删除
  3. 哈,又学到一点东西,谢谢

    回复删除
  4. 这个代码该加在什么地方?请详细一点,我是新手。

    回复删除
  5. 关于代码的用法我已经更新在帖子里了,请查看。

    回复删除
  6. 奇怪,我怎么没找到
    < div class="post-body">
    < p>
    <$BlogItemBody$>
    < /p>
    < /div>
    这个代码??

    回复删除
  7. 不同模板可能代码不同,你只要找到<$BlogItemBody$>就行了,修改内容稍作改动即可。

    回复删除

请勿张贴商业广告。评论可能需要审核。
No advertisement. Comment review enabled.