Cách thêm Breadcrumb dưới dữ liệu có cấu trúc trong Blogger

Tiện ích điều hướng Breadcrumbs cho Blogger sẽ giúp trang web của bạn thân thiện hơn với người dùng và khả năng tương thích tìm kiếm.
Thêm Dữ liệu có cấu trúc Breadcrumb hoặc Đánh dấu lược đồ sẽ giúp Blog của bạn vào Công cụ tìm kiếm có hiệu quả để hiển thị tiêu đề bài viết thay vì URL đầy đủ.

ĐỂ THÊM THANH ĐIỀU HƯỚNG BREADCRUMB TRONG BLOGGER, HÃY ÁP DỤNG CÁC BƯỚC SAU:

1. Truy cập Blogger và chọn blog của bạn và chọn ' Mẫu → Chỉnh sửa HTML '

2. Nhấp vào một mã trên mã mẫu và ' CTRL+ F' và tìm kiếm
<b:includable id='main' var='top'> và thay thế bằng mã sau

Ngay bên dưới dán mã sau
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  » <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archive For<data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All Posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Thêm CSS sau đây ngay trước đó ]]></b:skin>

.breadcrumbs {
    border: 1px solid black;
    background: #fff;
    margin-top: 2%;
}

.breadcrumbs a {
    color: #b93434;
    text-decoration: none;
}

.breadcrumbs a:hover{}

Bạn có thể tùy chỉnh CSS với mong muốn của bạn.

Related Post:

• Cách thêm Breadcrumb dưới dữ liệu có cấu trúc trong Blogger