Home » Thủ thuật blog
Tạo thanh navbar "breadcrumb" đơn giản cho mỗi bài viết
Thứ Sáu, 15 tháng 5, 2009
[FD's BlOg] - Đây là một thủ thuật đơn giản, ứng dụng từ các label, mình vừa nghĩ ra, nên post lên cho mọi người xem luôn. Thủ thuật này đơn giản hơn nhiều so với thủ thuật trước mà mình đã đăng.(xem thêm ở đây)
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.
Xem hình mình họa kết quả:

1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code 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;
}
- ở đây mình chỉ áp dụng thủ thuật đơn giản là thay đổi màu chữ và phóng to chữ cho thanh breadcrumb, các bạn muốn thêm hiệu ứng khác thì có thể chèn thêm vào đọan code CSS đó.
6. Tìm đọan code sau:
<b:includable id='post' var='post'>
7. Thêm ngay sau nó đọan code bên dưới:
<b:if cond='data:blog.pageType == "item"'>
» <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 != "true"'>,</b:if>
</b:loop>
</b:if>
</b:if>
8. Save temolate lại là xong.
Chúc các bạn thành công.

- Hiển thị nhãn (label) phong cách màu tím cực nổi cho blogspot [V3]
- Thêm Google translate - dịch đa ngôn ngữ cho Blogspot
- Cài đặt theo dõi Google analytics cho blogspot
- Cách tạo khung Form đăng nhập cho blogspot
- Thêm chia sẻ Like và share bài viết cho blogspot [trên trang itviet360]
- Thêm nút theo dõi (Follow) cho blogspot
- Feedburner Google và cách lấy tùy chỉnh cho blogspot
- Tiện ích Popular Posts - Bài xem nhiều với CSS3
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
Comments[ 0 ]
Đăng nhận xét