Hướng dẫn chi tiết cách tạo Breadcrumbs cho Blogspot

Chi tiết cách tạo Breadcrumbs cho Blogspot.
Cùng với nhiều tính năng mà một website cần có, thì breadcrumb luôn luôn là sự lựa chọn cần thiết cho việc xây dựng trang web thân thiện hơn với người dùng. Vì nó giúp khách viếng thăm blog của bạn dễ dàng điều hướng đến nội dung mà họ muốn tới. . Hôm nay mình sẽ giới thiệu thêm cho việc hiển thị breadcrumb trên blog của các bạn, từ đó các bạn sẽ có thêm nhiều lựa chọn hơn cho blog của mình.

Để tạo Breadcrumbs cho Blogspot bạn cần thực hiện qua các bước sau đây :
Bước 1: Vào Template (Mẫu) => Edit HTML (chỉnh sửa HTML) Tìm tới dòng ]]></b:skin> (dùng tổ hợp phím Ctrl + F để tìm cho nhanh nhé)
Và thêm Code dưới đây ngay trên nó

#Breadcrumbs{color: #000;font-size: 14px;margin-bottom:15px;padding:10px;background:#FFCC00;border:2px solid #BBBBBB; font-weight:bold; text-decoration:none; }

#Breadcrumbs a{color: #000,font-size: 14px}

#Breadcrumbs div{float:left;}

Các bạn có thể tùy chỉnh CSS theo ý của mình nhé
(các bạn có thể tải toàn bộ code của blog về để sửa cho dễ cũng được bằng cách Template (Mẫu) => Sao lưu/Khôi phục => Tải xuống mẫu hoàn chỉnh ,sau khi thực hiện xong các bước thì các bạn up lên là Ok)
Bước 2: Các bạn tìm kiếm đoạn code sau : <b:includable id='post' var='post'> và dán đoạn code dưới đây dưới nó :
<b:if cond='data:blog.pageType == "item"'>
<div id='Breadcrumbs'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrum'>
<a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'>
<span itemprop='title'>
Tên blog của bạn
</span>
</a>
»
</div>
<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 == "true"'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' itemprop='url' rel='tag'>
<span itemprop='title'>
<data:label.name/>
</span>
</a>
»
</div>
</b:if>
</b:loop>
<span>
<data:post.title/>
</span>
</b:if>
</b:loop>
</div>
</b:if>
Thay phần chữ màu đỏ "Tên blog của bạn" thành tên bạn cần thay nhé.
Sau đó lưu mẫu lại, vào một bài viết nào đó để thấy kết quả hiển thị của Breadcrumbs !
Bước 3: Để có cơ hội hiển thị Breadcrumbs cho Blogspot trên kết quả tìm kiếm các bạn làm như sau:
Đăng nhập Blog => Cài đặt => Tùy chọn tìm kiếm => Robots.txt tùy chỉnh (bật nó lên) rồi thêm đoạn mã sau vào :
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Allow: /search
Allow: /
Sitemap: http://tenblogcuaban.blogspot.com/sitemap.xml

Phần sitemap đổi link http://tenblogcuaban.blogspot.com thành link blog của bạn nhé
Chúc các bạn thành công !