Thanh điều hướng (Breadcrumb) cho bài viết có 2 nhãn

Breadcrumb là tiện ích được sử dụng khá phổ biến, đặc biệt là các trang Web/Blog vận hành trên nền tảng Wordpress. Cùng với tiện ích “Page Navigation – phân trang cho Blogspot“, cả hai góp phần điều hướng tốt hơn cho Web/Blog của bạn.

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 nhưng nhược điểm của nó là chỉ chạy tốt với các bài viết có một nhãn. nhưng với các bài viết 2 nhãn thì không chạy được hôm nay namkna sẽ hướng dẫn các bạn cách khắc phục nó.

Demo for Post

Cách thực hiện:

1. Đăng nhập Blogger
2. Vào Thiết Kế (Design)
3. Chọn tab Chỉnh Sửa HTML (Edit HTML)
4. Chọn Mở Rộng tiện ích mẫu (Expand Widget Templates). 
5. Thêm đoạn code sau trước thẻ  ]]></b:skin> .

.breadcrumbs{
float:left;
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:15px;font-weight:bold;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

     6. Tìm đến đoạn code sau:

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

     7. 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 id='Breadcrumbs'><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
             <b:loop values='data:post.labels' var='label'>
               <b:if cond='data:label.name == &quot;Blogspot-tips&quot;'>
&#187;<a href='/search/label/Blogspot-tips?max-results=5'>Blogspot-tips</a>
                 <b:loop values='data:post.labels' var='label'>
                   <b:if cond='data:label.name == &quot;Blogspot-tips&quot;'>
                   <b:else/>
&#187;<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag'> <data:label.name/></a>
                   </b:if>
                 </b:loop>
               <b:else/>
               </b:if>
<!-- Nếu muốn thêm thì bạn chỉ cần copy đoạn code màu xanh trên dán tiếp vào đây -->
             </b:loop>
&#187; <span><data:post.title/></span>
</div>
</b:if>

Trong đó:

• Thay Blogspot-tips thành nhãn số 1 của bạn.
• Nếu blog của bạn có nhiều nhãn lớn bạn chỉ cần Copy phần mau xanh vào sau nó là ok.
• Nếu blog của bạn chỉ sử dụng 1 nhãn cho mỗi bài viết thì bạn tham khảo các khác Tại đây

Lưu mẫu lại.

Chúc thành công!