Tạo thanh &quot;breadcrumb-navigation&quot; cho Blogspot

Trang chủ » Thu Thuat Blog » Thủ thuật Blogger » Bạn đang xem:

Tạo thanh "breadcrumb-navigation" cho Blogspot

Thứ Ba, 14 tháng 4, 2009

Making a "breadcrumb-navigation" in Blogspot

[FD's BlOg] - Nếu bạn nào thường truy cập vào các forum thì sẽ thấy 1 thanh navigation nằm trên cùng, thanh này còn gọi là breadcrumb. Đa số các forum đều có chức năng này. Nó giúp cho người truy cập có thể xem bài viết đang ở mục nào hoặc lớp nào. Và đối với blog ta sẽ dễ dàng truy cập tới các bài viết có cùng nhãn(chủ đề) với thanh "breadcrumb-navigation " này.

Các bạn có thề xem ảnh minh họa bên dưới:

Sau đây là cách thực hiện:
1. Đăng nhập blog
2. Vào bố cục -> chỉnh sửa Code HTML
3. Save template trước khi thực hiện (nên save code template lại, khi bạn cài vô mà thấy không thích thì backup theme cũng lại).
4. Nhấn vô "Mở rộng tiện ích"
5. Chèn đọan code bên dưới lên trên dòng ]]></b:skin>

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

6. Tìm đọan code sau:

<div class='post hentry uncustomized-post-template'>

hoặc
<div class='post hentry'>

hoặc các code khác tương tự

7. Chèn ngày bên dưới nó đọan code sau:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>

Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<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.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

8. Save template.