"Tạo thanh trạng thái Breadcrumbs cho blogspot"

Hình ảnh minh họa

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Vào tiếp phần chỉnh sửa HTML, chọn mở rộng mẫu tiện ích (Expand Widget Templates)
4. Chèn code bên dưới vào trước thẻ ]]></b:skin>
.breadcrumbs {
margin:40px 0px 0px 10px;
font-size:11px;
color:#fff;
}
.breadcrumbs a{color:#10d9e0;}
.breadcrumbs a:hover{color:#ff0033;}
.breadcrumbs-labelname {
margin:0px 0px 0px 1px;
padding-left:6px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_UkghyOc1r2VO42eWwCHgpHaCIqY4X4AWd4JFPhpqjk2MNPGAX-tboJWeDICs7A7S9qATBtmCdbpdbUh29W4yE_SaP8BPU_YS6nKwxfFbOWVn0_2z_n0gTR7eE_ZkNBQIyZF1iB7k-Ox3/) no-repeat left;}
margin:40px 0px 0px 10px;
font-size:11px;
color:#fff;
}
.breadcrumbs a{color:#10d9e0;}
.breadcrumbs a:hover{color:#ff0033;}
.breadcrumbs-labelname {
margin:0px 0px 0px 1px;
padding-left:6px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_UkghyOc1r2VO42eWwCHgpHaCIqY4X4AWd4JFPhpqjk2MNPGAX-tboJWeDICs7A7S9qATBtmCdbpdbUh29W4yE_SaP8BPU_YS6nKwxfFbOWVn0_2z_n0gTR7eE_ZkNBQIyZF1iB7k-Ox3/) no-repeat left;}
5. Bây giờ bạn tìm đến dòng code như bên dưới (hoặc tương tự)
<b:includable id='post' var='post'>
6. Chèn code bên dưới vào ngay sau code vừa tìm được
<div class='breadcrumbs'><b:if cond='data:blog.pageType == "item"'> <a expr:href='data:blog.homepageUrl' rel='tag'> Home</a>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> <span class='breadcrumbs-labelname'><a expr:href='data:label.url + "?max-results=5"' rel='tag'> <data:label.name/></a></span> </b:if> </b:loop> <span class='breadcrumbs-labelname'><data:post.title/></span></b:if></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> <span class='breadcrumbs-labelname'><a expr:href='data:label.url + "?max-results=5"' rel='tag'> <data:label.name/></a></span> </b:if> </b:loop> <span class='breadcrumbs-labelname'><data:post.title/></span></b:if></div>
Bạn có thể tùy chỉnh số bài viết hiển thị trong nhãn khi người dùng click vào nhãn mà họ muốn xem trong thanh Breadcrumbs này. Bạn chỉnh số "5" trong code lại theo ý bạn là được.
7. Cuối cùng save (Bạn có thể click xem một bài viết để kiểm tra)
Chúc bạn thành công
Nguồn: TRAIDATMUI.com
0 nhận xét:
Đăng nhận xét