Breadcrumbs là gì? Cách tạo breadcumbs cho blogspot

Breadcrumbs là 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à từ đó có thể di chuyển thuận lợi từ trang này trang khác trong web.

I. Breadcrumbs là gì?
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à từ đó có thể di chuyển thuận lợi từ trang này trang khác trong web.Breadcrumbs là một thành phần rất quan trọng trong hệ thống navigation 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ạn có thể xem hình ảnh dưới đây để xem breadcrumb là gì.


II. Cách tạo breadcrums cho blogspot

B1: Bạn đăng nhập vào blog -> Thiết kế -> Mẫu -> Chỉnh sửa HTML -> Mở rộng tiện ích và làm các bước 2
B2: Tìm đến đoạn code bên dưới: 

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

Và thêm 1 dòng, như vậy đoạn code trên trở thành:

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

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

B3: Tìm đến đoạn code sau đây:

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

Và thay thế đoạn code trên thành:

<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:includable id='main' var='top'>

B4: Cuối cùng chèn đoạn code sau vào trước thẻ đóng ]]</b:skin>    (nếu không tìm thấy thì bạn nhìn ký chỗ có <b:skin>....</b:skin>  nhé vì nó có thể bị che đi                                                

.breadcrumbs {      

padding:5px 5px 5px 0px;       

margin: 0px 0px 15px 0px;       

font-size:95%;       

line-height: 1.4em;       

border-bottom:3px double #e6e4e3;       

}

B5: Save template      

Bài viết liên quan:

• Tweet
• Share
• Share
• Share
• Share