Thêm thanh điều hướng Breadcrumb vào Blogger

(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:

<b:include data=’top’ name=’status-message’/>
<data:defaultAdStart/>

B4: Vô hiệu hóa đoạn mã trên. Khi đó đoạn mã trên trở thành:

<!– Start status message
<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:

<!– Start status message
<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:includable id=’breadcrumb’ var=’posts’>
<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’/>


<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>

<data:post.title/>

</b:loop>


<b:else/>
<b:if cond=’data:blog.pageType == "archive"’>
<!– breadcrumb for the label archive page and search pages.. –>


<a expr:href=’data:blog.homepageUrl’>
Kênh phần mềm việt
</a>

<!– Neu dang phan luu tru –>
Bài viết của:
<data:blog.pageName/>



<b:else/>
<b:if cond=’data:blog.pageType == "index"’>


<b:if cond=’data:blog.pageName == ""’>
<a expr:href=’data:blog.homepageUrl’>
Kênh phần mềm việt
</a>

Tất cả bài viết

<b:else/>
<a expr:href=’data:blog.homepageUrl’>
Kênh phần mềm việt
</a>

<!– Neu dang chuyen muc –>
Bài viết chuyên mục:
<data:blog.pageName/>

</b:if>


</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:

.breadcrumbs {
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;
}