Breadcrumb chuyên nghiệp cho Blogger

Breadcrumb là gì? Breadcrumb được hiểu như là một thanh điều hướng của website giúp bạn biết được chính xác bạn đang ở vị trí nào của website hay bài viết bạn đang xem đang nằm ở vị trí nào.

Có rất nhiều bạn hỏi mình làm sao để làm được thanh breadcrumb cho blogger như vncongnghe.com bao gồm hiển thị nhiều label và sắp xếp theo một trình tự hợp lý. Đáp lại những mong đợi của bạn mình sẽ chia sẽ với các bạn cách tạo một Breadcrumb mà vncongnghe.com đang sử dụng và được index lên google như hình minh họa sau.

HƯỚNG DẪN TẠO BREADCRUMB NÂNG CAO CHO BLOGGER:

Để tạo được breadcrumb for blogger được tùy chỉnh nâng cao các bạn thực hiện thao các hướng dẫn sau đây và chỉnh sửa lại code cho phù hợp với website của bạn ở bước 3(*).

Bước 1: Login Blogger -> Templates -> Expand the Widget Templates.

Bước 2: Tìm đến dòng code như bên dưới

<b:include data='top' name='status-message'/>

và dán vào trước nó dòng code sau

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

Bước 3: Tìm đến dòng code sau

<b:includable id='main' var='top'>

Nếu có 2 đoạn code như trên thì bạn tìm đến đoạn code thứ 2. và thêm vào trước nó đoạn code sau đây. 

Lưu ý: chỉnh sửa lại code cho phù hợp với site của bạn. (*)

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page by http://www.vncongnghe.com/ -->

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

<span style='padding-left: 15px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6zNkIpbYIO-1GLnhjRg4xzbbDEjn_evACVp_jAB4X73gT_nrK9awRIe9J6yodaPeEspDCFq1Q38zUT5X7y0435H4-Lzjc47avC01K58u6Yc2iR6k2XI-4VImHPTfj_sl190wMxHzzpcc/s1600/home-icon.gif)  left no-repeat;' typeof='v:Breadcrumb'>

<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == &quot;Tin-tuc&quot;'>

&#187; <span typeof='v:Breadcrumb'><a href='http://www.vncongnghe.com/search/label/Tin-tuc?max-results=20/' property='v:title' rel='v:url'>Tin-tuc</a></span>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name != &quot;Tin-tuc&quot;'>

&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'> <data:label.name/></a></span>

<b:else/>

</b:if>

</b:loop>

<b:else/>

</b:if>

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

&#187; <span typeof='v:Breadcrumb'/>

</b:loop>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

<span typeof='v:Breadcrumb'>

<a expr:href='data:blog.homepageUrl' style='padding-left: 15px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6zNkIpbYIO-1GLnhjRg4xzbbDEjn_evACVp_jAB4X73gT_nrK9awRIe9J6yodaPeEspDCFq1Q38zUT5X7y0435H4-Lzjc47avC01K58u6Yc2iR6k2XI-4VImHPTfj_sl190wMxHzzpcc/s1600/home-icon.gif)  left no-repeat;'>Home</a> &#187; <data:blog.pageName/>

</span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

<span typeof='v:Breadcrumb'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

<a expr:href='data:blog.homepageUrl' style='padding-left: 15px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6zNkIpbYIO-1GLnhjRg4xzbbDEjn_evACVp_jAB4X73gT_nrK9awRIe9J6yodaPeEspDCFq1Q38zUT5X7y0435H4-Lzjc47avC01K58u6Yc2iR6k2XI-4VImHPTfj_sl190wMxHzzpcc/s1600/home-icon.gif)  left no-repeat;'>Home</a> &#187; 

<b:else/>

<a expr:href='data:blog.homepageUrl' style='padding-left: 15px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6zNkIpbYIO-1GLnhjRg4xzbbDEjn_evACVp_jAB4X73gT_nrK9awRIe9J6yodaPeEspDCFq1Q38zUT5X7y0435H4-Lzjc47avC01K58u6Yc2iR6k2XI-4VImHPTfj_sl190wMxHzzpcc/s1600/home-icon.gif)  left no-repeat;'>Home</a> &#187; <data:blog.pageName/>

</b:if>

</span>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

Hướng dẫn đoạn code màu đỏ ở trên.

http://www.vncongnghe.com/search/label/Tin-tuc?max-results=20/ là đường dẫn của label muốn hiển thị trước. Tin-tuc là label được hiển thị trước.

Như vậy khi áp dụng breadcrumb sẽ có dạng như sau: Home » Tin-tuc » Tên Label 1 » Tên Label 2

Để thêm nhiều Label bạn chỉ cần copy đoạn code màu đỏ dán vào sau đoạn code màu đỏ này và chỉnh sửa lại 2 thiết lập trên là OK.

Bước 4: tìm đến ]]></b:skin> và thêm vào trước nó đoạn CSS sau.

/*start - breadcrumb by http://www.vncongnghe.com/*/
.breadcrumbs {
margin: 0 0 3px;
border: 1px solid #DDD;
padding: 6px;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ABP0dArkvjbbrgmOzoUwYHeNYe85RIV8k3k9dqO4B_pYcIfHRaGSSI_cYb9vhZca1KbavV2es9f48W62KW_BmyzYdixwhtEDrkpDFj0snF39OlDFMQDna6A6YWKlkzZovA4b9zCT6Gc/s1600/homepagetop.gif) no-repeat top;
font-size: 11px;
width: 598px;
height: 15px;
}

.breadcrumbs div div {
float: left;
margin-left: 5px;
}
/*end – breadcrumb by http://www.vncongnghe.com/*/

- Chỉnh sửa width 598px; cho phù hợp với độ rộng khung bài viết của bạn.

Bước 5: Lưu template và hoàn thành.

Các bài đăng tiếp theo sẽ được duyệt và hiển thị breadcrumb ngay trên Google và mất khoảng 2 ngày để Google index lại các bài viết trước của bạn có Breadcrumb này.