Tạo thanh điều hướng (Breadcrumbs) cho Blog

Breadcrumb là tiện ích được sử dụng khá phổ biến, đặc biệt là các trang Web/Blog. Breadcrumbs góp phần điều hướng tốt hơn cho Blog của bạn.Và đặc biệt rất tốt cho seo.
Nó có dạng:

Lợi ích của Breadcrumb:

- Góp phần điều hướng giúp độc giả biết được mình đang xem phải viết ở chuyên mục và đường dẫn như thế nào.

- Hỗ trợ SEO và than thiện với các Robot tìm kiếm.

- Giúp Web/Blog của bạn nhìn chuyên nghiệp hơn.

- Không ảnh hưởng tới tốc độ load của web.

- Khả năng tùy biến cao.

Cách tạo:

1- Đăng nhập Blogger
2- Vào Mẫu (Template)
3- Chọn Chỉnh Sửa HTML 
4- Nhấn Ctrl+F tìm kiếm thẻ ]]></b:skin> , sau đó copy đoạn code phía dưới dán ngay trước thẻ  ]]></b:skin>

.breadcrumbs{padding:5px;background-color:#EEE;font-size:90%;color:black;height:16px;line-height:16px}
.breadcrumbs a{color:#B30B0B}
.breadcrumbs a:hover{color:black}
a.bhome{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyPXguvQ-0CYJOIaFiQmowSVSLdnbDMqi3850ACrAxdksR3g2WgAs0onVsa_MXfaN6wUuSR7TUcpGZ4j3yDVhwOBtyfsv-ZH8VdVWR_envuefEESz43u_miCk6YkmaY1Yn8O9k1wHI9dA/s1600/home-namkna.png);width:20px;display:block;height:16px;float:left;text-indent:-9999px;background-repeat:no-repeat;}

» Tùy chỉnh:

• Trước tiên các bạn có thể chọn mã màu mà các bạn thích Tại đây
• background-color:#EEE là màu nền của thanh điều hướng
• color:#B30B0B là màu chữ trên thanh điều hướng khi chưa dê chuột vào
• color:black là màu chữ trên thanh điều hướng khi dê chuột vào liên kết trên đó.
• font-size:90% là cỡ chữ hiển thị trên thanh điều hướng, bạn có thể điều chỉnh lại cho phù hợp với cỡ chữ trên trang của bạn.
• height:16px là chiều cao của thanh điều hướng, nếu bạn điều chỉnh lại cỡ chữ thì hãy điều chỉnh lại cả đoạn này để cho phù hợp .
• Linh ảnh màu xanh chính là link ảnh trang chủ hiện thị phía trước của thanh điều hướng.

5- Tiếp tục tìm thẻ : <b:includable id='post' var='post'>

- Thêm đoạn code sau vào bên dưới thẻ vừa tìm được

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>Home</a></span>
&#187;
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
</b:loop>
&#187; <data:post.title/>
</div>
</b:if>

- Nếu không thích hiện tiêu đề bài viết sau khi kết thúc các nhãn thì thay phần &#187; <data:post.title/> thành chữ khác hoặc xóa bỏ nó đi.

6- Lưu mẫu lại sau đó quay trở lại một bài viết bất kỳ của bạn để xem thành quả đã làm được!

Chúc các bạn thành công!