Share
View previous topicGo downView next topic
Tổng số bài gửi : 3
Join date : 2018-04-04
View user profile

Tạo breadcrum cho blogspot

on 13/04/18, 04:20 pm
Breadcrum là gì?

Breadcrum là tập hợp các liên kết sắp xếp dưới dạng đường dẫn (path) nhằm giúp cho người đọc biết được vị trí của bài viết mình đang xem nằm ở đâu trong trang blog.

Ví dụ:  

  • Bạn có breadcrum sau: Trang chủ >> Template cho blogger >> tìm hiểu về template
  • Như vậy để vào xem được bài viết tìm hiểu về template thì bạn vào trang chủ và vào phần Template cho blogger


Hướng dẫn tạo breadcrum cho bài viết trên blogspot

Bước 1: Vào Template (Mẫu) --> Edit HTML (chỉnh sửa HTML) chọn Expand the Widget Templates (Mở rộng Mẫu tiện ích)

Bước 2: Thêm mã css sau và trước ]]>

Code:
#Breadcrumbs{color: #000;font-size: 14px;margin-bottom:15px;padding:10px;background:#FFF;border:2px solid #BBBBBB; font-weight:bold; text-decoration:none; }
#Breadcrumbs a{color: #000,font-size: 14px}
#Breadcrumbs div{float: left;}

Bước 3: Tim đoạn code dưới đây

Code:
<b:includable id='post' var='post'>

Và Copy đoạn code dưới đây vào phía dưới nó

Code:
<b:if cond='data:blog.pageType == "item"'>
<div id='Breadcrumbs'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'> <span itemprop='title'>[color=#ff3300]<data:blog.title/>[/color]</span></a> »</div>
<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"'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a> »</div>
</b:if>
</b:loop>
<span><data:post.title/></span>
</b:if>
</b:loop>
</div>
</b:if>

Bạn có thể thay thế bằng "Trang chủ" hoặc "Home" hay bằng biểu tượng "cái nhà" tùy theo ý thích của bạn. Nếu bạn để mặc định thì nó sẽ tự động lấy tittle của blog bạn mà thêm vào.
View previous topicBack to topView next topic
Permissions in this forum:
You cannot reply to topics in this forum