Hướng dẫn tạo Breadcrumbs cho Blogspot

1. Breadcrumbs là gì?

Trong hai bài viết hướng dẫn thêm Breadcrumbs cho WordPress thì mình cũng đã nói về Breadcrumbs rồi. Tuy nhiên trong bài viết này, mình xin được nói lại một lần nữa. Breadcrumbs là một tập hợp những liên kết nhằm giúp cho người đọc có thể biết được mình đang ở đâu trong blog này. Từ đó, họ có thể dễ dàng di chuyển tới các chuyên mục chính chứa bài viết họ đang đọc hay là những trang khác một cách dễ dàng và nhanh chóng.

2. Lợi ích của Breadcrumbs

Lợi ích đầu tiên có lẽ là nó sẽ làm cho trang web của bạn trông chuyên nghiệp hơn, rõ ràng hơn và thân thiện hơn.

Tiếp theo là nó sẽ tạo cho người dùng một cảm giác thoải mái, không có cảm giác bị lạc lõng khi truy cập vào blog của bạn. Từ đó sẽ làm tăng thời gian online trên blog của bạn, tăng tỉ lệ click xem trang mới.

Cuối cùng là Google cũng sẽ dựa vào Breadcrumbs để đánh giá blog của bạn. Bạn phải biết rằng nó rất quan trọng nên Google đã đưa luôn cả Breadcrumbs ra ngoài rang tìm kiếm của mình. Đây là ví dụ để bạn dễ tưởng tượng nhé.

tren-google

3. Các bước thực hiện

Bước 1: Các bạn tìm đến thẻ <b:include data='top' name='status-message'/>, sau đó các bạn hãy thêm vào bên dưới thẻ này đoạn code sau:

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

Bước này là dùng để xác định vị trí hiển thị cho Breadcrumbs của chúng ta.

Bước 2: Các bạn hãy tìm đến thẻ <b:includable id='main' var='top'>, sau đó hãy thêm đoạn code dưới đây vào ngay bên trên thẻ nà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 này dùng để định nghĩa Breadcrumbs của chúng ta.

Bước 3: Thực ra thì chúng có thể không cần thực hiện bước này cũng được. Bởi vì bước nầy chúng ta chỉ là làm đẹp thêm cho Breadcrumbs của chúng ta thôi. Các bạn hãy tìm đến ]]></b:skin>, sau đó bạn hãy thêm CSS cho Breadcrumbs của mình để trông nó đẹp hơn là được. Bạn có thể tham khảo đoạn CSS dưới đây:

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

OK, bây giờ bạn chỉ việc lưu mẫu lại và ra xem kết quả thôi. Chúc bạn thành công! 

Tags:

Đọc nhiều tuần qua:

14 thoughts on “Hướng dẫn tạo Breadcrumbs cho Blogspot

  1. Thang Jacky says:

    Mình làm theo nhưng sao nó không nằm trên một hàng nhỉ? Nó cứ bị nhảy xuốn dòng ấy 🙁

  2. Đôi Guốc Mộc says:
    Chào Anh
    Em chưa thành tạo lắm bên blog, cho em hoi bước 1 tìm đoạn :
    Nó nằm trong MAUXAX – CHINH SUA HTML phải không anh
    Em tim mai ma không thấy
    Chào bạn
    Bạn đã chắc rằng đã nhập đúng là chưa nhỉ?
  3. jvinhblog says:

    Cái breadcrumbs trên blogspot làm mình tức điên luôn, nó hiện theo thứ tự chữ cái nên nhìn rất lộn xộn chẳng phân biệt mục lớn bé gì cả. Bạn đầu định làm mấy cái label tiếng Việt ko dấu có gạch ngang để cái link nhìn cho đẹp và chuẩn seo nhưng cái breadcrumbs thì nhìn kinh quá nên bắt buộc hi sinh cái đường link, đúng là blogspot nhiều cái vô duyên khó chiệu thiệt.

  4. toyota tan cang says:

    Chào bạn,
    Mình cũng làm tương tự nhưng không hiện breadcrumbs trên google, nó hiện full url trên google khi mình search từ khoá. Bạn hướng dẫn giùm mình nhé.

    Cám ơn bạn !!!

  5. jvinhblog says:

    Mình mới đổi template nên giờ phải thêm lại breakcrumbs nhưng làm hoài chẳng thấy gì hết cuối cùng phát hiện thằng thiết kế nó ẩn đi rồi vì nhìn có vẻ ko hợp với template này, nhìn xấu kinh luôn.

  6. Lê Tú says:

    Vậy khi lấy đường dẫn mình chỉ muốn nó lấy một label cố định thôi thì làm sao vậy ad. chứ mặc định mình có sử dụng cái theme của http://www.hontapblog.tk/ mà mình chèn nhiều label thì Breadcrumbs nhìn rất xấu
    VD: cái breadcrumbs này http://svnnit.blogspot.com/2016/09/lap-trinh-php-huong-dan-cai-at.html
    mình muốn nó chỉ hiển thị Home -> lập trình php -> tên bài viết. thôi thì làm sao?
    Cảm ơn Ad nhiều.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *