• TRANG CHỦ
  • THỦ THUẬT
    • Thủ thuật máy tính
    • Thủ thuật văn phòng
    • Thủ thuật Internet
    • Thủ thuật điện thoại
  • CHIA SẺ PHẦN MỀM
  • DIỆT VIRUS
  • CÔNG NGHỆ SỐ
  • THỦ THUẬT OFFICE
  • HỖ TRỢ
  • DỊCH VỤ
    • Sửa máy tính tại nhà

Blog thủ thuật máy tính - Thủ thuật windows

Blog chia sẻ thủ thuật máy tính và thủ thuật windows, lưu lại những kiến thức trong quá trình mình làm việc

You are here: Home / Thủ thuật Internet / Thêm thanh điều hướng Breadcrumb vào Blogger

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

April 23, 2016 By Chu Quang

(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 == &quot;item&quot;’>
<!– 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 == &quot;true&quot;’>
<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 == &quot;archive&quot;’>
<!– 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 == &quot;index&quot;’>
<p class=’breadcrumbs’>
<span class=’post-labels post-navigation’>
<b:if cond=’data:blog.pageName == &quot;&quot;’>
<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:
.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;
}
  • 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, …

Rate this post

Nội dung

  1. Bài viết liên quan:

Bài viết liên quan:

  • Chatbots trong ngành công nghiệp trò chơi
  • Cách giúp máy tính không bị lag khi chơi game online
  • Chi tiết cách in ấn tài liệu trong word 2003, 2010, 2013,…
  • Cách sử dụng DNS Cloudflare 1.1.1.1 để truy cập các trang…
  • Các Bước Kiểm Tra Khi Mua Điện Thoại Cũ

Filed Under: Thủ thuật Internet Tagged With: Thêm thanh điều hướng vào Blogger, Thủ thuật Blogspot

Tìm kiếm

Newbie nên đọc

  • Dạy photoshop cơ bản
  • Thủ thuật Office
  • Tạo website đơn giản

Bài viết nổi bật

  • TOP 5+ Mẹo tăng tốc máy tính bị lag khi chơi game

    TOP 5+ Mẹo tăng tốc máy tính bị lag khi chơi game

  • Cách giúp máy tính không bị lag khi chơi game online

    Cách giúp máy tính không bị lag khi chơi game online

  • Cách sửa laptop bị lỗi màn hình xanh

    Cách sửa laptop bị lỗi màn hình xanh

  • Cách sử dụng DNS Cloudflare 1.1.1.1 để truy cập các trang web bị chặn

    Cách sử dụng DNS Cloudflare 1.1.1.1 để truy cập các trang web bị chặn

  • Những thủ thuật máy tính đơn giản và hữu ích

    Những thủ thuật máy tính đơn giản và hữu ích

  • Hướng dẫn cách tạo USB cài đặt Windows 10

    Hướng dẫn cách tạo USB cài đặt Windows 10

  • Tạo USB cài đặt Win 10 bằng Media Creation Tool

    Tạo USB cài đặt Win 10 bằng Media Creation Tool

Theo dõi mạng xã hội

Liên hệ với tôi

Nếu các bạn gặp khó khăn gì trong quá trình làm việc hãy liên hệ với tôi theo email:

tranthanhchinh.hd@gmail.com

Những gì tôi biết tôi sẽ hướng dẫn tận tình. Cảm ơn các bạn đã ủng hộ

Blog bạn bè

Blog công nghệ
Tin học AZ
Mẹo vặt đời sống

Đôi lời về tác giả

Blog chia sẻ thủ thuật máy tính - Thủ thuật windows

Mình tên là Thanh Chính đây là nơi mình viết lại những kinh nghiệm làm việc, những thủ thuật máy tính khi máy tính phát sinh một sự cố, cũng như là một nơi lưu trữ lại các kiến thức làm việc của mình để khi cần có thể lấy ra và áp dụng được luôn, Mong các bạn có thể đóng góp thêm cho blog của mình.

Copyright © 2023 · Going Green Pro Theme on Genesis Framework · WordPress · Log in