Home / Thủ thuật tin học / Tạo thanh điều hướng breadcrumb trên Blogger

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

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.
tuy chinh thanh dieu huong
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:

Home » Thủ thuật Blogger » Tạo thanh điều hướng breadcrumb 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):


Thay thế đoạn code trên bằng đoạn code sau đây:

Kế đến tìm đoạn code như bên dưới:

và thêm trước nó với đoạn code sau đây:

»

»

Home »

Home »

Home »

Bước 3: Thêm đoạn code dưới đây vào trước dòng ]]>.

.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 breadcrumb 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ì breadcrumb 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.

About Nguyen Minh

admin@nguyenminh.me 0975526551 Dân cntt (chăn nuôi trồng trọt)

Check Also

Download youtube

download youtube online and convert free Khi xem một clip online trên youtube, bạn rất …

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.




You have Successfully Subscribed!