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
  • Tài Liệu
Hướng dẫn thêm danh mục sản phẩm vào menu website WordPress

Hướng dẫn thêm danh mục sản phẩm vào menu website WordPress

Thao tác đơn giản để thêm danh mục sản phẩm vào menu khi thiết kế website tại ZWeb.vn Bước 1: Đưa trỏ chuột vào giao diện, click chọn menu     Bước 2: Chọn danh mục sản phẩm cần thêm vào menu     Sau khi thêm danh mục sản…Xem Thêm

Hướng dẫn quản trị sản phẩm website WordPress

Hướng dẫn quản trị sản phẩm website WordPress

Một số thao tác đơn giản để quản trị sản phẩm sau khi thiết kế website tại ZWeb.vn 1. Giao diện quản trị sản phẩm Công cụ quản trị sản phẩm 2. Chỉnh sửa sản phẩm, xóa sản phẩm Click chuột chọn tất cả sản phẩm Chọn sản phẩm cần chỉnh…Xem Thêm

Hướng dẫn đăng nhập quản trị website WordPress

Hướng dẫn đăng nhập quản trị website WordPress

Để quản trị và làm chủ một website là công việc không khó cũng không yêu cầu quá cao về kỹ thuật, Dưới đây ZWeb.vn sẽ hướng dẫn quản trị cơ bản, giúp khách hàng vận hành và phát triển tốt website wordpress sau khi đã thiết kế website  …Xem Thêm

Phim Hàn Ảnh Hưởng Đến Thị Trường Việt Nam

Phim Hàn Ảnh Hưởng Đến Thị Trường Việt Nam

Ngay sau khi bộ phim ” Vì Sao Đưa Anh Tới” kết thúc, đã gây ra sức ảnh hưởng mạnh mẽ đến thị trường Viet Nam, từ phong cách ăn mặc, mua sắm, ăn uống của người dân Việt Nam nói riêng và toàn châu Á nói chung, nhất là…Xem Thêm

Marketing Cảm Xúc

Marketing Cảm Xúc

Cảm xúc là yếu tố đóng vai trò rất lớn trong việc thúc đẩy mạnh mẽ các quyết định của con người.Làm thế nào để sử dụng cảm xúc như một công cụ để thu hút, tạo danh tiếng cho thương hiệu và khuyến khích khán giả của bạn sử…Xem Thêm