Hướng dẫn tạo breadcrumb cho blogspot

[AdminAdmin is verified member.]

Để tạo Breadcrumb cho Blogspot, các bạn vào chỉnh sửa HTML và chọn mở rộng tiện ích. Sau đó tìm đến đoạn code :

[COLOR=#333333][FONT=Arial][COLOR=#800080]<b:includable id=’main’ var=’top’>[/COLOR]
[COLOR=#800080]  <!– posts –>[/COLOR]
[COLOR=#800080]  <div class=’blog-posts hfeed’>[/COLOR][/FONT][/COLOR]
[COLOR=#333333][FONT=Arial][COLOR=#800080]    <b:include data=’top’ name=’status-message’/>[/COLOR][/FONT][/COLOR]
[COLOR=#333333][FONT=Arial][COLOR=#800080]    <data:adStart/>[/COLOR][/FONT][/COLOR]

Và sửa thành :

[COLOR=#333333][FONT=Arial][COLOR=#800080]<b:includable id=’main’ var=’top’>[/COLOR]
[COLOR=#800080]  <!– posts –>[/COLOR]
[COLOR=#800080]  <div class=’blog-posts hfeed’>[/COLOR]
[COLOR=#800080]  <!– disable default status message[/COLOR]
[COLOR=#800080]    <b:include data=’top’ name=’status-message’/>[/COLOR]
[COLOR=#800080]  default status message disabled –>[/COLOR]
[COLOR=#800080]    <b:include data=’posts’ name=’breadcrumb’/>[/COLOR]
[COLOR=#800080]    <data:adStart/>[/COLOR][/FONT][/COLOR]

Sau đó tìm đến dòng :

<b:includable id=’main’ var=’top’>

Và thêm đoạn code sau vào trên nó :

[COLOR=#333333][FONT=Arial][COLOR=#800080]<b:includable id=’breadcrumb’ var=’posts’>[/COLOR]
[COLOR=#800080]  <b:if cond=’data:blog.homepageUrl == data:blog.url’>[/COLOR]
[COLOR=#800080]  <!– No breadcrumb on front page –>[/COLOR]
[COLOR=#800080]  <b:else/>[/COLOR]
[COLOR=#800080]    <b:if cond=’data:blog.pageType == &quot;item&quot;’>[/COLOR]
[COLOR=#800080]       <div class=’breadcrumbs’>[/COLOR]
[COLOR=#800080]         Browse »  <a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a>[/COLOR]
[COLOR=#800080]         <b:loop values=’data:posts’ var=’post’>[/COLOR]
[COLOR=#800080]           <b:if cond=’data:post.labels’>[/COLOR]
[COLOR=#800080]             <b:loop values=’data:post.labels’ var=’label’>[/COLOR]
[COLOR=#800080]               <b:if cond=’data:label.isLast == &quot;true&quot;’> »[/COLOR]
[COLOR=#800080]                 <a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>[/COLOR]
[COLOR=#800080]               </b:if>[/COLOR]
[COLOR=#800080]             </b:loop>[/COLOR]
[COLOR=#800080]             » <span><data:post.title/></span>[/COLOR]
[COLOR=#800080]           </b:if>[/COLOR]
[COLOR=#800080]         </b:loop>[/COLOR]
[COLOR=#800080]       </div>[/COLOR]
[COLOR=#800080]    <b:else/>[/COLOR]
[COLOR=#800080]      <b:if cond=’data:blog.pageType == &quot;archive&quot;’>[/COLOR]
[COLOR=#800080]        <div class=’breadcrumbs’>[/COLOR]
[COLOR=#800080]          Browse » <a expr:href=’data:blog.homepageUrl’>Home</a> » Archives for <data:blog.pageName/>[/COLOR]
[COLOR=#800080]        </div>[/COLOR]
[COLOR=#800080]      <b:else/>[/COLOR]
[COLOR=#800080]        <b:if cond=’data:blog.pageType == &quot;index&quot;’>[/COLOR]
[COLOR=#800080]          <div class=’breadcrumbs’>[/COLOR]
[COLOR=#800080]          <b:if cond=’data:blog.pageName == &quot;&quot;’>[/COLOR]
[COLOR=#800080]            Browse » <a expr:href=’data:blog.homepageUrl’>Home</a> » All posts[/COLOR]
[COLOR=#800080]          <b:else/>[/COLOR]
[COLOR=#800080]            Browse » <a expr:href=’data:blog.homepageUrl’>Home</a> » Posts filed under <data:blog.pageName/>[/COLOR]
[COLOR=#800080]          </b:if>[/COLOR]
[COLOR=#800080]          </div>[/COLOR]
[COLOR=#800080]        </b:if>[/COLOR]
[COLOR=#800080]      </b:if>[/COLOR]
[COLOR=#800080]    </b:if>[/COLOR]
[COLOR=#800080]  </b:if>[/COLOR]
[COLOR=#800080]</b:includable>[/COLOR][/FONT][/COLOR]

Tiếp theo chỉnh css cho phù hợp, ta tìm đến đoạn mã :

[COLOR=#333333][FONT=Arial][COLOR=#800080]]=]=></b:skin>[/COLOR][/FONT][/COLOR]

và thêm vào trước nó đoạn code sau :

[COLOR=#333333][FONT=Arial][COLOR=#800080].breadcrumbs {[/COLOR]
[COLOR=#800080]padding:5px 5px 5px 0px;[/COLOR]
[COLOR=#800080]  margin: 0px 0px 15px 0px;[/COLOR]
[COLOR=#800080]font-size:95%;[/COLOR]
[COLOR=#800080]  line-height: 1.4em;[/COLOR]
[COLOR=#800080]border-bottom:3px double #e6e4e3;[/COLOR]
[COLOR=#800080]}[/COLOR][/FONT][/COLOR]