Thanh điều hướng breadcrumbs xuất hiện nằm ngang trên đầu trang web, thường nằm dưới hoặc trên tiêu đề bài viết. Chúng cung cấp đường dẫn trở lại trang trước, đến một chủ đề nào đó hoặc trở về trang chủ. Nhìn chung người thiết kế thường sử dụng các dấu phân cách như > hoặc ».

Thanh điều hướng breadcrumbs điển hình trông như thế này:

Trang Chủ » Thủ thuật Blogger » Tạo đường dẫn breadcrumb cho Blogger/Blogspot

Bước 1:

- Lưu Template hiện tại của bạn.

- Đăng nhập >> Thiết kế (Design) >> Chỉnh sửa HTML( Edit HTML) >> Đánh dấu chọn Mở rộng Mẫu tiện ích(Expand Widget Template).

Bước 2: Thêm CSS:

Tìm ]]></b:skin> (Ctrl + F >> ]]>) và thêm ngay trước nó đoạn mã:

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

- Tìm đoạn mã (Ctrl + F để tìm ):

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

Thêm ngay dưới nó đoạn mã :

<b:include data='posts' name='breadcrumb'/>

- Tìm tiếp :

<b:includable id='main' var='top'>

Và thêm trước nó đoạn mã:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- khong hien thi breadcrumb o trang chu -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb cho bai dang -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Trang Chủ</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;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb cho nhan, trang tim kiem, luu tru blog.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Trang Chủ</a> &#187;
<data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Trang Chủ</a> &#187;
<b:else/>
<a expr:href='data:blog.homepageUrl'>Trang Chủ</a> &#187;
<data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Bấm chọn LƯU TEMPLATE, xem thành quả bằng cách bấm vào bài viết bất kì thôi ^^!

Lưu ý nếu bạn sử dụng nhiều nhãn (label) cho một bài viết thì breadcrumbs chỉ hiển thị nhãn cuối cùng mà bạn đã thêm vào

Hướng dẫn khách hàng sử dụng dịch vụ

Để xem được các thủ thuật hay nhất quý khách hãy lick vào button bên dưới, xem xong quý khách thấy hài lòng hãy liên hệ nhanh với chúng tôi để sở hữu bộ code bản quyền ưng ý nhất!

ĐĂNG KÝ MUA CODE

Quý khách muốn đăng ký mua templates bản quyền thiết kê tinh xảo đẹp mắt hãy liên hệ nhanh với chúng tôi để đặt hàng Trân trọng cảm ơn quý khách đã sử dụng dịch vụ của chúng tôi!

ĐĂNG KÝ MUA TEMPLATE