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 == "item"'> <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 + "?max-results=15"' 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 != "true"'> <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 !