Tạo breadcrumb với border tam giác cho WordPress

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.

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.

<p id="breadcrumbs">
	<span xmlns:v="http://rdf.data-vocabulary.org/#">
		<span typeof="v:Breadcrumb">
			<a property="v:title" rel="v:url" href="http://localhost/prefile">Home</a>
		</span>
		<span typeof="v:Breadcrumb">
			<a property="v:title" rel="v:url" href="http://localhost/prefile/category/uncategorized/">Uncategorized</a>
		</span>
		<span typeof="v:Breadcrumb">
			<span property="v:title" class="breadcrumb_last">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span>
		</span>
	</span>
</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.

#breadcrumbs {
    background-color: #F1F1EC;
    border: 1px solid #D6D6D6;
    border-radius: 6px;
}

#breadcrumbs .breadcrumb_last, #breadcrumbs span a {
	position: relative;
}

#breadcrumbs .breadcrumb_last:after, #breadcrumbs span a:after {
	border:18px solid transparent;
	border-right:1px none black;
	border-left-width:12px;
	border-left-color:#F1F1EC;
	content: "";
	display:block;
	position:absolute;
	right: -18px;
	top: -9px;
	z-index:51;
	white-space:nowrap;
	overflow:hidden;
	text-indent:9999px;
	width:0px;
	height:0px
}

#breadcrumbs .breadcrumb_last:before, #breadcrumbs span a:before {
	border:18px solid transparent;
	border-right:1px none black;
	border-left-width:12px;
	border-left-color:#bebebe;
	content: "";
	display:block;
	position:absolute;
	right: -19px;
	top:-9px;
	z-index:50;
	width:0px;
	height:0px
}

#breadcrumbs > span > span {
    display: inline-block;
    height: 34px;
    line-height: 32px;
    padding: 0 10px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	cursor: pointer;
}

#breadcrumbs > span > span:hover {
	background-color: #F9F9F4;
}

#breadcrumbs > span > span:hover span.breadcrumb_last:after, #breadcrumbs > span > span:hover a:after {
	border-left-color: #F9F9F4;
}

#breadcrumbs > span > span {
    margin-left: -8px;
    padding-left: 25px;
}

#breadcrumbs > span > span:first-child {
	margin-left: 0;
}

#breadcrumbs span a:hover {
	text-decoration: none;
}

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 Sáu gửi bên dưới.

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. Chúc bạn thành công.

Lại Đình Cường