Thủ thuật blogspot - Dautoblog

Tạo Thanh Điều Hướng-Breadcrumbs Many Label

Tạo Thanh Điều Hướng-Breadcrumbs Many Label
Breadcrumb là tiện ích được sử dụng khá phổ biến, đặc biệt là các trang Web/Blog. Breadcrumbs góp phần điều hướng tốt hơn cho Blog của bạn.Và đặc biệt rất tốt cho seo. Bài này sẽ hướng dẫn các bạn cách Tạo thanh điều hướng tự động cho bài viết của blogger.
Lợi ích của thủ thuật này là gì?
- Góp phần điều hướng giúp độc giả biết được mình đang xem bài viết ở chuyên mục và đường dẫn như thế nào.
- Hỗ trợ SEO và thân thiện với các Robot tìm kiếm.
- Giúp Web/Blog của bạn nhìn chuyên nghiệp hơn.
- Không ảnh hưởng tới tốc độ load của web/blog.
- Khả năng tùy biến cao.

Ảnh minh họa:
Cài đặt Breadcrumbs many label cho blobgger/blogspot
1- Đăng nhập Blogger
2- Vào Mẫu (Template)
3- Chọn tab Chỉnh Sửa HTML (Edit HTML) => TIếp tục (proceed) => Chọn Mở Rộng tiện ích mẫu (Expand Widget Templates).
4- Thêm đoạn code sau trước thẻ ]]></b:skin> .

.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://2.bp.blogspot.com/-6OQbnrUa5ww/Us5vlOodTUI/AAAAAAAAkxM/8U_KSYPwFHA/s1600/home.png);width:20px;display:block;height:16px;float:left;text-indent:-9999px;background-repeat:no-repeat;}

5- Tìm thẻ sau:
<b:includable id='post' var='post'>
6- Thêm đoạn code sau vào bên dưới đoạn code trên:
<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>

- Nếu không thích hiện tiêu đề bài viết sau khi kết thúc các nhãn thì thay phần &#187; <data:post.title/> thành chữ khác hoặc xóa bỏ nó đi.
7- Lưu mẫu.
Chúc thành công!
Comments blogger

Không có nhận xét nào :