Tạo Breadcrumb cho Blogspot

 Breadcrumb là một tiện ích (tiện ích hay cái gì đó thì mình cũng không rõ :D) khá quan trọng. Nó không chỉ giúp độc giả biết được mình ở đâu trong blog của bạn mà còn tăng khả năng SEO cho blog của bạn. Nếu như Wordpress có Plugin hỗ trợ để làm việc này thì với khả năng tùy biến "siêu việt" của Blogger thì chúng ta hoàn toàn có khả năng tạo riêng cho mình một thanh Breadcrumb chuẩn SEO :)))

DEMO

 Bây giờ chúng ta cùng bắt tay vào việc thôi:
Các bạn lần lượt làm theo các bước sau :
Bước 1 : Đăng nhập vào Blogger : Chọn  Mẫu >>  Chỉnh sửa HTML 
Bước 2 : Tìm đoạn code sau :
<b:include data='top' name='status-message'/>
 Và thay thế bởi đoạn code sau:
<b:include data='posts' name='breadcrumb'/>
Bước 3: Bây giờ các bạn tìm đoạn code sau:

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

Và thay thế bằng:
<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 -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<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.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

<b:else/>

&#187; Unlabelled

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

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

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

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>

</span>

</p>

<b:else/>

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

<p class='breadcrumbs'>

<span class='post-labels'>

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

<a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts

<b:else/>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>

</b:if>

</span>

</p>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>
<b:includable id='main' var='top'>Bước 4 : Bây giờ chúng ta sẽ tạo những hiệu ứng cho Breadcumbs bằng CSS
Các bạn chèn code sau trước thẻ    ]]></b:skin> 

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:2px solid #e6e4e3;}
.breadcrumbs :hover{
border-bottom:2px dashed #e6e4e3;
background:#f1f1f1;
}

Lưu ý: Nếu bạn không rành về cấu trúc blog của bạn thì nên thay thế tất cả các code bạn tìm thấy ở bước 1.

Chúc thành công!