Tạo widget popular post theo style grid cho blogspot

Chào các bạn hôm nay mình sẽ hướng dẫn các bạn tạo widget bài đăng phổ biến (popular post) cho blogspot.

HƯỚNG DẪN CÁCH LÀM:
Bước 1: Vào trang Bố cục của blog -> Thêm tiện ích -> Bài đăng phổ biến -> Trong mục Hiển thị tích chọn Hình ảnh thu nhỏ và nhấn Lưu
Bước 2: Trở lại trang Chỉnh sửa HTML và tìm thẻ ]]></b:skin> rồi thêm css bên dưới lên trên nó
/* Popular post */
.popular-posts .widget-content ul li{padding:0}
.popular-posts .item-thumbnail{float:left;margin:0;width:100%;box-sizing:border-box}
.popular-posts li{width:50%;float:left;padding:6px}
.popular-posts .item-content{width:99%;overflow:hidden;float:left;padding:6px;box-sizing:border-box}
.popular-posts .item-thumbnail img{float:left;width:100%;height:95px;object-fit:cover;box-sizing:border-box;border-radius:3px;margin:0;padding:0}
.popular-posts .item-snippet{display:none}
.popular-posts .item-title a{margin-top:10px;line-height:20px;font-weight:600;color:#5b5b5b;font-size:13px;padding-bottom:.2em;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-line-clamp:2;overflow:hidden;-webkit-box-orient:vertical}
.popular-posts .ty-meta span.item-date{color:#999;font-size:9px;line-height:12px;text-transform:uppercase;margin:3px 0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
Lưu ý:
  • Nhớ xóa css trước đó để tránh tình trạng hiển thị k giống như bản share
  • Tìm đến <b:with value='data:post.featuredImage.isResizable và thay các giá trị trong nó để cho hình ảnh hiện thị rõ hơn nhé
Chúc bạn thành công!

5
4
3
2
1

12 nhận xét:

» Hướng dẫn nhúng hình ảnh: [img]http://domain.com/image.png[/img]
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow" target="_blank">Link</a>
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Không spam link, chia sẻ các link không liên quan đến bài viết.
» Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
» Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Group giao lưu, giải đáp và chia sẻ kinh nghiệm blogspot - blogger :

  • Kích hoạt giao diện tối
  • Giao diện tối giúp bạn nhìn vào ban đêm, làm dịu mắt và tránh căng thẳng khi phải nhìn vào màn hình sáng quá nhiều.

    Đếm ngược thời gian đến tết Kỷ Hợi 2019