Thủ Thuật Tạo Breadcrumb Navigation Với Border Tam Giác

Thanh breadcrumb navigation WordPress là một phần quan trọng trong website hay blog của bạn, nếu bạn muốn nó theo hướng mũi tên qua phía bên phải thì bạn có thể áp dụng các thủ thuật css sau để thực hiện điều này.

Giả sử bây giờ bạn có một thanh breadcrumb navigation với định dạng HTML như sau, code này là Sáu đang dùng plugin WordPress SEO by Yoast để tạo ra.

thu-thuat-tao-breadcrumb-navigation-voi-border-tam-giac-hinh-anh-2

Dưới đây là thông tin chi tiết về code các bạn có thể tham khảo và làm theo hướng dẫn để thực hiện nó.

 <p id="breadcrumbs"> 2<span xmlns:v="http://rdf.data-vocabulary.org/#"> 3<span typeof="v:Breadcrumb"> 4<a property="v:title" rel="v:url" href="http://localhost/prefile">Home</a> 5</span> 6<span typeof="v:Breadcrumb"> 7<a property="v:title" rel="v:url" href="http://localhost/prefile/category/uncategorized/">Uncategorized</a> 8</span> 9<span typeof="v:Breadcrumb"> 10<span property="v:title" class="breadcrumb_last">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span> 11</span> 12</span> 13</p>

Bây giờ bạn có thể dùng các định dạng CSS bên dưới để làm đẹp cho thanh breadcrumb trên blog WordPress.

1 #breadcrumbs { 2 background-color: #F1F1EC; 3 border: 1px solid #D6D6D6; 4 border-radius: 6px; 5 } 6 7 #breadcrumbs .breadcrumb_last, #breadcrumbs span a { 8 position: relative; 9 } 10 11 #breadcrumbs .breadcrumb_last:after, #breadcrumbs span a:after { 12 border:18px solid transparent; 13 border-right:1px none black; 14 border-left-width:12px; 15 border-left-color:#F1F1EC; 16 content: “”; 17 display:block; 18 position:absolute; 19 right: -18px; 20 top: -9px; 21 z-index:51; 22 white-space:nowrap; 23 overflow:hidden; 24 text-indent:9999px; 25 width:0px; 26 height:0px 27 } 28 29 #breadcrumbs .breadcrumb_last:before, #breadcrumbs span a:before { 30 border:18px solid transparent; 31 border-right:1px none black; 32 border-left-width:12px; 33 border-left-color:#bebebe; 34 content: “”; 35 display:block; 36 position:absolute; 37 right: -19px; 38 top:-9px; 39 z-index:50; 40 width:0px; 41 height:0px 42 } 43 44 #breadcrumbs > span > span { 45 display: inline-block; 46 height: 34px; 47 line-height: 32px; 48 padding: 0 10px; 49 border-top-left-radius: 6px; 50 border-bottom-left-radius: 6px; 51 cursor: pointer; 52} 53 54 #breadcrumbs > span > span:hover { 55 background-color: #F9F9F4; 56 } 57 58 #breadcrumbs > span > span:hover span.breadcrumb_last:after, #breadcrumbs > span > span:hover a:after { 59 border-left-color: #F9F9F4; 60 } 61 62 #breadcrumbs > span > span { 63 margin-left: -8px; 64 padding-left: 25px; 65 } 66 67 #breadcrumbs > span > span:first-child { 68 margin-left: 0; 69 } 70 71 #breadcrumbs span a:hover { 72 text-decoration: none; 73 }

Nếu như bạn đã làm mọi thứ đều đúng với hướng dẫn thì kết quả bạn sẽ thấy được một thanh breadcrumb giống như hình ảnh minh họa mình gửi bên dưới, với giao diện bắt mắt sẽ giúp website hay blog của bạn trở nên sinh động và thu hút người dùng hơn. Hãy làm theo hướng dẫn trên để thấy được điều đó.

 

thu-thuat-tao-breadcrumb-navigation-voi-border-tam-giac-hinh-anh-3

Việc code với WordPress không khó như bạn nghĩ hãy thực hiện nó ngay và đừng đợi gì nữa nếu không muốn khả năng code cũng như website của mình trở nên xấu xí và không hợp thời.

Với việc sử dụng thanh breadcrumb navigation trên WordPress rất đơn giản và dễ làm phải không nào, cái này rất phù hợp cho các trang web muốn thiết kế giao diện theo kiểu phẳng, mang phong cách hiện đại, thu hút ánh nhìn cũng tăng chất lượng của website hay blog của bạn. Chúc bạn thành công.

  • 02/03/2020
  • Thành Lâm
  • Công Nghệ
Facebook xử lý dữ liệu hành vi người dùng như thế nào?

Facebook xử lý dữ liệu hành vi người dùng như thế nào?

Các nhà khoa học của Facebook đang cố gắng tìm hiểu các hành vi của con người thông qua nguồn dữ liệu khổng lồ. Những khám phá của họ có thể giúp mạng xã hội này thu được rất nhiều tiền từ cơ sở dữ liệu khổng lồ đó. Facebook…Xem Thêm

Bị  ” luộc ” linh kiện laptop khi đi sửa chữa

Bị ” luộc ” linh kiện laptop khi đi sửa chữa

Laptop bị hỏng nhẹ, sau khi đi sửa về chạy được vài ngày thì không dùng được nữa. Sơ sẩy là “luộc” Chị Hoàng Anh, nhân viên văn phòng (Q.1, TP.HCM) do bất cẩn trong quá trình sử dụng nên chiếc laptop hiệu Dell bị hỏng ổ cứng và card…Xem Thêm

Địa danh có tên miền dài nhất thế giới

Địa danh có tên miền dài nhất thế giới

Kỷ lục này thuộc về ngôi làng trên đảo Anglesey của xứ Wales với cái tên dài tới 58 ký tự không chứa dấu cách. Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch (gọi tắt là Llanfair PG) có nghĩa “nhà thờ thánh Mary tại thung lũng cây phỉ trắng gần xoáy nước và nhà thờ thánh…Xem Thêm

Tên miền yêu thích đã bị đăng ký bạn giải quyết như thế nào?

Tên miền yêu thích đã bị đăng ký bạn giải quyết như thế nào?

Những tên miền dễ nhớ, độc đáo, đặc trưng theo ngành càng ngày càng khó kiếm. Nghĩ theo hướng tích cực, đây là một bước tiến lớn của thương mại điện tử vì càng lúc càng có nhiều doanh nghiệp quan tâm đến việc đầu tư thương hiệu online. Tuy…Xem Thêm

Doanh nghiệp muốn mở rộng sang thị trường nước ngoài và các vấn đề liên quan tên miền

Doanh nghiệp muốn mở rộng sang thị trường nước ngoài và các vấn đề liên quan tên miền

Từ đầu những năm 2000, tên miền đã được phép đăng ký bởi nhiều ngôn ngữ khác nhau – ví dụ 例子.com là tên miền tiếng Trung hợp lệ. Điều này giúp cho người dùng địa phương ít phụ thuộc hơn vào bảng chữ cái tiếng Anh khi sử dụng…Xem Thêm