auto-Breadcrumbs-forblogger-has-many-label
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.
Lần trước namkna đã giới thiệu cho các bạn cách tạo thanh điều hướng (trạng thái) Breadcrums cho 2 nhãn nhưng nhược điểm của nó phải làm thủ công bằng tay cho các nhãn đó. Như vạy rất bất tiện nếu blog có quá nhiều nhãn. Hôm nay namkna sẽ hướng dẫn các bạn cách khác hoàn toàn tự động lấy nhãn mà không cần phải làm thủ công như các trước đây.

» Lợi ích của thủ thuật này là gì?

- 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.
Xem Demo:   View Demo
Ảnh minh họa:
Tạo thành điều hướng (Breadcrumbs) tự động cho bài viết của blogger có nhiều nhãn - ves 2

» Làm thế nào để cài đặt Breadcrumbs many label cho blobgger?

1- Đăng nhập Blogger
2- Vào Mẫu (Template)
3- Chọn tab Chỉnh Sửa HTML (Edit HTML) => TIếp tục (proceed) => Chọn Mở Rộng tiện ích mẫu (Expand Widget Templates).
4- Thêm đoạn code sau 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/AVvXsEgCgwHO9AY_3lmSzJwrF5GaZwJAKueKHiX6G2u0UXEZvs_fehutQI7QXeLvAK9_DiQui5es4ifr9DZa4XbXQDfe3uZ_B5AHmz2JPOzCmZfjP9-ujbEe59s4kQklFCSqfhaMRTjsWt4uUhc/s1600/home-namkna.png);width:20px;display:block;height:16px;float:left;text-indent:-9999px;background-repeat:no-repeat;}
» Tùy chỉnh style:
  • 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- Tìm thẻ có dạng tương tự như bên dưới:
<b:includable id='post' var='post'>

- Thêm đoạn code sau vào bên dưới đoạn code 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!