Breadcrumbs (url phân cấp) rất cần thiết cho một trang Web khi trang Web đó có nhiều chuyên mục - đường link khác nhau. Tạo Breacrumbs giúp cho người theo dõi Website của bạn biết được vị trí của mình đang ở đâu, và di chuyển được thuận tiện.
Dạo quanh trang Plugins của Blogger - blogspot tôi thấy được thủ thuật này, và giới thiệu đến các bạn trên blogger. Trước hết chúng ta cùng tìm hiểu về Breacrumbs và lợi ích của nó.

Tạo Url Phân Cấp Cho Blogpsot


1. Breadcrumbs là gì ?
Breadcrumbs là 1 dạng tập hợp các liên kết giúp người xem Website xác định được vị trí của mình trong Site đó:
Ví dụ: Bạn đang ở >> Home >> thu-thuat-blogger >> Tạo breadcrumbs cho blogger (blogspot)
2. Lợi ích của Breadcrumbs
  • Người dùng biết được vị trí của mình trên Site
  • Thuận tiện di chuyển đến các trang mà không phải di chuyển vể trang chủ
  • Breadcrumbs giúp ích cho việc SEO: giảm tỷ lệ thoát của website.
Google cũng đánh giá thông qua Breadcrumbs của site.
Như vậy việc tạo Breadcrumbs rất cần thiết cho việc SEO website, SEO blogger.
3. Hướng dẫn tạo breadcrumbs cho blogger (blogspot)

Bước 1:  Vào Template (Mẫu) > Edit HTML (chỉnh sửa HTML) chọn Expand the Widget Templates (Mở rộng Mẫu tiện ích)
Bước 2: Tìm tới đoạn Code
<b:include data='top' name='status-message'/>
và dán dòng này bên trên nó

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

Bước 3: Tìm dòng

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

Dán đoạn Code dưới đây trước nó (nếu tìm thấy 2 dòng code ở bước 3 thì hãy dán code dưới đây ở cái dòng code thứ 2 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'>Home</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">Home</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'>Home</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'>Home</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'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</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>

Đoạn code màu xanh chỉ hiển thị nhãn cuối cùng của bài viết. Nếu bạn muốn hiển thị tất cả các nhãn của bải viết thì hãy bỏ 2 dòng màu xanh đấy đi.
Bước 4: Tìm tới dòng ]]></b:skin>
Và thêm 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;
}

Các bạn có thể tùy chỉnh CSS theo ý của mì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
!
Chúc các bạn thành công !

Facebook Google twitter
Từ khóa:
Cùng Chuyên Mục
Blogger Comments
Facebook Comments
VietSunBlinds
15:08 24 tháng 8, 2016
Anh ơi, em sửa xong vào giao diện, phần bài viết không hiển thị mà bị trống. Đang cảm thấy hoang mang :)
http://www.vietsunbamboo.com/ anh xem giúp em với nhé!
Bùi Đạt
00:00 25 tháng 8, 2016
Giờ a có việc nên chưa giúp e được. Khoản 3ngay nữa a mới rảnh. NẾu tới đó e k làm được a sẽ giúp cho. :)
Bùi Đạt
15:45 28 tháng 8, 2016
giờ e ib fb a đi. a rảnh rồi hihe
Bùi Đạt
15:49 28 tháng 8, 2016
A thấy nó hiện mà em!

Tin Tức Online
Xem Thêm Tất Cả »
Góc Chia Sẻ
Xem Thêm Tất Cả »
Game - Ứng Dụng Hay Tháng 8
Xem Thêm Tất Cả »
Góc Thư Giản
Xem Thêm Tất Cả »
Bài Viết Ngẫu Nhiên
Copyright © 2016 - All Rights Reserved
Template by Bùi Đạt - Powered by Blogger | SiteMap