THANH ĐIỀU HƯỚNG CHO BLOGGER (UPDATE)

Trước đây mình có giới thiệu một cách để thêm thanh điều hướng cho bài viết nhưng không được pro cho lắm, bởi vì nó không lấy được nhiều nhãn, hơn nữa mình xem các bài viết trên blog khác đại đa số là phải dùng phương pháp thủ công để thêm các nhãn như vậy thì rất mất thời gian. Do đó hôm nay mình sẽ hướng dẫn thêm thanh điều hướng nhanh và tự động hoàn toàn thêm các nhãn gắn với bài viết

Demo

Làm Cách Nào Để Thêm Thanh Điều Hướng Vào Bài Viết?

Bước 1: Vào Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Mở rộng Mẫu Tiện Ích
Bước 3: Trước thẻ ]]></b:skin> dán code sau

.breadcrumbs{padding:5px;background-color:#EEE;font-size:90%;color:black;height:16px;line-height:16px}
.breadcrumbs{padding:5px;background-color:#EEE;font-size:80%;color:black;height:16px;line-height:16px}
.breadcrumbs a{color:#B30B0B}
.breadcrumbs a:hover{color:black}
a.bhome{background-image:url(http://trollfile.googlecode.com/files/home.png);width:20px;display:block;height:16px;float:left;text-indent:-9999px;background-repeat:no-repeat;}

Bước 4: Dán code bên dưới trước thẻ  <data:post.body/> (dán vào thẻ đầu tiên bạn tìm được) và lưu lại template

<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>
</div>
</b:if>