Cách tạo Breadcrumb cho Blogger - Add Breadcrumb for Blogspot

Breadcrumb: bạn tạm hiểu nó là thanh điều hướng, giúp người xem Website, Blog của mình biết được mình đang ở vị trí nào và quay lại vị trí trước đó ngay trên thao tác với nội dung Website.
- Bài viết này Thanh niên Bình Định hướng dẫn bạn cách tạo Breadcrumb cho Blogger - Add Breadcrumb for Blogspot
Cách tạo Breadcrumb cho Blogger - Add Breadcrumb for Blogspot
Demo trực tiếp tại Blog: Dịch vụ bảo vệ

Hướng dẫn: Cách tạo Breadcrumb cho Blogger - Add Breadcrumb for Blogspot

Bước 1: Đăng nhập vào bảng điều khiển Blogger
- Lựa chọn mẫu (template) -> Chỉnh sửa HTML (Edit HTML)
- Ctrl + F tìm tới code
<b:include data='top' name='status-message'/>
và thay thế bằng:

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

- tiếp theo tìm tới đoạn code
<b:includable id=’main’ var=’top’>
và thay thế bằng

<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ước 2: tìm tới ]]></b:skin>
và dán code CSS 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: Lưu mẫu lại và vào 1 bài viết trên blog của bạn xem kết quả
- Nếu bạn gặp vấn đề gì trong việc tạo Breadcrumb cho Blogger thì hãy để lại comment nhé.
Chúc các bạn vui vẻ !
Cách tạo Breadcrumb cho Blogger - Add Breadcrumb for Blogspot

Cách tạo Breadcrumb cho Blogger - Add Breadcrumb for Blogspot

Nếu bạn thấy hay thì hãy để khích lệ tinh thần chia sẻ của tác giả BV "Cách tạo Breadcrumb cho Blogger - Add Breadcrumb for Blogspot"

1 comment:

  1. Việc tạo Breadcrumb sẽ giúp cho người xem dễ dàng theo dõi website và giúp cho việc quản lý các trang nội dung dễ dàng hơn.
    Cám ơn bạn đã chia sẻ bài viết hữu ích này.

    ______

    dich vu bao ve tphcm

    ReplyDelete

Copyright © 2014 Thanh niên Bình Định - Supported by: IT Việt