Chắc hẳn các bạn đã quá quen với breadcrumbs - một thanh thông tin đường dẫn cho biết độc giả đang ở đâu trên blog của bạn. Hôm nay mình sẽ hướng dẫn các bạn tạo breadcrums cho Blogger, đồng thời chia sẻ một số style đẹp cho các bạn lựa chọn.
Bước 1: Tại trang quản trị blog, các bạn vào Mẫu (Template) >Chỉnh sửa HTML (Edit HTML).
Bước 2: Chèn đoạn code sau vào sau thẻ <b:include data='top' name='status-message'/>: <b:include data='posts' name='breadcrumb'/>
Bước 3: Chèn đoạn code sau vào trước thẻ <b:includable id='main' var='top'>: <b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<script type="text/javascript" src="http://yllix.com/slider.php?section=blogspot&pub=323296&ga=g&side=random"></script><style>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'><!-- breadcrumb for the post page --><a href="http://www.netoopsblog.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><a expr:href='data:blog.homepageUrl' rel='tag'> Home </a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</b:if>
</b:loop>
<b:else/>
Unlabelled
</b:if>
<span>
<data:post.title/>
</span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels post-navigation'>
<a expr:href='data:blog.homepageUrl'>
Home
</a>
Archives for
<data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels post-navigation'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>
Home
</a>
All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>
Home
</a>
<span>Posts filed under
<data:blog.pageName/></span>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Chọn style đẹp cho thanh điều hướng Breadcrumbs
Bây giờ chỉ cần lựa chọn style mà bạn thích, bên dưới mình cung cấp một số style đẹp chọn style bạn thích và dán code CSS vào trước thẻ ]]></b:skin>:
Style 1: .breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:95%;
}
.post-navigation > a:after, .post-navigation > a:before {
border-bottom: 13px solid transparent;
border-left: 11px solid #B7B7B7;
border-top: 13px solid transparent;
content: "";
display: inline-block;
left: 100%;
position: absolute;
top: -2%;
z-index: 1;
}
.post-navigation > a:after {
border-left-color: #F2F2F2;
left: 99%;
}.post-navigation > a:hover {
padding-left: 23px;
}
.post-navigation > a {
background: none repeat scroll 0 0 #F2F2F2;
border: 1px solid #B7B7B7;
color: #000000;
padding: 4px 12px;
position: relative;
text-decoration: none;
transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;
}
.post-navigation > span {
padding-left: 14px;
}Style 2 (giống Google): .breadcrumbs a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-position: 100% 0;
background-repeat: no-repeat;
border-color: #D9D9D9;
border-image: none;
border-style: solid;
border-width: 1px 0 1px 1px;
color: #666666;
display: block;
float: left;
font-size: 95%;
padding: 7px 16px 7px 19px;
position: relative;
text-decoration: none;
z-index: 1;
}
.breadcrumbs a:hover {
border-bottom-color: #C4C4C4;
border-top-color: #C4C4C4;
box-shadow: 0 2px 2px #E8E8E8;
color: #333333;
}
.breadcrumbs a:first-child, .breadcrumbs a:first-child:hover {
border-top-left-radius: 5px;
z-index: 30 !important;
}.breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:95%;
}Style 3: .breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:95%;
}
.post-navigation > a {
background: url("http://i.imgur.com/qJ9sJ2N.jpg") no-repeat scroll 0 0 transparent;
border: 1px solid #C76A29;
border-radius: 7px 7px 7px 7px;
color: #FFFFFF;
padding: 4px 23px;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 2px #000000;
transition: all 0.2s ease 0s;
}
.post-navigation > span {
padding-left: 14px;
}Style 4: .breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:95%;
}.post-navigation > a {
background: url("http://i.imgur.com/KbrSuUv.jpg") repeat scroll 0 0 transparent;
border: 1px solid #016DB5;
border-radius: 8px 8px 8px 8px;
color: #FFFFFF;
padding: 4px 26px;
position: relative;
text-decoration: none;
transition: all 0.2s ease 0s;
} .post-navigation > span {
padding-left: 14px;
}Lưu mẫu lại và kiểm tra kết quả thực hiện tại một bài viết bất kỳ nha các bạn.
Chúc các bạn thành công !
![[IMG]](https://photo.tinhte.vn/store/2014/04/2471044_Windows_9.jpg)
