存档/标签页仅显示标题及小改进

今天又看了咖啡鱼的博客,看了《Blogger beta技巧：存档/标签页仅显示标题》觉得挺实用的，试了一下觉得挺好的。可是如果只按原文简单的复制、粘贴，所得的效果不是很让人满意。于是我做了一点小小的修改。并把自己的制作过程整理一下，希望对需要的朋友有所帮助！
1、先下载一个脚本文件，上传到自己的空间（此处的空间有一定的要求，必须要能直接用外部链接下载的）。如果没有这样的空间，可以用我后面提供的链接。

2、在<head>之间添加以下代码
<script type=’text/javascript’ src=’脚本文件地址’ />
如果没用空间上传脚本的朋友可以直接使用以下代码
<script type=’text/javascript’ src=’http://files.getdropbox.com/u/834109/hackosphere.js’ />
3、确保已经展开”扩展窗口小部件模板”，然后搜索非红色的代码(可以用ie自带的页面查找搜索”<b:includable id=’main’ var=’top’>“)，在相应的位置，把下面的红色部分添加到代码中。最后保存。

<b:includable id=’PeekABooPost’ var=’post’> <div class=’post uncustomized-post-template’> <table><tr> <td width=’40px’> <a href=’javascript:void(0)’ title=’Expand/collapse this post’ style=’text-decoration:none’ expr:onclick=’”javascript:toggleIt(\”" + data:post.id + “\”);”‘>[+/-]</a> </td> <td> <h3 class=’post-title’><a expr:href=’data:post.url’><data:post.title/></a></h3> </td> </tr></table> <div class=’post-body’ expr:id=’data:post.id’ style=’display:none’> <p><data:post.body/></p> <div style=’clear: both;’/> <!– clear for photos floats –> </div> </div> </b:includable>

<b:includable id=’main’ var=’top’>
<!– posts –> <div id=’blog-posts’>
<b:loop values=’data:posts’ var=’post’>
<b:if cond=’data:post.dateHeader’>
<h2 class=’date-header’><data:post.dateHeader/></h2>
</b:if>
<b:if cond=’data:blog.homepageUrl != data:blog.url’> <b:if cond=’data:blog.pageType != “item”‘> <b:include data=’post’ name=’PeekABooPost’/> <b:else/> <b:include data=’post’ name=’post’/> </b:if> <b:else/>
<b:include data=’post’ name=’post’/>
</b:if>
<b:if cond=’data:blog.pageType == “item”‘> <b:if cond=’data:post.allowComments’> <b:include data=’post’ name=’comments’/> </b:if> </b:if> </b:loop> </div>

这样就基本完成了可是效果可能并不让人十分满意。
以下是简单的修改
主要是通过对第一段红色代码作小修改

<b:includable id=’PeekABooPost’ var=’post’> <div class=’post uncustomized-post-template’> <table><tr> <td width=’40px’> <a href=’javascript:void(0)’ title=’Expand/collapse this post’ style=’text-decoration:none’ expr:onclick=’”javascript:toggleIt(\”" + data:post.id + “\”);”‘>[+/-]</a> </td> <td> <h3 class=’post-title’><a expr:href=’data:post.url’><data:post.title/></a></h3> </td> </tr></table> <div class=’post-body’ expr:id=’data:post.id’ style=’display:none’> <p><data:post.body/></p> <div style=’clear: both;’/> <!– clear for photos floats –> </div> </div> </b:includable>

其实就是修改以上3处绿色字体的地方。以下一一作解释
1、<td width=’40px’>，此处用于调节标题前空出的位置，默认是40px，个人认为太大了一些，可以根据个人需求进行修改。
2、title=’Expand/collapse this post’，懂一些html的都知道这是当鼠标停留在链接上时提示的信息，可以对链接进行简单的描述。
3、style=’text-decoration:none’ ，修改此处可以修改字体的格式。