Blog Lê Trung Hiếu

Just another WordPress.com site

Tạo thanh điều hướng kiểu breadcrumb

— 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 == &quot;item&quot;’>

<!– 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 == &quot;true&quot;’> »

<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 == &quot;archive&quot;’>

<!– 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 == &quot;index&quot;’>

<p class=’breadcrumbs’>

<span class=’post-labels’>

<b:if cond=’data:blog.pageName == &quot;&quot;’>

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

}

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

5 responses to “Tạo thanh điều hướng kiểu breadcrumb

  1. nguyen huy tap Tháng Một 1, 2011 lúc 11:49 chiều

    anh hieu oi day em cach lam cac nut HOME,SỔ XỐ,MUSIC,KÊNH RSS,LIÊN HỆ,… như của anh ấymà em ko biết chèn quảng cáo hoạc chèn ứng dụng vào kiểu gì,vừa lập blog nên ko bít gì cả,anh giúp em nha

  2. Lê Trung Hiếu Tháng Một 2, 2011 lúc 7:09 sáng

    Cái đó chỉ là link thôi mà.:D

  3. antonio Tháng Một 8, 2011 lúc 8:11 chiều

    mình không tìm được các dòng như bạn nói để chèn, sao thế nhỉ, giúp mình với

  4. antonio Tháng Một 9, 2011 lúc 10:09 sáng

    Thanks bạn mình làm được rồi nhưng mình ko biết làm sao nó hiện lên cả 2 cái line dc mình có mỗi cái với cả cái chữ bạn đang ở nữa

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: