Tạo Breadcrumb cho Blogger (Blogspot)

Breadcrumb là một thuật ngữ mô tả về thanh địa chỉ liên kết, nó cho biết bạn đang xem gì, chương mục nào của website (ví dụ: Home » Category » Post Title). Mình rất thích truy cập những trang như thế, nó rất hữu ích, tiện lợi cho người dùng.

Với Google blog bạn có thể tạo nhiều style breadcrumbs khác nhau. xTraffic sẽ chia sẻ với bạn 2 kiểu phổ biến hiện nay. Nhưng trước tiên bạn vào mục “Mẫu -> Chỉnh sửa HTML“, rồi làm theo hướng dẫn của Kiểu 1 hoặc Kiểu 2 theo sở thích.

Tạo breadcrumb dựa vào danh mục

Tạo Breadcrumb cho Blogger (Blogspot) - blogger blogspot Breadcrumb - Blogger (Blogspot) Thủ thuật Blog Phát triển website

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'/>

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

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

Thay thế nó thành đoạn code dưới đây:

<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'>

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;
}

Lưu lại và xem thử trong từng bài viết của bạn.

Leave a Comment