Hướng dẫn tạo Breadcrumb cho blogger

 Hướng dẫn tạo Breadcrumb cho blogger

Chào mừng các bạn đến với blogs PhucNguyenIT.
Trong chủ đề này chúng ta sẽ đi tìm hiểu về các làm thế nào để tạo Breadcrum cho blogspot và tác dụng của việc thêm Breadcrum cho blogspot
Chúng ta sẽ đi tìm hiểu :

Breadcrum blogger là gi ?

Breadcrumbs  tập hợp các đường liên kết phân cấp giúp người dùng có thể biết được mình đang ở trang nào và từ đó có thể di chuyển thuận lợi từ trang này trang khác trong web.Breadcrumbs là một thành phần rất quan trọng trong hệ thống navigation của website gần như vào bất cứ website nào bạn cũng thấy sự hiện diện của nó. Bạn có thể xem hình ảnh dưới đây để xem breadcrumb là gì.
 

 Breadcrumb khi search trên google

Cách tạo Breadcrumbs cho blogspot

B1: Bạn đăng nhập vào blog -> Thiết kế -> Mẫu -> Chỉnh sửa HTML -> Mở rộng tiện ích và làm các bước 2
B2: Tìm đến đoạn code bên dưới: 

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

Và thay thế đoạn code trên thành:

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

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

B3: Tìm đến đoạn code sau đây:

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

Và thay thế đoạn code trên 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'>

B4: Cuối cùng chèn đoạn code sau 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;       

}

B5: Save template              

Chúc các bạn thành công !
Hãy chia sẻ bài viết nếu bạn cảm thấy có ích cho bạn và mọi người ..!

BÀI VIẾT LIÊN QUAN