Tạo Breadcumbs cho trang blogspot

Breadcrumbs là một menu điều hướng nằm ở giao diện người dùng, chúng có tác dụng giúp người dùng dễ dàng truy cập lại những trang mà họ đã lướt hoặc là những trang nằm trong một mục cụ thể nào đó, để hiểu rõ hơn về breadcumbs các bạn có thể tìm hiểu thêm trên internet, hôm nay mình sẽ chỉ hướng dẫn các bạn từng bước tạo breadcumbs cho blog của mình.

Các bạn lần lượt làm theo các bước sau :
Bước 1 : Đăng nhập vào Blogger : Dashboard > Design > Edit Html
Bước 2 : Tìm đoạn code sau :

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

và thay thế bởi đoạn code sau :

<b:include data='posts' name='breadcrumb'/>

Bước 3: Bây giờ các bạn tìm đoạn code sau :

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

Và thay thế bằng :

<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ước 4 : Bây giờ chúng ta sẽ tạo những hiệu ứng thật cool cho Breadcumbs bằng css
Các bạn tìm đoạn code sau :

]]></b:skin>

Và thay thế bằng :

/* Breadcrumbs Css info @ http://www.thuthuatweb.net/ */

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:2px solid #e6e4e3;}

.breadcrumbs :hover{

border-bottom:2px dashed #e6e4e3;

background:#f1f1f1;

}

]]></b:skin>

Thế là xong, bây giờ các bạn đã có breadcumbs cho blog của mình.