Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger

Ở bài viết này, mình sẽ áp dụng 3 bài viết mình đã chia sẻ về điều kiện, includes, và data, để tạo cho các bạn thanh điều hướng (breadcrumb) cho Blogger. Nếu bạn thắc mắc thanh điều hướng có tác dụng gì?, thì thanh điều hướng giúp cho khách và các công cụ tìm kiếm dễ dàng kiểm soát được vị trí hiện tại và chuyển tốt giữa các trang của trang web, từ đó sẽ đánh giá cao hơn về chất lượng website/blog của bạn.

Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger

Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger

1. Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger

2. Bạn tìm điến đoạn mã có dạng như sau
<b:includable id='main' var='top'>
 .....
</b:includable>
và đoạn code phía dưới vào sau đó (bạn có thể xóa toàn bộ chú thích của mình "<!-- .... -->"
<!-- Tạo includes có tên breadcrumb -->
<b:includable id='breadcrumb' var='posts'>
<!-- Điều kiện xuất hiện ở trang bài viết -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Tạo thẻ div và span để trang trí css, và thông báo cho các công cụ tìm kiếm đây là breadcrumb, thẻ a sử dụng data lấy ra trang địa chỉ trang chủ -->
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a class='bhome' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Trang chủ</a></span>
&#187;
<!-- Lặp dữ liệu posts với biến tên là post -->
<b:loop values='data:posts' var='post'>
<!-- Điều kiện đúng nhãn hiện tại -->
<b:if cond='data:post.labels'>
<!-- Lặp post.labels với biến label để lấy ra toàn nhãn -->
<b:loop values='data:post.labels' var='label'>
<span typeof='v:Breadcrumb'>
<!-- Dùng thẻ data lấy ra các nhãn -->
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
<!-- Nếu ko phải nhãn cuối thì thêm ký tự đặc biệt vào phía sau -->
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
</b:loop>
<b:else/>
&#187;Khác
</b:if>
&#187; <data:post.title/>
</b:loop>
</div>
</b:if>
</b:includable>

Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger

3. Tiếp tục tìm đến đoạn mã sau
<b:include data='top' name='status-message'/>
và thêm đoạn code này xuống dưới (cái này gọi ra thì chắc không cần phải giải thích nữa)
<b:include data='posts' name='breadcrumb'/>

Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger

4. Bạn có thể sử dụng đoạn CSS sau hoặc CSS tùy chỉnh của riêng bạn để breadcrumb dịch breadcrump xa ra với tiêu đề hoặc trang trí cho nó, bạn tìm đến thẻ ]]></b:skin> và thêm đoạn css sau lên trên
.breadcrumbs {
margin-bottom: 20px;
margin-top: 8px;
}

Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger

5. Lưu lại template và đã thành công.

Như bạn đã thấy những, nếu bạn nắm được những bài viết trước, bạn có thể làm rất nhiều điều với Blogger mà không cần sử dụng đến Javascript và jQuery, rất tốt cho tốc độ tải trang của bạn. Hi vọng thủ thuật này tiếp tục giúp website/blog các bạn ngày càng phát triển!

6 bình luận

  1. avatar says

    12:21 Ngày 26 tháng 03 năm 2014

    bạn Lâm Kiều giúp mình tạo breadcrumb cho trang này http://trinhcong8.blogspot.com/ nha. mình làm theo ban mà không đươc

  2. avatar says

    12:48 Ngày 26 tháng 03 năm 2014

    Nếu bạn làm tới cuối cùng mà không hiện, bạn có thể làm lại nhưng tới bước 3, thay vì chèn dưới <b:include data='top' name='status-message' thì bạn tìm đến và chèn xuống dưới đoạn này <article class='post hentry'

    Do cấu trúc mỗi template mỗi khác nên mình khó mà biết chính xác được

  3. avatar says

    11:27 Ngày 27 tháng 03 năm 2014

    Mình cảm ơn bạn Lâm Kiều nhiều nha! Minh làm được rùi

  4. avatar says

    06:17 Ngày 24 tháng 03 năm 2016

    tại sao mình tìm không thấy dòng vậy bạn.

  5. avatar says

    02:21 Ngày 26 tháng 03 năm 2016

    hướng dẫn rất chi tiết rồi, bạn không tìm thấy dòng nào vậy nhỉ

  6. avatar says

    22:52 Ngày 13 tháng 09 năm 2016

    đã thử và thành công. thanks ad

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.