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

Bước 1: 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


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

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


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


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



Bước 3: 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'>


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 OK. Chúc bạn thành công.







Đánh giá bài viết

Cảm ơn bạn đã đọc bài viết!

  • Mọi thắc mắc, gợi ý hoặc Báo link hỏng xin chia sẻ bên dưới hoặc Gửi Tin Nhắn
  • Không chèn liên kết quảng cáo, spam khi đăng nhận xét.
  • Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục.

Bình luận bài viết này!