Hướng dẫn tạo Breadcrumbs đơn giản cho Website

Thuật ngữ Breadcumbs thường được nhắc nhiều trong giới phát triền Website. Đặt biệt website thì lại càng không thể thiếu nếu muốn đạt chuẩn SEO,  vậy BreadCrumbs là gì?

Trên đường đi, cậu bé đã không ăn mà lại xé vụn mẫu bánh mỳ đó rải trên đường.

BreadCrumbs theo từ điển Anh-Việt có nghĩa là là “mẫu bánh mỳ vụn”, nghe như chả liên quan gì nhờ. Nhưng đó lại là tên 1 câu truyện cổ tích của Mỹ. Mình tóm tắt câu chuyện tý nhé:

Có 1 gia đình nghèo nhưng lại đông con. Họ không thể tiếp tục cuộc sốnng với nhiều miệng ăn trong gia đình như thế. Một hôm người cha quyết định để người con trai cả ra đi. Trước khi đưa người con đến một nơi rất xa. Gia đình cho cậu bé 1 chiếc bánh mỳ. Trên đường đi, cậu bé đã không ăn mà lại xé vụn mẫu bánh mỳ đó rải trên đường. Nhờ đó, mà cậu có thể lân theo dấu mà trở về với gia đình. Vậy là giờ bạn đã hiểu cái tên Breadcrumbs xuất xứ từ đâu rồi ha. Giờ chúng ta bắt dầu thôi, code rất đơn giản.

Bạn copy đoạn code sau vào nơi chứa Css của bạn. 

<style> 
.breadcrumbs {
position: relative;
}

.breadcrumbs .breadcrumb {
background:transparent;
margin-bottom: 75px;
padding-left: 0;
}

.breadcrumbs .breadcrumb li a {
background:#FE980F;
color: #FFFFFF;
padding: 3px 7px;
}

.breadcrumbs .breadcrumb > li + li:before {
content: " ";
}
</style>

Tiếp tục copy đoạn code sau vào nơi muốn hiển thị Breadcrumbs. Ví dụ bạn muốn trỏ từ Home  >>  Shop >> Product1 thì bạn sẽ đặt code vào trang chứa Product.

<div class="breadcrumbs">
    <ol class="breadcrumb">
<li><a href="index.php">Home</a> &raquo;</li>
<li><a href="#">Shop</a> &raquo;</li>
<li>Product</li>
    </o>
 </div>

Sau đây kết quả: