Thanh điều hướng breadcrumbs điển hình trông như thế này:
Trang Chủ » Thủ thuật Blogspot » Tạo đường dẫn breadcrumb cho Blogger/Blogspot
Bước 1:
- Lưu Template hiện tại của bạn.
- Đăng nhập >> Thiết kế (Design) >> Chỉnh sửa HTML( Edit HTML) >> Đánh dấu chọn Mở rộng Mẫu tiện ích(Expand Widget Template).
Bước 2: Thêm CSS:
Tìm ]]></b:skin> (Ctrl + F >> ]]>) và thêm ngay trước nó đoạn mã:
.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3; }
Bước 3:
- Tìm đoạn mã (Ctrl + F để tìm ): <b:include data='top' name='status-message'/>
Thêm ngay dưới nó đoạn mã :<b:include data='posts' name='breadcrumb'/>
- Tìm tiếp :
<b:includable id='main' var='top'>
Và thêm trước nó đoạn mã:
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- khong hien thi breadcrumb o trang chu --> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb cho bai dang --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl' rel='tag'>Trang Chủ</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> </b:loop> <b:else/> </b:if> » <span><data:post.title/></span> </b:loop> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb cho nhan, trang tim kiem, luu tru blog.. --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Trang Chủ</a> » <data:blog.pageName/> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "index"'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == ""'> <a expr:href='data:blog.homepageUrl'>Trang Chủ</a> » <b:else/> <a expr:href='data:blog.homepageUrl'>Trang Chủ</a> » <data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable>
Bấm chọn LƯU TEMPLATE, xem thành quả bằng cách bấm vào bài viết bất kì thôi ^^!Lưu ý nếu bạn sử dụng nhiều nhãn (label) cho một bài viết thì breadcrumbs chỉ hiển thị nhãn cuối cùng mà bạn đã thêm vào
Và thêm trước nó đoạn mã:
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- khong hien thi breadcrumb o trang chu --> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb cho bai dang --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl' rel='tag'>Trang Chủ</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> </b:loop> <b:else/> </b:if> » <span><data:post.title/></span> </b:loop> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb cho nhan, trang tim kiem, luu tru blog.. --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Trang Chủ</a> » <data:blog.pageName/> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "index"'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == ""'> <a expr:href='data:blog.homepageUrl'>Trang Chủ</a> » <b:else/> <a expr:href='data:blog.homepageUrl'>Trang Chủ</a> » <data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable>
Bấm chọn LƯU TEMPLATE, xem thành quả bằng cách bấm vào bài viết bất kì thôi ^^!Lưu ý nếu bạn sử dụng nhiều nhãn (label) cho một bài viết thì breadcrumbs chỉ hiển thị nhãn cuối cùng mà bạn đã thêm vào
0 nhận xét: