Hướng dẫn tạo breadcrumb với border tam giác cho WordPress

Hướng dẫn tạo breadcrumb với border tam giác cho WordPress

Với những ai đã học và nghiên cứu về WordPress thì không thể bỏ qua thanh breadcrumb navigation trên WordPress nó là một phần quan trọng trong website hay blog của bạn.

Nếu bạn muốn thanh breadcrumb navigation trên blog WordPress có hình dạng border là 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.

>>Xem thêm: “Cài nhiều plugin cho WordPress có bị chậm?”

Huong dan tao breadcrumb với border tam giac cho Wordpress hinh anh 1 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.

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ó.

1 <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 đó.

Huong dan tao breadcrumb với border tam giac cho Wordpress hinh anh 2

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.

Xem thêm:

(Nguồn http://hocwp.net)

Học viện Haravan - Kinh doanh online, bán hàng đa kênh Omnichannel

Tích lũy thêm kiến thức cùng học viện Haravan

Đăng kí nhận tin hữu ích, tin mới đến email của bạn