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

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:

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{padding:5px;background-color:#EEE;font-size:80%;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/AVvXsEiYk2qUDLHglNUhIGGixYK-pL3jXHLa_rl6qOqJAiCVjtAKHJBS4hQpKE4OXHJUJLD6rgHacCXxG9JBiKMf-uvyIFupIHjajM6yVlxA54fvo3i-bPYsG6sJ4l1RVeWeKpoZ6qvFulg1jrg/s1600/home-namkna.png);width:20px;display:block;height:16px;float:left;text-indent:-9999px;background-repeat:no-repeat;}

5- Tìm thẻ sau:

<b:includable id='post' var='post'>

6- Thêm đoạn code sau vào bên dưới đoạn code trên:

<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 » <data:post.title/> thành chữ khác hoặc xóa bỏ nó đi.
7- Lưu mẫu lại và xem thành quả!

Theo: Namkna.blogspot.com