Hướng dẫn tạo Breadcrumbs cho Blogspot đơn giản

Hướng dẫn tạo breadcumbs cho blogspot giúp đưa trang web của bạn lên TOP 1 Google. Breadcrumbs là một trong những tiêu chí mà Google đưa ra để xếp thứ hạng blog của bạn trên Google tìm kiếm. Cách tạo Breadcrumbs cho Blogspot, Breadcrumb là tập hợp các đường link phân cấp giúp khách truy cập biết mình đang ở vị trí nào của blog.

Breadcrumbs là một thành phần rất quan trọng trong hệ thống navigation của website mà gần như vào bất cứ website nào bạn cũng thấy sự hiện diện của nó.

Đây chính là Breadcrumbs mà Blog của mình đang sử dụng

Chúng ta cùng thực hiện Cách tạo breadcrums cho blogspot nhé.

Bước 1: Bạn đăng nhập vào blog -> Thiết kế -> Mẫu -> Chỉnh sửa HTML -> Mở rộng tiện ích

Bước 2: Tìm đến đoạn code bên dưới:

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

Và thay thế đoạn code trên thành:

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

Bước 3: Tìm đến đoạn code sau đây:

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

Và thay thế đoạn code trên thành:

<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 -->
<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 == "true"'> »
 <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
 </b:if>
 </b:loop>
 <b:else/>
 »Unlabelled
 </b:if>
 » <span><data:post.title/></span>
 </b:loop>
 </span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
 <span class='post-labels'>
 <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
 </span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
 <span class='post-labels'>
 <b:if cond='data:blog.pageName == ""'>
 <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
 <b:else/>     
 <a expr:href='data:blog.homepageUrl'>Home</a> » 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: Các bạn chèn đoạn code sau vào trước thẻ đóng ]]</b:skin>

.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 5: Lưu Template Blogspot lại và hưởng thụ thành quả.

Tags: