(Thanh điều hướng Breadcrumb trong Blogger) Thanh điều hướng là tiện ích thông dụng và rất hữu ích giúp người dùng có thể theo dõi vị trí của mình cũng như biết mình đang ở đâu trên Website. Thanh điều hướng có thể hiểu giống như việc để lại dấu vết trên quãng đường bạn đã đi qua. Chính vì vậy, bạn có thể dễ dàng quay lại một vị trí nào đó trên quãng đường này. Thanh điều hướng giúp hiển thị đường dẫn chuyên mục bài viết trên các Website tin tức hay lĩnh vực sản phẩm trên các trang mua bán hay thương mại điện tử.
Vậy làm thế nào để thêm được thanh điều hướng hữu ích này vào Blog? Hôm nay, Blog tin học sẽ hướng dẫn bạn các bước thực hiện công việc này:
- B1: Đăng nhập vào Blogger.
- B2: Trong Menu Template (Mẫu) chọn Edit HTML (Chỉnh sửa HTML).
- B3: Sử dụng tổ hợp phím Ctrl+F tìm đến đoạn Code sau:
<data:defaultAdStart/>
- B4: Vô hiệu hóa đoạn mã trên. Khi đó đoạn mã trên trở thành:
<b:include data=’top’ name=’status-message’/>
End status message–>
<data:defaultAdStart/>
- B5: Thêm đoạn Code sau: <b:include data=’posts’ name=’breadcrumb’/> vào dưới đoạn code đã được vô hiệu hóa. Đoạn code mới như sau:
<b:include data=’top’ name=’status-message’/>
End status message–>
<b:include data=’posts’ name=’breadcrumb’/>
<data:defaultAdStart/>
- B6: Sử dụng Ctrl+F để đến đoạn Code sau: <b:includable id=’main’ var=’top’>
Sao chép toàn bộ đoạn code sau vào phía trên dòng <b:includable id=’main’ var=’top’>.
<b:if cond=’data:blog.homepageUrl == data:blog.url’>
<!– Neu dang o trang chu –>
<b:else/>
<b:if cond=’data:blog.pageType == "item"’>
<!– breadcrumb for the post page –>
<a href=’http://www.kenhphanmemviet.blogspot.com’/>
<p class=’breadcrumbs’>
<span class=’post-navigation’>
<a expr:href=’data:blog.homepageUrl’ rel=’tag’>Kênh phần mềm việt </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/>
Chưa xác định
</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 post-navigation’>
<a expr:href=’data:blog.homepageUrl’>
Kênh phần mềm việt
</a>
<span>
<!– Neu dang phan luu tru –>
Bài viết của:
<data:blog.pageName/>
</span>
</span>
</p>
<b:else/>
<b:if cond=’data:blog.pageType == "index"’>
<p class=’breadcrumbs’>
<span class=’post-labels post-navigation’>
<b:if cond=’data:blog.pageName == ""’>
<a expr:href=’data:blog.homepageUrl’>
Kênh phần mềm việt
</a>
<span>
Tất cả bài viết
</span>
<b:else/>
<a expr:href=’data:blog.homepageUrl’>
Kênh phần mềm việt
</a>
<span>
<!– Neu dang chuyen muc –>
Bài viết chuyên mục:
<data:blog.pageName/>
</span>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id=’main’ var=’top’>
- B7: Sử dụng Ctrl+F đến đoạn Code sau ]]></b:skin> và thêm đoạn code sau vào trước:
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
}
.post-navigation > a {
border: 1px solid #016DB5;
border-radius: 8px 8px 8px 8px;
color: #003399;
padding: 4px 15px;
position: relative;
text-decoration: none;
transition: all 0.2s ease 0s;
}
.post-navigation > a:hover {
border: 1px solid #016DB5;
border-radius: 8px 8px 8px 8px;
color: #FF9900;
padding: 4px 15px;
position: relative;
text-decoration: none;
transition: all 0.2s ease 0s;
}
.post-navigation > span {
padding-left: 10px;
font-weight:bold;
}
- B8: Click nút Lưu mẫu để hoàn tất.
Bạn có thể tham khảo thêm các bài viết về thủ thuật Blog hữu ích khác như Chèn banner flash cho blogger, thêm bài viết cùng chuyên mục vào blogger, …