2013-05-30

Cách tạo Breadcrumb cho Blogger chi tiết nhất

Bài viết này mình sẽ hướng dẫn các bạn cách thêm đường dẫn Breadcrumb cho Blogger giống như trên trang bài viết mà bạn đang xem.
Với đường dẫn Breadcrumb, khách ghé thăm Blog có thể dễ dàng biết được họ đang xem bài viết trong danh mục nào, và nhanh chóng bấm xem tiếp những bài viết khác trong cùng danh mục đó nếu họ quan tâm.
Tạo Breadcrumb cho Blogger

Demo đường dẫn Breadcrumb cho Blogger
Hướng dẫn thực hiện:
1. Đăng nhập vào Trang tổng quan Blogger.
2. Chọn Mẫu, chọn tiếp Chỉnh sửa HTML.
3. Bấm Ctrl+F để tìm đến đoạn mã:
<b:include data='top' name='status-message'/>
Chèn đoạn mã dưới đây vào trước đoạn mã vừa tìm được:
<b:include data='posts' name='breadcrumb'/>
4. Tiếp tục tìm đoạn mã:
<b:includable id='main' var='top'>
Chèn đoạn mã dưới đây vào trước đoạn mã vừa tìm được:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Trang chủ</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Tất cả bài viết</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Với đoạn mã này, đường dẫn Breadcrumb sẽ chỉ hiển thị duy nhất 1 Nhãn sau cùng trong bài viết. Nếu bạn muốn đường dẫn Breadcrumb hiển thị tất cả các Nhãn có trong bài viết, hãy xóa 2 dòng mình tô đỏ trong đoạn mã trên.
5. Tìm đến mã:
]]></b:skin>
Chèn đoạn mã CSS bên dưới vào trước mã vừa tìm được:
.breadcrumbs {padding:5px 5px 5px 0px;margin:0;font-size:13px;font-weight:bold;line-height: 1.4em;border-bottom:1px double #e6e4e3;}
6. Bấm Lưu mẫu để hoàn thành.

Previous Post
Next Post

Mình là Nhân, là 1 người yêu thích mã nguồn phpBB3. Những bài viết của mình thường xoay quanh chủ đề này.

Hãy comments để chúng ta cùng xây dựng bài viết.

Share
NỘI DUNG PHÙ HỢP

0 nhận xét: