Cách tạo breadcrumbs cho blogger (blogspot)

Breadcrumbs 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ó.
tao breadcrumbs cho blogger blogspot, breadcrumbs seo Website

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)
DEMO
breadcrumbs cho 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 !

Chuyên mục: , , ,

8 comments:

  1. Bạn ơi. Mình làm thì nó báo thế này

    The widget with id "Blog1" contains at least two b:includable elements with the same id: "breadcrumb". All b:includable elements should have a unique id for a given widget.

    ReplyDelete
  2. Đang thắc mắc không biết tạo cái này như thế nào, vào google thì không biết gọi tên nó là gì. Cảm ơn rất nhiều vì bài viết quá hay!

    ReplyDelete
    Replies
    1. Cảm ơn các bạn đã quan tâm. :) Rất vui khi các bạn làm thành công

      Delete
  3. Blog của mình sử dụng label 3 cấp, mình làm hoài mà không dc. Khi mình nhấn vào một label (link) trên breadcrumbs ở cấp trên bài viết thì không còn đường dẫn đến Breadcrumbs nữa. Bạn giải thích cho mình tại sao lại vậy không Phong Vũ.
    Blog của mình: http://hocmai-ntkhanh.blogspot.com
    Ý mình là vậy nè: trang chủ >> học tập >> ms-office >> ms-word >> bài viết đang xem. Khi nhấn ms-word nó sẽ chỉ còn lại là trang chủ >> học tập >> ms-office >> ms-word thôi.

    ReplyDelete
    Replies
    1. Hi, Blogger label không có phân cấp cha - con bạn nhé. Tức là các label có giá trị ngang nhau.

      Delete
  4. vậy để blog nhận diện nó thì sao hả Vũ. Mình đã thử cách của các bạn nó chỉ hiển thị đến mức bài viết. Nếu nhấn label cấp trước nó thì nó không hiển thị.

    ReplyDelete
    Replies
    1. Nếu muốn hiển thị hết thì bạn bỏ đoạn code màu xanh như hướng dẫn trên nhé. Bên blog cá nhân mình cũng chia sẻ 1 Breadcrumbs tương tự. Link: Cách tạo đường dẫn Blogspot

      Delete