Thủ thuật tạo Breadrumbs cho Blogger / Blogspot

Được đăng bởi trung  |  lúc  06:12 0 Nhận xét

Với breadrumb, độc giả có thể biết được chủ đề mình đang theo dõi thuộc trương mục (Breadcrumbs based on a post's category) nào, thời gian nào (Breadcrumbs based on a post's date), có thể giúp gia tăng lượng click của độc giả và kéo họ ở lại Blog của bạn lâu hơn. 

Chính từ những ưu điểm đó, thủ thuật blogger này sẽ giới thiệu cho các bạn 2 style của tiện ích này:

Style 1: dựa trên trương mục (có dạng : Browse » Home » Category » Post Title) 
Style 2: dựa trên thời gian (có dạng : You are here: Home > Year > Month > Post Title) (Sẽ được giới thiệu phần sau!)

A. Style 1 : Breadcrumbs based on a post's category.

1. Đầu tiên các bạn Đăng nhập vào Blogger / Blogspot => Thiết Kế => Chỉnh Sửa HTML =>Mở rộng tiện ích mẫu và làm theo các bước bên dưới:
2. Tìm đoạn code bên dưới :

<b:include data='top' name='status-message'/>

Và thay thế thành :

<b:include data='top' name='status-message'/>      
<b:include data='posts' name='breadcrumb'/>

3. Tiếp theo, tìm đoạn code này :

<b:includable id='main' var='top'>

Và thay thế thành :

<b:includable id='breadcrumb' var='posts'>      
<b:if cond='data:blog.homepageUrl == data:blog.url'>       
<!-- No breadcrumb on home page -->       
<b:else/>       
<b:if cond='data:blog.pageType == "item"'>       
<!-- breadcrumb for the post page -->       
<p class='breadcrumbs'>       
<span class='post-labels'>       
<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'>       
<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'>       
<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> » Posts filed under <data:blog.pageName/>       
</b:if>       
</span>       
</p>       
</b:if>       
</b:if>       
</b:if>       
</b:if>       
</b:includable>       
<b:includable id='main' var='top'>

Bạn có thể sửa phần màu xanh theo ý thích của bạn.
4. Cuối cùng, thêm đoạn code CSS bên dưới vào trước thẻ đóng  ]]</b:skin> .

.breadcrumbs {      
padding:5px 5px 5px 0px;       
margin: 0px 0px 15px 0px;       
font-size:95%;       
line-height: 1.4em;       
border-bottom:3px double #e6e4e3;       
}

5. Save template