Chèn Breadcrumbs vào trong Blogspot

Với nhiều tính năng mà một website cần có, thì breadcrumb luôn là sự lựa chọn cần thiết cho việc xây dựng trang web thân thiện hơn với người dùng. Và nó giúp khách viếng thăm blog của bạn dễ dàng tìm đến nội dung mà họ muốn tới.

Start:
1 Đăng nhập vào  Blogger .
2 Vào Template -> Edit HTML
3 Nhấn Ctrl + F rồi tìm đoạn code sau :

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

Sau đó copy đoạn code bên dưới và dán vào sau đoạn code tìm thấy.

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

4 Tiếp tục tìm đoạn code sau :

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

Sau đó copy đoạn code bên dưới và dán vào trên đoạn code tìm thấy:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url and data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' id='breadcrumbs'>
<span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><i class='fa fa-home'/> Home </span></a></span><i class='fa fa-caret-right'/>
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=15&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'> <i class='fa fa-folder'/> <data:label.name/></span></a> <i class='fa fa-caret-right'/> <b:if cond='data:label.isLast != &quot;true&quot;'> <i class='fa fa-folder'/> </b:if></span>
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

5  Tìm  ]]></b:skin> rồi copy và dán đoạn CSS bên dưới bên trên nó.

/* breadcrumbs */
.breadcrumbs{padding:10px 10px;margin-bottom: 3px;color:#666;background:#fff;font-size:14px}

Xong rồi, bây giờ các bạn có thể tự kiểm tra kết quả
Chúc các bạn thành công !