Cách tạo Breadcrumbs cho blogger

Breadcrumbs là gì ?
- Breadcrumbs là tập hợp các liên kết giúp người xem xác định được vị trí của mình trong blog.

Lợi ích của Breadcrumbs
- Giúp người dùng biết được vị trí của mình trên trang, thuận tiện di chuyển đến các trang.
- Breadcrumbs làm giảm tỷ lệ thoát trang -> giúp ích cho việc SEO.
- Google cũng đánh giá trang web thông qua Breadcrumbs.

Hướng dẫn tạo Breadcrumbs cho blogger (blogspot)

Bước 1: Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML Thêm đoạn css trước thẻ ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:90%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
font-weight:bold;
}

Bước 2: Tìm <b:include data='top' name='status-message'/> (code này nằm bên trong <b:includable id='main' var='top'> ) thêm code sau vào ngay bên dưới
<b:include data='posts' name='breadcrumb'/>

Bước 3: Tìm <b:includable id='main' var='top'> thêm bên trên
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>
 &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:loop>
<b:else/>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:includable>

Lưu mẫu lại.

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

Đăng nhận xét

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

Mới hơn Cũ hơn

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !