Có rất nhiều bạn hỏi mình làm sao để làm được thanh breadcrumb cho blogger như Tinhoc24h 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à tinhoc24h đang sử dụng và được index lên google như hình minh họa sau.
Hướng dẫn tạo breadcrumb for blogger nâng cao
Để 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 == "item"'>
<!-- breadcrumb for the post page by tinhoc24h -->
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span style='padding-left: 15px; background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKymfCtRpy8vNUjuMXUECHvAR8bH-o5T7ubIuvk7TAcH-WQsUAEBhE_9AGiG6B_4JlwbGG_zAQEUXALLsP1M8Jch_jLlba943vW2l3SOPQ34RG_5ehPeZXahD5uUjB2IqGlTHuvZRd8wI/s1600/home-icon.gif)
left no-repeat;' typeof='v:Breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">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 == "SoftWare"'>
» <span typeof="v:Breadcrumb"><a href='http://www.tinhoc24h.info/search/label/Software' rel="v:url" property="v:title">Software</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != "SoftWare"'>
» <span typeof="v:Breadcrumb"><a
expr:href='data:label.url' rel="v:url" property="v:title">
<data:label.name/></a></span>
<b:else/>
</b:if>
</b:loop>
<b:else/>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span typeof="v:Breadcrumb"><data:post.title/></span>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- 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/AVvXsEhKymfCtRpy8vNUjuMXUECHvAR8bH-o5T7ubIuvk7TAcH-WQsUAEBhE_9AGiG6B_4JlwbGG_zAQEUXALLsP1M8Jch_jLlba943vW2l3SOPQ34RG_5ehPeZXahD5uUjB2IqGlTHuvZRd8wI/s1600/home-icon.gif)
left no-repeat;'>Home</a> » Archives for
<data:blog.pageName/>
</span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl' style='padding-left: 15px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKymfCtRpy8vNUjuMXUECHvAR8bH-o5T7ubIuvk7TAcH-WQsUAEBhE_9AGiG6B_4JlwbGG_zAQEUXALLsP1M8Jch_jLlba943vW2l3SOPQ34RG_5ehPeZXahD5uUjB2IqGlTHuvZRd8wI/s1600/home-icon.gif)
left no-repeat;'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl' style='padding-left: 15px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKymfCtRpy8vNUjuMXUECHvAR8bH-o5T7ubIuvk7TAcH-WQsUAEBhE_9AGiG6B_4JlwbGG_zAQEUXALLsP1M8Jch_jLlba943vW2l3SOPQ34RG_5ehPeZXahD5uUjB2IqGlTHuvZRd8wI/s1600/home-icon.gif)
left no-repeat;'>Home</a> » Posts filed under
<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 xanh ở trên.
- http://www.tinhoc24h.info/search/label/Software là đường dẫn của label muốn hiển thị trước.
- Software là label được hiển thị trước.
Để thêm nhiều Label bạn chỉ cần copy đoạn code màu xanh dán vào sau đoạn code màu xanh 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 tinhoc24h*/
.breadcrumbs {
margin: 0 0 3px;
border: 1px solid #DDD;
padding: 6px;
background: white
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2trrPOW3JKbKFaCTqQNdfNabU5wywRQKiWAo56IdhLK5y5LYExc52tvMPxGyQvITiAZ3uKwWPO5busG83MZXsB8vThfH9GDBaFt_uSqE3o7ROhkRci_C3Ny5BMJtTDSwePuDmgjSAUyE/s1600/homepagetop.gif)
no-repeat top;
font-size: 11px;
width: 598px;
height: 15px;
}.breadcrumbs div div {
float: left;
margin-left: 5px;
}
/*end – breadcrumb by tinhoc24h*/
- 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.