Hướng dẫn tạo đường dẫn breadcrumb cho các trang khác nhau Read More
Hướng dẫn thêm thẻ meta đầy đủ, chính xác và không bị trùng lặp Read More
Thiết lập nút chia sẻ bài viết lên Twitter hiển thị đầy đủ nội dung Read More
Cách sử dụng các thẻ điều kiện Blogger 2020 Read More
Share Template Blogspot Magify Responsive [Premium Version Download] Read More
Hướng dẫn thêm vài dòng mô tả ngắn cho trang label trong blogspot Read More
Hướng dẫn việt hóa label hiển thị tiếng việt trong blogspot Read More
Thêm dữ liệu có cấu trúc breadcrumb trong bài viết blogspot Read More
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 == "label-name"'><p class='label-info'>Viết mô tả</p></b:if> <b:if cond='data:blog.searchLabel == "label-name"'><p class='label-info'>Viết mô tả</p></b:if> <b:if cond='data:blog.searchLabel == "label-name"'><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 == "thiet-ke-blogspot"'><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
Post a Comment