Breadcrumbs tự động v1

Đây là một tiện ích được sử dụng rộng rãi trên các blog, nó có tác dụng giúp người đọc biết mình đang ở đâu trên blog của bạn. Nó còn làm cho blog của bạn trông chuyên nghiệp hơn. Tiện ích mình giới thiệu hôm nay sẽ tự động lấy nhãn nên rất tiện.

DEMO

Thêm CSS

1. Đăng nhập Blogger
2. > Mẫu > Chỉnh sửa HTML
3. > Tìm thẻ ]]></b:skin>
4. > Dán code dưới vào trên thẻ vừa tìm được

.breadcrumbs{padding:5px;background-color:#EEE;font-size:90%;color:black;height:16px;line-height:16px}
.breadcrumbs a{color:#B30B0B}
.breadcrumbs a:hover{color:black}
a.bhome{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZ_9wTDhnLUo8QPEmqh4f5F_FGHw8lIp37qvFtw3x9DI98xKec9ZtWUhGiUFilMzT54JjXuQJPkLCpgo5CxckrRR9ssfMzVuuo2g6MiB2rkjkctw2QBHauRh5_LaJphG6s9ZR5hyYXbo/s1600/home-namkna.png);width:20px;display:block;height:16px;float:left;text-indent:-9999px;background-repeat:no-repeat;}

Thêm HTML

1. > Tìm thẻ dưới

<b:includable id='post' var='post'>

2. > Chèn code dưới vào dưới thẻ vừa tìm được

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a class='bhome' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
&#187;
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
</b:loop>
&#187; <data:post.title/>
</div>
</b:if>

Lưu ý: Nếu không muốn hiển thị tiêu đề bài viết ở cuối thanh điều hướng thì hãy thay thế đoạn  &#187; <data:post.title/>  thành một đoạn văn bản gì đó hoặc xóa nó đi.
3. Save