• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo thanh điều hướng breadcrumbs trên Blogger

2
14/10/2010

Thanh điều hướng kiểu breadcrumbs (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 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:
Home » Thủ thuật Blogger » Tạo thanh điều hướng breadcrumbs trên Blogger

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='breadcrumbs' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumbs on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumbs 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;'> &#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 for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</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'>Home</a> &#187;
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<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. Lúc này bạn có thể kiểm tra thanh điều hướng breadcrumbs hoạt động trên blog của bạn rồi đấy.

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. Thủ thuật trên đã thử thành công trên các Template dạng layout. Tôi đã có một số điều chỉnh nhỏ cho thích hợp với blog có ngôn ngữ tiếng Việt.

{2 bình luậnAdd yours ?}

Nặc danh
07:55:00, 19 thg 11, 2010

Bạn này viết bài hay và bổ ích , cám ơn nha

Reply
14:40:00, 4 thg 6, 2011

Tại sao khi làm thủ thuật breadcrumb này, trên blog không hiện bất cứ bài đăng nào, cũng như vào bài đăng không hiển thị nội dung.
Bloggerism xem lại nha.
Thanks

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn