Hướng dẫn tạo Breadcrumb cho Blogger

Breadcrumb là gì

Breadcrumb là một menu gồm các đường link phân cấp giúp người đọc định vị được vị trí của mình trên một trang web. Breadcrumb trở nên cực kì hữu ích nếu Blog của bạn có nhiều label khác nhau

Breadcrumb dùng để làm gì

Như đã nói ở trên, Breadcrumb sẽ giúp người đọc biết được mình đang ở vị trí nào, mục vào của Blog. Đồng thời, nó cũng giúp độc giả dễ dàng di chuyển đến các label chứa bài viết học đang đọc hoặc các trang khác trên Blog, từ đó tăng tỉ lệ click trên Blog

Bên cạnh đó, Breadcrumb cũng rất quan trọng trong việc SEO cho Blogger. Nó góp phần xây dựng hệ thống backlink nội bộ và tỉ lệ chuyển đổi giữa các trang trên Blog. Chính vì tầm quan trọng này mà Google hiển thị cả Breadcrumb trên kết quả tìm kiếm

Hướng dẫn tạo Breadcrumb cho Blogger

Bước 1 : Các bạn tìm kiếm đoạn code <b:include data='top' name='status-message'/> trong template của mình sau đó thêm vào bên dưới nó đoạn code sau

<b:include data='posts' name='breadcrumb'/>

Như vậy,Breadcrumb sẽ hiển thị phía trên bài viết ( giống như trên Blog của mình )

Bước 2 : Tiếp tục tìm kiếm đoạn code <b:includable id='main' var='top'> và thêm vào bên trên nó đoạn code sau

<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"'>

<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"'>

<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>

» sẽ được dùng để ngăn cách giữa các đường link, bạn có thể thay thế bằng dấu - hoặc / túy ý thích

Đến đây, bạn đã tạo Breadcrumb cho Blog thành công, nếu như muốn làm đẹp thêm một chút thì tiếp tục bước 3.

Bước 3 : Các bạn thêm vào phía trên ]]></b:skin> đoạn CSS sau

.breadcrumbs {
margin-bottom:15px;
}
.breadcrumbs a {
padding: 4px 12px;
border: 1px solid #dđ;
border-radius: 30px;
text-decoration:none;
transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease 0s;
}
.breadcrumbs a:hover {
padding:4px 20px;
}