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

  • January 11, 2014

Ở 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](http://1.bp.blogspot.com/-XNa04hyslxI/UtDNER9a7qI/AAAAAAAABUk/tP_pb-vo-pA/s1600/list-breadcrumb.gif "Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger")](http://1.bp.blogspot.com/-XNa04hyslxI/UtDNER9a7qI/AAAAAAAABUk/tP_pb-vo-pA/s1600/list-breadcrumb.gif)

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](http://2.bp.blogspot.com/-3-Adg9pUq6U/Ur5fScghTKI/AAAAAAAABPE/GgH9yeMeDW0/s1600/blogger-chinh-sua-html.PNG "Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger")](http://2.bp.blogspot.com/-3-Adg9pUq6U/Ur5fScghTKI/AAAAAAAABPE/GgH9yeMeDW0/s1600/blogger-chinh-sua-html.PNG)

2. Bạn tìm điến đoạn mã có dạng như sau


 .....

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 “








[![Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger](http://3.bp.blogspot.com/-D9s8fwEpnog/UtDKUJed0DI/AAAAAAAABUQ/1xPS_vk27S0/s1600/blogger-breadcrumb.PNG "Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger")](http://3.bp.blogspot.com/-D9s8fwEpnog/UtDKUJed0DI/AAAAAAAABUQ/1xPS_vk27S0/s1600/blogger-breadcrumb.PNG)

3. Tiếp tục tìm đến đoạn mã sau

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)

[![Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger](http://3.bp.blogspot.com/-U7tkbYm6-ts/UtDKafYOlGI/AAAAAAAABUY/ry2t3U1IiTw/s1600/blogger-breadcrumb2.PNG "Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger")](http://3.bp.blogspot.com/-U7tkbYm6-ts/UtDKafYOlGI/AAAAAAAABUY/ry2t3U1IiTw/s1600/blogger-breadcrumb2.PNG)

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](http://3.bp.blogspot.com/-RpTbThDpmi4/Ur5fbw7SOXI/AAAAAAAABPM/19OZZSMWgbQ/s1600/blogger-chinh-sua-html2.PNG "Hướng dẫn tạo thanh điều hướng (breadcrumb) cho Blogger")](http://3.bp.blogspot.com/-RpTbThDpmi4/Ur5fbw7SOXI/AAAAAAAABPM/19OZZSMWgbQ/s1600/blogger-chinh-sua-html2.PNG)

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!