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ó.
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.
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)DEMO
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
No comments :