Blogger如何实现首页摘要
前篇《定场诗&罗成托兆文本》的日志正文文本较多, 在首页显示的篇幅过长, 严重影响美观, 因为以前写的日志基本没遇到过这么长的, 所以想到设置首页摘要是有必要使用的… 写下此文, 有需要的同学可以参考着来.
首先要明确几件事情, 因为国内封杀了BLOGGER的空间托管Blogspot, 所以我的BLOGGER是采用通过FTP发布的形式发布到我国内的服务器上的. 而且一直以来都是使用这种模式, 所以, 我不清楚在通过Blogspot托管后的新版本BLOGGER上, 是否有设置首页摘要更方便的功能. 如果你和我发布BLOG的模式一样, 那么可以使用我这种方法.
Blogger是一个自由度极高的BLOG服务提供商. 只要你掌握的技术够多, 基本上你能够在Blogger上完成你所有希望的改变. 最近Gfans讨论问题的时候提及到了Yahoo360, Live Spaces等BLOG服务提供商, 很有感触… 稍后我会再写一篇日志, 送给正准落户BLOG大家族, 但不知道如何挑选BSP的新朋友们. 这篇日志先暂时不提了. 下面开始说具体该如何做.
首先可以肯定BLOGGER并没有提供首页摘要的设置, 所以, 这就需要我们自己动手来创建这个功能了. 做起来也很简单,为了避免HTML问题， 下面所涉及到的代码中， 所有应该是””的, 都用”《”和”》”代替, 如果要复制文本, 请手动替换回””.
首先在模板的《style》和《/style》之间, 插入以下代码:
/* 首页和存档页摘要,日志页全文代码
————————————————- */《MainOrArchivePage》
span.full {display:none;}
《/MainOrArchivePage》
《ItemPage》
span.full {display:inline;}
《/ItemPage》
这样, 首页摘要就定义好了, 下面要做的, 就是添加(或修改原有的)原文地址连接了. 在模板《BlogItemBody》代码下方, 你会看到发布者, 发布时间, 评论, 等等连接的源码, 在你认为合适的位置, 添加或者修改”查看原文”的连接. 代码:
《a href=”《$BlogItemPermalinkUrl$》” target=”_blank”》原文地址《/a》
接下来要做的, 就是修改文章了. 找到你认为在首页显示篇幅过长的日志, 修改, 在HTML模式下, 将你认为需要在首页隐藏的内容用《span class=”full”》和《/span》扩起来. 比如:
这里是在首页要显示的内容, 《span class=”full”》这里是在首页被隐藏的内容.《/span》
需要注意的是, 这个首页摘要功能是手动的, 并不会自动为每篇日志设置摘要, 这个设置适合平时首页都是以全文显示日志, 只是偶尔遇到长篇幅日志才要用到首页摘要功能的BLOG. 不过仔细想一下, BLOG首页也就那几篇日志, 每次写的时候手动去加一下标签也不累. 也无所谓自动不自动了.
WEB版的GoogleTalk
其实因为在GMAIL邮箱中早就可以使用Gtalk聊天了, 所以也不能说以前没有WEB版的Gtalk. 不过这次这个能够更随意一些.
随着GoogleTalk官方主页的改版, 一种新的Gtalk模式诞生了, 这个WEB版的Gtalk, 不但可以让你在不安装Gtalk客户端的情况下登陆Gtalk聊天, 而且可以随意放置到任何网页中, 比如插入到自己的BLOG中, 或者添加到Google个性化主页中等等….
如果你拥有Gtalk帐号, 那么可以在下面的WEB版Gtalk中登陆你的Gtalk尝试一下. 🙂
如果你想将这个WEB版的Gtalk插入到你的BLOG中, 可以在http://googletalk.cn.googlepages.com/gtalk.html这个网址内点击右键-查看源代码, 然后将代码插入你BLOG的适当位置就可以了.
如果你觉得上面网址内的样式不好, 可以到GoogleTalkGadget官方网站制定自己喜欢的样式.
下面这段视频是来自Google YouTube官方频道的一段关于WEB版GoogleTalk的宣传片.
用CSS为你的BLOG添加导航栏
看到过不少BLOGGER都带有导航栏, 很漂亮, 也很方便. 前几天Gfans讨论关于BLOGGER模板样式问题的时候, 也谈到了这个导航栏的问题, 有人说这个导航栏其实就是CSS+DIV的应用, 并不复杂. 于是搜索了一下, 自己也做了这么一个导航栏.
可能还有其他BLOGGER们对这个也很有兴趣, 下面就简单说一下如何添加这个导航栏.
首先你可以到网上搜索一些CSS导航栏的素材下载过来, 或者你也可以点击这里下载我这篇日志中用到的一些导航栏.
下载后, 解压到任意文件夹中. 双击”Menus”打开网页预览一下这些导航栏的效果.
挑选一个你喜欢的样式, 并记住样式上面的名称编号, 然后把你选择的导航栏所需要的两个图片, tableft?和tabright?(?是字母, 比如你选择的是样式F, 那么就是tableftF和tabrightF)上传到你的FTP或者flickr等图片储蓄空间.
接着, 在资源管理器中右键单击”Menus”那个网页文件, 在”打开方式”中, 选择用记事本(或者其它你喜欢的文本编辑器)打开它.
打开后你会在记事本中看到这些样式的源代码, 其中, 以”/*”开头, 以”*/结尾的是注释部分, 在注释中查找你所选样式的源代码, 并做适当修改. 比如宽度, 高度, 背景颜色等… 需要特别注意的是代码中所用到的两个图片tableft?.gif和tabright?.gif, 需要修改成你刚刚上传到服务器的地址, 如果你上传的是和你BLOG相同服务器的FTP空间, 那么可以写成相对路径(类似”../images/tableftF.gif”), 如果你是上传到flickr等图片储蓄空间, 那么需要写成绝对路径(类似”http://farm1.static.flickr.com/123/456.jpg”), 不过无论你是哪种情况, 我都建议你写成绝对路径, 免得以后麻烦.
修改好代码以后, 可以先保存, 然后在本地刷新刚刚打开用来挑选样式的窗口, 可以看到修改后的样子, 满意后, 复制刚刚修改好的代码, 把这段代码粘贴到你BLOGGER模板的《style type=”text/css”》到《/style》中间. 然后回到刚刚用记事本打开的”Menu”文件中, 在下边查找你所选样式的对应DIV标签. 比如你选择的是样式F, 那么你就要找《div id=”tabsF”》开头的代码，把代码中对应的Link 1, Link 2…等等名字和链接地址换成你的, 然后复制《div id=”tabsF”》到《/div》的代码(包括这两句). 并回到BLOGGER模板的代码中, 粘贴到你想放置导航栏的地方.
注: 此段文字中所出现的”《”和”》”分别代表英文半角的小于号和大于号.
OK, 粘贴好以后, 可以点击预览查看一下, 满意后, 点击保存, 并重新发布BLOG就可以了.
如果有任何问题, 欢迎留言或来信. 我会摘着我会的给大家回答. 😛
By The Way: 明天就是大年三十了, 预祝大家在新的一年里, 阖家欢乐, 身体健康, 学业有成, 工作顺利. 🙂
让blogger显示最新评论
首先要感谢GFANS网友Boboo共享出这段代码.
如果你是Blogger的用户, 那么可以在模板代码的适当位置插入以下代码, 来实现在页面中显示最新的日志评论. 效果见本BLOG侧边栏.
<MainOrArchivePage> <!– 如果不希望只在INDEX页显示, 就去掉这行 –>
<h2 class=”sidebar-title”>最新留言</h2>
<dl id=”comments-block”>
<Blogger>
<BlogItemCommentsEnabled>
<BlogItemComments>
<dt class=”comment-data” id=”t<$BlogCommentNumber <dt class=”comment-data” id=”t<$BlogCommentNumber$>”>
<span class=”comment-poster”>
<$BlogCommentAuthor$></span>说:
</dt>
<dd class=”comment-body” id=”d<$BlogCommentNumber$>”>
<$BlogCommentBody$>
</dd>
</BlogItemComments>
</BlogItemCommentsEnabled>
</Blogger>
</dl>
<script type=”text/javascript”>
sortComments(document.getElementById(‘comments-block’), 5);
</script>
</MainOrArchivePage> <!– 如果不希望只在INDEX页显示, 就去掉这行 –>
<MainOrArchivePage>标签的说明:
<MainOrArchivePage>和</MainOrArchivePage> 之间的内容, 表示仅在索引页(也就是index首页)显示的内容, 加上这个标签的代码 ,不会在其他日志页面显示(如果你设置了每篇日志独立发布为一个页面的话, 当然, 也包括存档的日志页面).
〖猫宅〗-「裏」 
