NỘI DUNG CỦA TAB 1
NỘI DUNG CỦA TAB 2
NỘI DUNG CỦA TAB 3
NỘI DUNG CỦA TAB 4
NỘI DUNG CỦA TAB 5
Chèn nột dung muốn hiển thị
Home » Thủ thuật Blogspot » Breadrumbs - Thủ thuật tạo Breadrumbs cho Blogger / Blogspot

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

Unknown || || || Leave a 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. 

>>2 Columns - Thủ thuật tạo 2 cột cho Main Blogger
>>Random Posts - Thủ thuật bài viết ngẫu nhiên cho Blogger Version 1
>>Emoticons - Thủ thuật chèn biểu tượng vào bình luận Blogger
>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh ngang cho Blogger

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

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

B. Style 2: Sẽ tiếp tục được cập nhật...
/[ 0 nhận xét Untuk Artikel Breadrumbs - Thủ thuật tạo Breadrumbs cho Blogger / Blogspot]\


Đăng nhận xét