2006年12月7日星期四

blogger:在Blogger Beta的独立文章页中增加所在位置导航

这个功能可以使你在每篇文章的独立页中增加一个所在位置的导航链接,此项功能一般常见于大型的、路径比较复杂的网站,实际上在 Blogger 上不存在这种问题,但如果你愿意也还是可以加上一个,以方便你的浏览。

第一步:
进入 Template->Edit HTML ,备份,勾选 Expand Widget Templates 展开,找到 Blog1 部件 (<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">) 。将下列代码紧贴其后。

<b:includable id='breadcrumbs' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> & g t ;
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
& g t ; <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
</b:includable>

然后将& g t ;中的空格全部取消。

第二部:
接着再找到这句
<b:if cond='data:post.dateHeader'>

将下列代码紧贴其上(如图所示):
<b:include data='post' name='breadcrumbs'/>



第三步:
将下列 CSS 代码粘贴在<b:skin></b:skin>之间任何合适的位置(如图所示):

.breadcrumbs {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}


具体样式可以自行修改,保存更新,大功告成。
如果你的一篇文章有多个 Label 时,它只会显示最后一个,如果你的文章没有加上 Label 的话,它就不会显示了。

希望上文对你有所帮助,如有任何疑问可留言告知,我会尽快给予回复。

0 评论:

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆