Hướng dẫn thêm vài dòng mô tả ngắn cho trang label trong blogspot

Tạo vài dòng mô tả ngắn giới thiệu về trang search label hiển thị bên dưới đường dẫn breadcrunb trong blogspot

Có một số bạn hỏi mình về cách thêm vài dòng mô tả ngắn cho trang tìm kiếm label áp dụng cho những Blog bán hàng, giới thiệu sản phẩm hay đơn giản là Blog cá nhân nhưng muốn làm nổi bật trang. Khi thêm những dòng mô tả này lại vô cùng cần thiết giúp khách truy cập hiểu được trang mà họ đang đọc viết về vấn đề gì? Giới thiệu sản phẩm gì?..., qua đó cũng giúp họ tìm kiếm nhanh nội dung bài viết.

Cách thêm vài dòng mô tả ngắn đơn giản nhất và tránh bị vòng lặp b:loop nên thêm ngay dưới đường dẫn breadcrumb, cách thêm như sau:

Đăng nhập vào Blog của bạn chọn Chủ đề > Chỉnh sửa HTML > Chuyển đến tiện ích > Blog 1 sau đó thêm thẻ tag b:includable label-description cùng với các thẻ tag b:includable khác

<b:includable id='label-description' var='posts'>
  <b:if cond='data:blog.searchLabel == &quot;label-name&quot;'><p class='label-info'>Viết mô tả</p></b:if>
  <b:if cond='data:blog.searchLabel == &quot;label-name&quot;'><p class='label-info'>Viết mô tả</p></b:if>
  <b:if cond='data:blog.searchLabel == &quot;label-name&quot;'><p class='label-info'>Viết mô tả</p></b:if>
</b:includable>

Trong nội dung của thẻ tag này sẽ đặt điều kiện cho trang tìm kiếm label, giả sử mình có một label tên thiet-ke-blogspot, mình sẽ đặt điều kiện và viết mô tả như sau

<b:if cond='data:blog.searchLabel == &quot;thiet-ke-blogspot&quot;'><p class='label-info'>Hướng dẫn căn bản cho người mới các bước thiết kế Blogspot chuẩn SEO, giao diện đẹp, tối ưu với công cụ tìm kiếm, trang tải nhanh.</p></b:if>

Khi khách truy cập liên kết /search/label/thiet-ke-blogspot sẽ ra hình minh họa như dưới:

Khi viết điều kiện cho trang xong thêm thẻ tag <b:include data='posts' name='label-description'/> nằm ngay dưới thẻ <b:include data='posts' name='breadcrumb'/>

<b:includable id='main' var='top'>
  <b:include data='posts' name='breadcrumb'/>
  <b:include data='posts' name='label-description'/>
  ...
</b:includable>

Khi tải trang kiểm tra HTML sẽ cho ra kết quả, ví dụ:

<div class="widget Blog" data-version="1" id="Blog1">
  <!--đường dẫn breadcrumb-->
  <div class="breadcrumbs">...</div>
  <!--mô tả label-->
  <p class="label-info">...</p>
  <!--các bài viết-->
  <div class="blog-posts">...</div>
  <!--phân trang-->
  <div class="blog-pager" id="blog-pager">...</div>
</div>

Phần thiết kế css cho phần hiển thị của class label-info, các bạn tự viết cho phù hợp với Blog của mình, ví dụ tham khảo:

.label-info {
    line-height: 1.6em;
    font-size: 16px;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

Created by CB MONKEY