1. Breadcrumbs là gì?
Breadcrumbs là một tập hợp những liên kết nhằm giúp cho người đọc có thể biết được ình đang ở đâu trong blog này. Từ đó, họ có thể dễ dàng di chuyển tới các chuyên mục chính chứa bài viết họ đang đọc hay là những trang khác một cách dễ dàng và nhanh chóng.
2. Lợi ích của Breadcrumbs
Lợi ích đầu tiên có lẽ là nó sẽ làm cho trang web của bạn trông chuyên nghiệp hơn, rõ ràng hơn và thân thiện hơn.Tiếp theo là nó sẽ tạo cho người dùng một cảm giác thoải mái, không có cảm giác bị lạc lõng khi truy cập vào blog của bạn. Từ đó sẽ làm tăng thời gian online trên blog của bạn, tăng tỉ lệ click xem trang mới.
Cuối cùng là Google cũng sẽ dựa vào Breadcrumbs để đánh giá blog của bạn. Bạn phải biết rằng nó rất quan trọng nên Google đã đưa luôn cả Breadcrumbs ra ngoài rang tìm kiếm của mình. Đây là ví dụ để bạn dễ tưởng tượng nhé.
3. Các bước thực hiện
Bước 1: Các bạn tìm đến thẻ <b:include data='top' name='status-message'/>, sau đó các bạn hãy thêm vào bên dưới thẻ này đoạn code sau:<b:include data='posts' name='breadcrumb'/>Bước này là dùng để xác định vị trí hiển thị cho Breadcrumbs của chúng ta.
Bước 2: Các bạn hãy tìm đến thẻ <b:includable id='main' var='top'>, sau đó hãy thêm đoạn code dưới đây vào ngay bên trên thẻ này nhé!
<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>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Bước này dùng để định nghĩa Breadcrumbs của chúng ta.
Bước 3: Thực ra thì chúng có thể không cần thực hiện bước này cũng được. Bởi vì bước nầy chúng ta chỉ là làm đẹp thêm cho Breadcrumbs của chúng ta thôi. Các bạn hãy tìm đến ]]></b:skin>, sau đó bạn hãy thêm CSS cho Breadcrumbs của mình để trông nó đẹp hơn là được. Bạn có thể tham khảo đoạn CSS dưới đây:
.breadcrumbs {OK, bây giờ bnaj chỉ việc lưu mẫu lại và ra xem kết quả thôi. Chúc bạn thành công!
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}