Tạo Breadcrumbs cho Blog đơn giản

Breadcrumbs tập hợp các đường liên kết phân cấp giúp người dùng có thể biết được mình đang ở trang nào và giúp ddieu hướng trang wed thuận tiện hơn .Breadcrumbs là một thành phần rất quan trọng trong hệ thống điều hướng của website gần như vào bất cứ website nào bạn cũng thấy sự hiện diện của nó.

Bước 1: Bạn đăng nhập vào blog > Chủ Đề > Chỉnh sửa HTML 

Bước 2: Tìm đến đoạn code bên dưới


<b:include data='top' name='status-message'/>

Và thêm vào dưới nó đoạn code sau :

<b:include data='posts' name='breadcrumb'/>


Bước 3: Tìm đến đoạn code sau đây:


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

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

<b:includable id='breadcrumb' var='posts'>      
<b:if cond='data:blog.homepageUrl == data:blog.url'>       
<!-- No breadcrumb on home page -->       
<b:else/>       
<b:if cond='data:blog.pageType == "item"'>       
<!-- breadcrumb for the post page -->       
<p class='breadcrumbs'>
<span class='post-labels'>       
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>       
<b:loop values='data:posts' var='post'>       
<b:if cond='data:post.labels'>       
<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:else/>       
»Unlabelled       
</b:if>       
» <span><data:post.title/></span>       
</b:loop>       
</span>       
</p>
<b:else/>       
<b:if cond='data:blog.pageType == "archive"'>       
<!-- breadcrumb for the label archive page and search pages.. -->       
<p class='breadcrumbs'>
<span class='post-labels'>       
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>       
</span>       
</p>
<b:else/>       
<b:if cond='data:blog.pageType == "index"'>       
<p class='breadcrumbs'>
<span class='post-labels'>       
<b:if cond='data:blog.pageName == ""'>       
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts       
<b:else/>       
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>       
</b:if>       
</span>       
</p>
</b:if>       
</b:if>       
</b:if>       
</b:if>       
</b:includable> 

Bước 4: Cuối cùng chèn đoạn code sau vào trước thẻ đóng ]]></b:skin>

.breadcrumbs {      
padding:5px 5px 5px 0px;       
margin: 0px 0px 15px 0px;       
font-size:95%;       
line-height: 1.4em;       
border-bottom:3px double #e6e4e3;       
}

Bước 5: Save Templeate lại và xem thành quả .