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

Ngày Chủ Nhật, 1 tháng 4, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Tạo thanh điều hướng (Breadcrumb) cho bài viết có 2 nhãn
Chúc bạn xem tin tức vui vẻ !!

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;
}

Tìm đến đoạn code tương tự như sau:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

- Trong đoạn code trên  thẻ h3 tùy blog có thể thay đổi là h1 hay h2

Đoạn code này định dạng tiêu đề bài viết ỏ các kiểu trang (trang index, trang item và trang static_page). Việc của bạn cần làm là thay toàn bộ đoạn code nói trên bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<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>  
</b:loop>
<b:else/>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</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

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