Thanh điều hướng kiểu breadcrumb (kiểu theo dấu vết ruột bánh mì) là thanh điều hướng cho phép người lướt web truy tìm nội dung theo chủ đề. Nó bắt nguồn từ câu chuyện dấu vết những cái ruột bánh mì bị bỏ lại bởi Hansel và Gretel trong truyện cổ tích nổi tiếng của anh em nhà Grimm.
Chuyện là thế này: Hansel và Gretel là 2 đứa trẻ trong một gia đình rất nghèo. Bố mẹ chúng nghèo quá đến nỗi không có gì để cho con cái ăn. Họ đã quyết định đem những đứa trẻ vào rừng và bỏ mặc chúng cho thú hoang ăn thịt. Hansel và Gretel đã phát hiện ra kế hoạch khủng khiếp này và có những biện pháp đề phòng trước. Chúng mang theo một cái bánh mì và thả rơi những mẫu ruột bánh mì dọc theo đường đi để tìm đường về nhà. Nhưng chẳng may chúng đã không tìm được đường về nhà và bị bắt giữ bởi một mụ phù thủy độc ác.
Từ câu chuyện này, ngày nay chúng ta có thể thấy thanh điều hướng theo kiểu “truy tìm đường theo mẫu ruột bánh mì” trên nhiều website để tìm lối trở lại Trang chủ.
Thanh điều hướng breadcrumb 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 breadcrumb điển hình trông như thế này:
Bạn đang ở : Home » Thủ thuật bloger » Tạo thanh điều hướng kiểu breadcrumb
Sau đây là hướng dẫn thiết lập thanh điều hướng breadcrumb cho Blogger:
Bước 1: Đăng nhập Blogger, vào Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML).
Nhớ backup Template của bạn và chọn Mở rộng Mẫu tiện ích (Expand Widget Template).
Bước 2: Tìm đoạn code sau đây (Nhấn Ctrl+F để tìm):
<b:include data='top' name='status-message'/>
Thay thế đoạn code trên bằng đoạn code sau đây:
<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/>
Kế đến tìm đoạn code như bên dưới:
<b:includable id='main' var='top'>
và thêm trước nó với đoạn code sau đây:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</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/>
</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'>
<a expr:href='data:blog.homepageUrl'>Home</a> »
<data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> »
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> »
<data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</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/>
</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'>
<a expr:href='data:blog.homepageUrl'>Home</a> »
<data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> »
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> »
<data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Bước 3: Thêm đoạn code dưới đây vào trước dòng ]]></b:skin>.
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
Lưu Template lại là xong.
Ngoài ra bạn còn có thể chỉnh sửa Css để thanh breadcrumb của bạn trông dễ nhìn hơn.Vd Blog mình có 2 dòng kẻ trên dưới breadcrumb
Nguồn : http://huudung.vantri.vn
