Cách tạo đường dẫn Breadcrumbs cho Blogspot (Blogger)

Một yêu cầu khá muộn ( >23h ) từ 1 cô gái có thắc mắc về breadcrumbs và hướng dẫn cách tạo breadcrumbs cho Blogspot của mình. Cũng cảm ơn bạn đã quan tâm và gửi yêu cầu bài viết tới Blog Vũ Văn Phong, như đã hứa với bạn là sẽ hướng dẫn và gửi bạn vào sáng sớm :)
Trước hết chúng ta cần hiểu sơ qua về breadcrumbs và những lợi ích khi thêm breadcrumbs vào cho Website, Blog của bạn.

• Breadcrumbs (ổ bánh mỳ): là 1 đường dẫn giúp cho người xem Website, blog biết được rằng họ đang đứng tại vị trí nào của Blog đó. Breadcrumbs làm cho người xem Web, Blog của bạn hài lòng hơn vì nó làm rành mạch, rõ ràng vị trí của người đang xem và dễ dàng trở lại với chuyên mục trước đó.
• Lợi ích SEO của breadcrumbs: Với breadcrumbs sẽ làm hạn chế tỷ lệ người xem thoát khỏi blog của bạn. Hơn nữa Google cũng đánh giá cao thông qua breadcrumbs của Blog.  

Hướng dẫn cách tạo đường dẫn Breadcrumbs cho Blogspot

Demo trực tiếp tại bài viết: Các bệnh ngoài da hay gặp nhất
Bước 1: Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Bước 2: Tìm tới đoạn code ]]></b:skin> và dán code dưới đây ngay trên nó

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Bước 3: Bạn hãy tìm tới đoạn Code

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

và dán dòng dưới đây ngay bên trên nó

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

Bước 4: Chúng ta tìm tới dòng

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

Và dán code dưới đây ngay trên nó.
* Lưu ý: Nếu tìm thấy 2 dòng ở bước 4 thì bạn dán code dưới đây trên dòng thứ 2 mà đã tìm thấy nhé.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Trang chủ</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Bước 5: Lưu lại mẫu và vào 1 bài viết nào đó xem kết quả bạn nhé !
- Nếu bạn gặp thắc mắc gì trong bài viết hướng dẫn tạo Breadcrumbs cho Blogspot thì để lại comments bên dưới nhé.
Chúc các bạn vui vẻ !