Tạo thanh điều hướng Breadcrumb chuẩn cho blogger

Với mỗi blogger việc tạo các đường dẫn cũng như điều hướng cho blog là việc tối quan trọng nó vừa giúp tạo sự liên kết giữa các nội dung vừa giúp người đọc định hướng mình đang đọc bài viết nào chuyên mục gì  v.vv...

Thứ 2 vấn đề tạo thanh điều hướng Breadcrumb còn giúp google đánh giá website blog mình mạch lạc rõ ràng và giúp index bài viết tốt hơn. Thực tế khi có điều hướng thì khi hiển thị trên kết quả tìm kiếm sẽ như hình dưới giúp kích thích người xem truy cập web.

Và cũng chính vì có nó mà kết quả blog của bạn lại xếp vị trí đó trên kết quả tìm kiếm đó một phần do bạn điều hướng website tốt với thanh điều hướng Breadcrumb

Kết quả hiển thị Breadcrumb trên công cụ tìm kiếm

Vậy tạo nó có khó không và chèn nó vào blogger thế nào để hiển thị đúng? Dưới đây mình sẽ hướng dẫn các bạn tạo nó và chèn vào blogger.

Tạo thuộc tính Brecrumb cho tiện ích  bài viết Blog1

Tìm tiện ích Blog1  tiện ích Blog1 bạn chèn đoạn mã sau trước thẻ <b:includable id='main' var='top'> của tiện ích <b:widget id='Blog1' ..................>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> / <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> / <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=5&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> / </b:if> </b:loop>/ <span><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> / <span>Uncategories</span> / <span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> / <span>Archive for <data:blog.pageName/></span></div>
<b:else/><b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> / <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'><div class='breadcrumbs'><b:if cond='data:blog.pageName == &quot;&quot;'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> / <span>All post</span>
<b:else/><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> / <span><data:blog.pageName/></span></b:if></div></b:if></b:if></b:if></b:if></b:if></b:if></b:includable>

Sau khi cấu hình xong thuộc tính Breadcrumb cho blog bước tiếp theo là hiển thị nó trên blog

Chèn Breadcrumb vào blogger

Các bạn tìm đến thuộc tính  <b:include data='posts' name='breadcrumb'/> chèn đoạn mã sau ngay sau thuộc tính trên nhé.

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

Bạn cũng chỉnh lại css chút cho phù hợp với blog của bạn nhé.

Chúc thành công