post | sidebar | footer

August 4, 2008

在 blogger 單篇文章中加入 Breadcrumb Trail (Here You Are)

做個記錄。在 Adding a Breadcrumb Trail to your Blogger Post 發現。

# 尋找 Blog1 Widght,locked 也有可能是 true ,看妳用的版型為何。
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
   在上方程式之後找
<b:includable id='main' ... >
...
</b:includable>

   然後在這區段的後面 (右邊) 加入下方的 code。
<b:includable id='breadcrumbs' var='post'>
  <!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
  <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>  &gt;

        <b:loop values='data:post.labels' var='label'>
          <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
          <b:if cond='data:label.isLast == "true"'> / </b:if>
        </b:loop>

        <b:if cond='data:post.title'>
          &gt;  <b><data:post.title/></b>
        </b:if>
        </b:if>
      </span>
    </p>
  </b:if>
  <!-- End of Breadcrums Hack -->
</b:includable>

# 把下方粗體的程式放在妳要顯示的地方。
<b:if cond='data:post.dateHeader'>
    <b:include data='post' name='breadcrumbs'/>
    ...
</b:if>

# 加上 CSS
.breadcrumbs {
    border-bottom:1px dotted #000;
    margin:2em 0 0.5em;
    padding:0 0 0.5em;
}

No comments: