[Blogspot] Tạo thanh navbar "breadcrumb" cho mỗi bài viết

(Create Breadcrumb navbar with Label) Với thủ thuật này thanh navbar chỉ hiển thị ở mỗi bài viết, và nó rất đơn giản, chỉ gồm 2 lớp, đó là lớp chính (trang chủ) và lớp phụ (các nhãn). Nó sẽ hiển thị đẹp nhất cho các bài viết có 1 nhãn. Nếu bài viết có nhiều nhãn thì ở lớp phụ (lớp nhãn), sẽ hiển thị bấy nhiêu label, và ngăn cách bằng dấu phẩy.

Các bước thực hiện như sau:


1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit HTML)
4. Chọn "Mở rộng Mẫu Tiện ích" (Expand Widget Template) 5. Chèn đọan code CSS bên dưới lên trên dòng  ]]></b:skin>

#s-nabar {

 text-color : #ffffff;

 font-size : 11px; 

 text-decoration : none;

 font-weight:bold;

 }

#s-nabar:hover {

 text-color : #000000;

 font-size : 12px;  

 font-weight:bold;

 }

6. Tìm đọan code sau:

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

7. Thêm ngay sau nó đoạn code bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
» <a expr:href='data:blog.homepageUrl' id='s-nabar'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><span id='s-nabar'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</b:if>

8. Ghi lại (Save Template) và Bạn đã hoàn thành!

Chúc Bạn thành công!

Theo FanDung blog