Cách tạo liên kết Breadcrumb cho Blogger

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.

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.