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

Breadcrumb là gì? Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết được mình đang ở trang nào và từ đó có thể di chuyển thuận lợi từ trang này trang khác trong 1 website. Nếu một website có cấu trúc phức tạp mà lại không có Breadcrumb thì người dùng dễ lâm vào tình trạng : ô mình đang ở trang nào đây, mục nào đây nhỉ? @@

Lợi ích của Breadcrumb?
- Giúp người dùng biết được vị trí và di chuyển tốt giữa các trang web
- Giúp Google đánh giá chính xác PR, PA và keyword relation của một trang web.

Các bước tạo BreadCrumb cho blogspot

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!