Tạo đường dẫn breadcrumb cho Blogger/Blogspot

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